# Widgets 01 | Container ## What is Container? > Container means a parent widget that contain a child widget and manage it, such as width, height, background and so on. | Facebook Page | Twitter | GitHub | | ----------------------------------------------------- | --------------------------------------- | ---------------------------------- | | [Flutter Open ](https://www.facebook.com/flutteropen) | [NieBin](https://twitter.com/niebin_gg) | [NieBin](https://github.com/nb312) | ## Before start Before use it, we should create page to contain it, we create a ContainPage as a code structure in order to show our code. ```dart class ContainerPage extends StatefulWidget { @override State createState() => _ContainerState(); } class _ContainerState extends State { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(PageName.CONTAINER), ), body: SingleChildScrollView( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text("Hello world") ], )), ); } } ``` You do not need to understand the code above, you just need to know, we will code in the `children` of `Column`like `Text("Hello world")` ```dart Column( children: [ Text("Hello world") ], ) ``` Then It will be show you like this. ![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LW6SWD_clyzPd9GuJuR%2F-LW6acy8Ta_7j8wR3EMo%2FScreenshot_1547389498.png?alt=media\&token=e664bdda-bd2f-4ba3-8ee0-ba4f2d5820bc) ## Simple use. If you want to use a `Container`, you can just replace the `Text("Hello world")` like below, it just contain a child with default parameters. ```dart Container( color: RED, child: Text("Hello world"), ) ``` It will show you like this. So easy, Ha! ![cut out part of the screen](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LW6SWD_clyzPd9GuJuR%2F-LW6jQ9a_tNwXeqLBOY9%2Fcontainer02.png?alt=media\&token=1a757483-f255-411b-94ab-c108a71ff63d) ## Constructor We can simple use now, but we don't know what it really can do, let's look at the constructor of the `Container`. ```dart Container({ Key key, this.alignment, this.padding, Color color, Decoration decoration, this.foregroundDecoration, double width, double height, BoxConstraints constraints, this.margin, this.transform, this.child, }) ``` We know it has these parameters, so let's see the detail using of these parameters. ### 1. this.child This parameter is used to add a child widget for the container, like the `Text("Hello world")`, only if the type of this parameter is a widget, it can be used here.So the example is above, we do not need more explanation for it. ### 2. Color color The color is used above, you can see that it change the background color of the text. So we can see that, the color is the background-color of the container. The type is the Color.We can add a Container with green color. ```dart Container( color: GREEN, child: Text("Color color"), ), ``` It will show like this. ![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LW6SWD_clyzPd9GuJuR%2F-LW6zTDSWwhJvu4x0JdE%2Fcontainer03.png?alt=media\&token=860c91e1-592d-419e-8dc2-686f68886c26) {% hint style="warning" %} You should care about the color parameter, it can't be used when there also have the parameter \`Decoration decoration\`. So the two parameters, you can use only one parameter. {% endhint %} ### 3. this.padding This parameter is used to set its child distance from four directions. We can see its define in the code. ```dart final EdgeInsetsGeometry padding; ``` ![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LW74plhNygG_iZyFaZT%2F-LW7FFtCwmf8r7dchoW4%2Fcontainer04-edgeInsets.png?alt=media\&token=3ec324a8-02a9-4137-93d3-d6ca093d39f4) Then we know that we must use the class extend `EdgeInsetsGeometry`. So we only have two choices: `EdgeInsetsDirectional` and `EdgeInsets` in the flutter. `EdgeInsetsDirectional` is depends on direction of the `TextDirection`, its using is the same as `EdgeInsets`. Now, let's focus on the class `EdgeInsets` , it just depends on the distance from top,bottom, left and right. ```dart Container( color: YELLOW, padding: EdgeInsets.only(left: 10.0, right: 50.0, top: 10, bottom: 30), child: Container( color: BLUE_DEEP, child: Text("this.padding"), ), ) ``` ![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LW6SWD_clyzPd9GuJuR%2F-LW6zVkizwNAVIkNC9TA%2Fcontainer04.png?alt=media\&token=272562c3-13ed-4bc2-ba47-68e5a7f2fa2e) Add the arrow description what is the top, bottom, left, right for padding with `EdgeInsets`. ![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LW6SWD_clyzPd9GuJuR%2F-LW6zXhH_ls81NnrWxaY%2Fcontainer04-padding.png?alt=media\&token=875326d7-03b5-4120-bc9f-fa2e6d1a51db) There are also others functions of the `EdgeInsets`.You can use them as your try, such as below. ```dart EdgeInsets.all(); EdgeInsets.fromLTRB(); EdgeInsets.symmetric(); ``` ### 4. width & height ```dart double width, double height, ``` As you can see, it will control its width,height with these two parameters. Just see a example. ```dart Container( width: 200.0, height: 100.0, color: GREEN, child: Text("width = 200 , height = 100"), ), ```
### 5. this.margin This parameter has some similar with the this, they are both about the distance from the edge. But there is some different between two parameters. Let's see the different in the picture. ![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LW74plhNygG_iZyFaZT%2F-LW7AeYoBRhgIiAw_fvp%2Fcontainer06-margin-padding.png?alt=media\&token=4f715ebd-0aef-4cf3-901b-bf2daf85e633) If we see the define with margin parameter, you can see its type is same as the padding with`EdgeInsetsGeometry`. So we can use `EdgeInsets` too. ```dart final EdgeInsetsGeometry margin; ``` A example. ```dart Container( color: RED, child: Container( margin: EdgeInsets.only(left: 10.0, right: 50.0, top: 10, bottom: 30), color: GREEN, child: Text("this.margin"), ), ), ``` ![margin](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LW74plhNygG_iZyFaZT%2F-LW7C8UQqDlj1dWinuTo%2Fcontainer06.png?alt=media\&token=8dc2a0f1-8e8a-408d-85f2-6071c58fc6da) You can see, we use the different param comply the same distance effect. ### 6. this.alignment We can see the define in the project. ```dart final AlignmentGeometry alignment; ``` But you do not use it directly , you should use its child class. Let's see the relationship about the `AlignmentGeometry`. ![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LW74plhNygG_iZyFaZT%2F-LW7L5rFIxdS0_djlTLJ%2Fcontainer07-alignment.png?alt=media\&token=30cf8ff7-63d6-4405-ae6f-3a534ac848ab) The `Alignment` has follow constant. | 1 | 2 | 3 | | ---------- | ------------ | ----------- | | topLeft | topCenter | topRight | | centerLeft | center | centerRight | | bottomLeft | bottomCenter | bottomRight | We can use one to the effect, the code means that we show the child at the bottom-right of the `Container`. ```dart Container( color: BLUE_LIGHT, alignment: Alignment.bottomRight, height: 200, child: Text("this.alignment"), ), ``` ![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LW74plhNygG_iZyFaZT%2F-LW7Mala7CVPbHjUiD-8%2Fcontainer07-alignment-code.png?alt=media\&token=62a9f926-b627-483b-8eb8-658eebdd95d6) The same we can use the `AlignmentDirectional` to show locate our child widget. Also, we have these constants as following. | 1 | 2 | 3 | | ----------- | ------------ | --------- | | topStart | topCenter | topEnd | | centerStart | center | centerEnd | | bottomStart | bottomCenter | bottomEnd | This depends on the direction of `textDirection`. The using is the same as the Alignment. ```dart Container( color: YELLOW, height: 100.0, alignment: AlignmentDirectional.bottomEnd, child: Text( "HellH", textDirection: TextDirection.rtl, ), ) ``` ![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LW9S4B_CpPU4zTzj4Vq%2F-LW9drJAvRejQB1RFwNF%2Fcontainer07-alignment-direction.png?alt=media\&token=6c932634-24ad-488e-afbb-cb6976e2add9) ### 7. constrains We can see the define param, its class is `BoxConstaints`. ```dart BoxConstraints constraints, ``` It has many constructors, such as `tight`, `loose`and `expand`. I will focus on these three constructors, others will remain to you. #### tight ```dart BoxConstraints.tight(Size size) : minWidth = size.width, maxWidth = size.width, minHeight = size.height, maxHeight = size.height; ``` This means that if you assign a size to it, which will make a fixed value to it,the min=max. So does not have the change range. #### loose ```dart BoxConstraints.loose(Size size) : minWidth = 0.0, maxWidth = size.width, minHeight = 0.0, maxHeight = size.height; ``` You can see this constructor, the min =0.0 and the max is the assign value. So you give a max value to it if you assign a value like this. #### expand ```dart const BoxConstraints.expand({ double width, double height }): minWidth = width != null ? width : double.infinity, maxWidth = width != null ? width : double.infinity, minHeight = height != null ? height : double.infinity, maxHeight = height != null ? height : double.infinity; ``` That means you can choose width or height or both to assign. If you assign to it, the param will be a fixed value and min=max. If you do not assign, it will be equal to `infinity`, so it will as large as possible in the parent widget. This time, I just show an example with `expand`. ```dart Container( color: BLUE_LIGHT, constraints: BoxConstraints.expand(height: 50.0), child: Text("BoxConstraints constraints"), ), ``` In the code above, the `minHeight,maxHeight=50.0`,`minWidth,maxWidth =double.infinity`. Show below. ![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LW9h7NJ6Lg1pDMrNbHI%2F-LW9oGqmtisF0OcWq_wN%2Fcontainer08-constaint.png?alt=media\&token=822784d3-56b6-4c55-86fc-25490e078675) ### 8. decoration & foregroundDecoration In the part, I will tell you two parameters, they have the same type but different effect. ```dart Decoration decoration, this.foregroundDecoration, final Decoration foregroundDecoration; ``` So let's see different between them as below. We can see the `foregroundDecoration` cover on the child, and the child is upon the `decoration`. ![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LW9h7NJ6Lg1pDMrNbHI%2F-LW9sFGRbEsc3GbVsDm4%2Fdecoration-fore.png?alt=media\&token=73c7cde7-071f-414e-afc7-3640f64b7ebb) This is main different between them, so I just show you how use the decoration then you can use the `foregroundDecoration` as the same way. The Decoration is abstract class, so you can't use it directly. You must use its child class, let's see its extends relation with two main classes. ![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LW9h7NJ6Lg1pDMrNbHI%2F-LW9xvQoGgYnMFUtQQg2%2Fdecoration-extends.png?alt=media\&token=939572a6-3da3-43da-b798-d467efbc7325) #### ShapeDecoration ```dart Container( constraints: BoxConstraints.expand(height: 100.0), padding: EdgeInsets.all(10), decoration: ShapeDecoration( shape: RoundedRectangleBorder( borderRadius: BorderRadius.all( Radius.circular(10.0), ), ), color: RED), child: Text("decoration: ShapeDecoration"), ) ``` ![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LW9h7NJ6Lg1pDMrNbHI%2F-LW9ybdUBKj0yUCgfPCX%2Fcontainer09-decoration-shape.png?alt=media\&token=cb0c11a2-98eb-4c6c-96d5-7d4da7ede500) #### BoxDecoration ```dart Container( constraints: BoxConstraints.expand(height: 200.0), alignment: Alignment.center, padding: EdgeInsets.all(10), decoration: BoxDecoration( gradient: LinearGradient(colors: [BLUE_LIGHT, YELLOW]), shape: BoxShape.circle), child: Text("decoration: BoxDecoration"), ), ``` ![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LW9h7NJ6Lg1pDMrNbHI%2F-LWA-_haVwoRyGQrK0MN%2Fcontainer09-decoration-box.png?alt=media\&token=ab879fa5-c8ca-4e68-90a2-81f54d0c7108) ### 9. this.transform ```dart final Matrix4 transform; ``` This parameter is used to change the container coordinate in the parent widget. Because this parameter relate with the math, it will be a bit difficult to understand. So we just get a simple to show the effect, do not go deep with this class. ```dart Container( padding: EdgeInsets.only(top: 10, left: 10), constraints: BoxConstraints.expand(height: 100, width: 100), color: BLUE_LIGHT, child: Text("this.transform"), ), Container( padding: EdgeInsets.only(top: 10, left: 10), constraints: BoxConstraints.expand(width: 100, height: 100), color: RED_LIGHT, transform: Matrix4.rotationY(pi / 4)..rotateX(pi / 4), child: Text("this.transform"), ) ``` ![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LW9h7NJ6Lg1pDMrNbHI%2F-LWA7NaoMGYIimYugeVn%2Fcontainer10-transform.png?alt=media\&token=6d91d868-8919-4b36-a0da-566462898984) ## Conclusion Then, our container is complete, you do need understand all of them, just know there are some parameters you can use to comply your requirement and choose to use , also you need to take more excise to make better. Good luck! Thanks for your reading! The end. #### Whole code in [GitHub](https://github.com/FlutterOpen/flutter-widgets-examples),star to support. #### | Facebook Page | Twitter | QQ Group | GitHub | ​ | | ------------------------------------------------------- | ----------------------------------------- | --------- | ------------------------------------ | - | | ​[Flutter Open](https://www.facebook.com/flutteropen) ​ | ​[NieBin](https://twitter.com/niebin_gg)​ | 963828159 | ​[NieBin](https://github.com/nb312)​ | ​ |