<\/a><\/a><\/a><\/p>\n\n\n\n 2. color:<\/strong>\u00a0This property is used to set the\u00a0background color of the text<\/strong>. It also changes the background color of the entire container. See the below example:<\/a><\/a><\/a><\/p>\n\n\n\n 3. height and width:<\/strong>\u00a0This property is used to set the container’s height and width according to our needs. By default, the container always takes the space based on its child widget. See the below code:<\/p>\n\n\n\n <\/a><\/a><\/a><\/p>\n\n\n\n 4. margin:<\/strong>\u00a0This property is used to surround the empty space around the container<\/strong>. We can observe this by seeing white space around the container. Suppose we have used the\u00a0EdgeInsets.all(25)<\/strong>\u00a0that set the equal margin in all four directions, as shown in the below example:<\/p>\n\n\n\n <\/a><\/a><\/a><\/p>\n\n\n\n 5. padding:<\/strong>\u00a0This property is used to\u00a0set the distance<\/strong>\u00a0between the border of the container (all four directions) and its child widget. We can observe this by seeing the space between the container and the child widget. Here, we have used an EdgeInsets.all(35) that set the space between text and all four container directions:<\/p>\n\n\n\n <\/a><\/a><\/a><\/p>\n\n\n\n 6. alignment:<\/strong>\u00a0This property is used to\u00a0set the position<\/strong>\u00a0of the child within the container.\u00a0Flutter\u00a0allows the user to align its element in various ways such as center, bottom, bottom center, topLeft, centerRight, left, right, and many more. In the below example, we are going to align its child into the bottom right position.<\/p>\n\n\n\n <\/a><\/a><\/a><\/p>\n\n\n\n 7. decoration:<\/strong> This property allows the developer to add decoration on the widget<\/strong>. It decorates or paint the widget behind the child. If we want to decorate or paint in front of a child, we need to use the forgroundDecoration<\/strong> parameter. The below image explains the difference between them where the foregroundDecoration covers the child and decoration paint behind the child.<\/p>\n\n\n\n The decoration property supported many parameters, such as color, gradient, background image, border, shadow, etc. It is to make sure that\u00a0we can either use the color property in a container or decoration, but not in both<\/strong>. See the below code where we have added a border and shadow property to decorate the box.<\/a><\/p>\n\n\n\n We will see the output as below screenshot:<\/p>\n\n\n\n 8. transform:<\/strong>\u00a0The transform property allows developers to\u00a0rotate the container<\/strong>. It can rotate the container in any direction, i.e., change the container coordinate in the parent widget. In the below example, we will rotate the container in the\u00a0z-axis<\/strong>.<\/a><\/a><\/a><\/p>\n\n\n\n 9. constraints:<\/strong> This property is used when we want to add additional constraints to the child<\/strong>. It contains various constructors, such as tight, loose, expand, etc. Let’s see how to use these constructors in our app:<\/p>\n\n\n\n tight:<\/strong>\u00a0If we use size property in this, it will give fixed value to the child. <\/a><\/p>\n\n\n\n expand:<\/strong>\u00a0Here, we can choose the height, width, or both values to the child.<\/a><\/a><\/a><\/p>\n\n\n\n Let us understand it with an example where we will try to cover most of the container properties. Open the\u00a0main.dart<\/strong>\u00a0file and replace it with the below code:<\/a><\/a><\/a><\/p>\n\n\n\n Output<\/strong><\/p>\n\n\n\n When we run this app, it will give the following screenshot:<\/p>\n\n\n\n Let us learn some of the essential properties of the container widget in detail. 1. child:\u00a0This property is used to store the child widget of the container. Suppose we have taken a Text widget as its child widget that can be shown in the below example: 2. color:\u00a0This property is used to set the\u00a0background color […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[336],"tags":[],"_links":{"self":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/2077"}],"collection":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/comments?post=2077"}],"version-history":[{"count":0,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/2077\/revisions"}],"wp:attachment":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=2077"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=2077"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=2077"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Container( \n child: Text(\"Hello! I am in the container widget\", style: TextStyle(fontSize: 25)), \n) <\/code><\/pre>\n\n\n\nContainer( \n color: Colors.green, \n child: Text(\"Hello! I am in the container widget\", style: TextStyle(fontSize: 25)), \n) <\/code><\/pre>\n\n\n\nContainer( \n width: 200.0, \n height: 100.0, \n color: Colors.green, \n child: Text(\"Hello! I am in the container widget\", style: TextStyle(fontSize: 25)), \n) <\/code><\/pre>\n\n\n\nContainer( \n width: 200.0, \n height: 100.0, \n color: Colors.green, \n margin: EdgeInsets.all(20), \n child: Text(\"Hello! I am in the container widget\", style: TextStyle(fontSize: 25)), \n) <\/code><\/pre>\n\n\n\nContainer( \n width: 200.0, \n height: 100.0, \n color: Colors.green, \n padding: EdgeInsets.all(35), \n margin: EdgeInsets.all(20), \n child: Text(\"Hello! I am in the container widget\", style: TextStyle(fontSize: 25)), \n) <\/code><\/pre>\n\n\n\nContainer( \n width: 200.0, \n height: 100.0, \n color: Colors.green, \n padding: EdgeInsets.all(35), \n margin: EdgeInsets.all(20), \n alignment: Alignment.bottomRight, \n child: Text(\"Hello! I am in the container widget\", style: TextStyle(fontSize: 25)), \n) <\/code><\/pre>\n\n\n\n![\"Flutter](\"https:\/\/static.javatpoint.com\/tutorial\/flutter\/images\/flutter-container2.png\")
<\/figure>\n\n\n\nimport 'package:flutter\/material.dart'; \n \nvoid main() => runApp(MyApp()); \n \n\/\/\/ This Widget is the main application widget. \nclass MyApp extends StatelessWidget { \n \n @override \n Widget build(BuildContext context) { \n return MaterialApp( \n home: Scaffold( \n appBar: AppBar( \n title: Text(\"Flutter Container Example\"), \n ), \n body: Container( \n padding: EdgeInsets.all(35), \n margin: EdgeInsets.all(20), \n decoration: BoxDecoration( \n border: Border.all(color: Colors.black, width: 4), \n borderRadius: BorderRadius.circular(8), \n boxShadow: [ \n new BoxShadow(color: Colors.green, offset: new Offset(6.0, 6.0),), \n ], \n ), \n child: Text(\"Hello! I am in the container widget decoration box!!\", \n style: TextStyle(fontSize: 30)), \n ), \n ), \n ); \n } \n} <\/code><\/pre>\n\n\n\n![\"Flutter](\"https:\/\/static.javatpoint.com\/tutorial\/flutter\/images\/flutter-container3.png\")
<\/figure>\n\n\n\nContainer( \n width: 200.0, \n height: 100.0, \n color: Colors.green, \n padding: EdgeInsets.all(35), \n margin: EdgeInsets.all(20), \n alignment: Alignment.bottomRight, \n transform: Matrix4.rotationZ(0.1), \n child: Text(\"Hello! I am in the container widget\", style: TextStyle(fontSize: 25)), \n) <\/code><\/pre>\n\n\n\nContainer( \n color: Colors.green, \n constraints: BoxConstraints.tight(Size size) \n : minWidth = size.width, maxWidth = size.width, \n minHeight = size.height, maxHeight = size.height; \n child: Text(\"Hello! I am in the container widget\", style: TextStyle(fontSize: 25)), \n)<\/code><\/pre>\n\n\n\nContainer( \n color: Colors.green, \n constraints: BoxConstraints.expand(height: 60.0), \n child: Text(\"Hello! I am in the container widget\", style: TextStyle(fontSize: 25)), \n)<\/code><\/pre>\n\n\n\nimport 'package:flutter\/material.dart'; \n \nvoid main() => runApp(MyApp()); \n \n\/\/\/ This Widget is the main application widget. \nclass MyApp extends StatelessWidget { \n \n @override \n Widget build(BuildContext context) { \n return MaterialApp( \n home: MyContainerWidget(), \n ); \n } \n} \n \nclass MyContainerWidget extends StatelessWidget { \n @override \n Widget build(BuildContext context) { \n return MaterialApp( \n home: Scaffold( \n appBar: AppBar( \n title: Text(\"Flutter Container Example\"), \n ), \n body: Container( \n width: double.infinity, \n height: 150.0, \n color: Colors.green, \n margin: EdgeInsets.all(25), \n padding: EdgeInsets.all(35), \n alignment: Alignment.center, \n transform: Matrix4.rotationZ(0.1), \n child: Text(\"Hello! I am in the container widget!!\", \n style: TextStyle(fontSize: 25)), \n ), \n ), \n ); \n } \n} <\/code><\/pre>\n\n\n\n![\"Flutter](\"https:\/\/static.javatpoint.com\/tutorial\/flutter\/images\/flutter-container4.png\")
<\/figure>\n","protected":false},"excerpt":{"rendered":"