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
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
Summary
In this Flutter Tutorial, we learned how to provide a border to Container with a desired color and width.