Container in Flutter

You are currently viewing Container in Flutter
Container in Flutter

Container in Flutter

Container class in flutter 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: 'Coding Dunia 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.

Container Output
Container Output

Leave a Reply