Flutter Container
Container in flutter is a class that can contain one or more widgets init. You can decorate them, give them height and many more properties are there.
Container Properties
There are many properties available for containers, some are listed below.
Height
You can provide height to a container using this property. Suppose you want to make a container with a fixed height so use the below syntax for that.
height: 200,
Now how to give Match Parent height to the container?
height: double.infinity,
Container using this property along with the above properties
Container( height: double.infinity )
Width
You can provide width to a container using this property. Suppose you want to make a container with fixed width so use the below syntax for that.
width: 200,
Now how to give Match Parent width to the container?
width: double.infinity,
Container using this property along with the above properties
Container( height: double.infinity, width: double.infinity, )
Alignment
You can give alignment using this property, suppose you want to make your container in the center so using this property you can make it easier, check the below syntax for this.
alignment: Alignment.center,
Container using this property along with the above properties
Container( height: double.infinity, width: double.infinity, alignment: Alignment.center, )
Padding
If you want to put some padding in a container, this is the property for giving padding. From the syntax below you can learn “How to give padding in a container?”
If you just want to put padding for a particular side then use the below syntax.
padding: EdgeInsets.only(bottom: 10, left: 10, right: 10, top: 0),
If you just want to put the same padding for all sides then use the below syntax.
padding: EdgeInsets.all(10.0),
Container using this property along with the above properties
Container( height: double.infinity, width: double.infinity, alignment: Alignment.center, padding: EdgeInsets.all(10.0), )
Margin
If you want to put some margin in a container, this is the property for giving margin. From the syntax below you can learn “How to give margin for a container?”
If you just want to put margin for a particular side then use the below syntax.
margin: EdgeInsets.only(bottom: 10, left: 10, right: 10, top: 0),
If you just want to put the same margin for all sides then use the below syntax.
margin: EdgeInsets.all(10.0),
Container using this property along with the above properties
Container( height: double.infinity, width: double.infinity, alignment: Alignment.center, padding: EdgeInsets.all(10.0), margin: EdgeInsets.all(10.0), )
Color
If you want to give color to a container, this is the property for giving color. From the syntax below you can learn “How to give color to a container?”
color: Colors.green,
Container using this property along with the above properties
Container( height: double.infinity, width: double.infinity, alignment: Alignment.center, padding: EdgeInsets.all(10.0), margin: EdgeInsets.all(10.0), color: Colors.green, )
Decoration
For the decoration, you can use BoxDecoration, where you decide the color, image, border, borderRadius, gradient of the container. Check below Syntax for this. If you’re using decoration then remove color property from the container.
decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.topLeft, end: Alignment.topRight, colors: <Color>[Colors.red, Colors.blue]), borderRadius: BorderRadius.all( Radius.circular(20.0), ), )
Container using this property along with the above properties
Container( height: double.infinity, width: double.infinity, alignment: Alignment.center, margin: EdgeInsets.all(10.0), decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.topLeft, end: Alignment.topRight, colors: <Color>[Colors.red, Colors.blue]), borderRadius: BorderRadius.all( Radius.circular(20.0), ), ) )
Child
This is the very important property of a container, You can use any widget in this property. Suppose you want to make a Text in the container so you can make it as a child widget in the container, see below for example
Container( height: double.infinity, width: double.infinity, alignment: Alignment.center, margin: EdgeInsets.all(10.0), decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.topLeft, end: Alignment.topRight, colors: <Color>[Colors.red, Colors.blue]), borderRadius: BorderRadius.all( Radius.circular(20.0), ), ), child: Text( 'This is the example for container', style: TextStyle(color: Colors.white), ), )
Complete Example
You can see the complete example below and also its output
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: 'Container Example'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key? key, required this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Container( height: double.infinity, width: double.infinity, alignment: Alignment.center, margin: EdgeInsets.all(10.0), decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.topLeft, end: Alignment.topRight, colors: <Color>[Colors.red, Colors.blue]), borderRadius: BorderRadius.all( Radius.circular(20.0), ), ), child: Text( 'This is the example for container', style: TextStyle(color: Colors.white), ), )); } }
Output
So here we are done with our Container example, check the below screenshot for the output of this example.
