Flutter – Change Container Border’s Color & Width

You can change the color and width of Container widget’s border.

To change the color and width of Container’s border, use its decoration property.

Set decoration property with BoxDecoration() object. Set the border property of BoxDecoration() object, with required color and width as per your applications specifications.

Change Container Border’s Width and Color

In this example, we will set the border’s color width to Colors.red and width to 5.

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('Flutter Tutorial - googleflutter.com'),
          ),
          body: Center(
              child: Column(children: <Widget>[
            Container(
              width: 200,
              height: 200,
              margin: EdgeInsets.all(10),
              padding: EdgeInsets.all(5),
              child: Text(''),
              decoration: BoxDecoration(
                  color: Colors.yellow[100],
                  border: Border.all(
                    color: Colors.red,
                    width: 5,
                  )),
            ),
          ]))),
    );
  }
}

Screenshot

Flutter - Change Container Border's width and color

Let us change the border color and border width and run the application.

Container widget Code snippet

Container(
  width: 200,
  height: 200,
  margin: EdgeInsets.all(10),
  padding: EdgeInsets.all(5),
  child: Text(''),
  decoration: BoxDecoration(
	  color: Colors.yellow[200],
	  border: Border.all(
		color: Colors.green,
		width: 20,
	  )),
),

Screenshot

Flutter - Change Container Border's width and color

Summary

In this Flutter Tutorial, we learned how to provide a border to Container with a desired color and width.

Desclaimer: We are not affiliated, associated, authorized, endorsed by, or in any way officially connected with the Google, Apple or Flutter, or any of its subsidiaries or its affiliates. The names Google, Apple and Flutter as well as related names, marks, emblems and images are registered trademarks of their respective owners. This site googleflutter.com covers tutorials related to Flutter developed by Google.