Flutter Container : Detailed Introduction
Flutter Container is a fundamental widget in Flutter that provides the basic layout structure for the widgets. It is a lightweight, non-scrollable widget that can hold multiple child widgets and control the padding, margins, and the background color of its child widgets. In this tutorial, we will discuss the basics of the Container widget and learn how to use it effectively.
Creating a Container
Creating a Container in Flutter is easy and straightforward. You can create a Container by simply wrapping the widget inside the
Container widget and defining the properties you want.
Here is an example of how to create a simple Container:
Container( color: Colors.blue, padding: EdgeInsets.all(20), child: Text("Hello, World!"), )
In this example, the Container has a blue background color and a padding of 20 pixels on all sides. The child widget is a
Text widget that displays the text “Hello, World!”.
Properties of Container
The Container widget has several properties that can be used to customize its appearance and behavior. Here are the most commonly used properties:
color: This property sets the background color of the Container.
padding: This property sets the amount of space to add around the child widget. You can set the padding for each side of the Container using the
margin: This property sets the amount of space outside of the Container. Like the
paddingproperty, you can set the margin for each side of the Container using the
decoration: This property allows you to add a border, background image, or gradient to the Container.
child: This property holds the widget that is displayed inside the Container.
alignment: This property sets the alignment of the child widget inside the Container. The default value is
height: These properties set the width and height of the Container. By default, the Container takes up as much space as it needs to fit its child widget.
Here is an example of how to create a Container with a border, a background color, and a rounded corner:
Container( width: 200, height: 200, padding: EdgeInsets.all(20), decoration: BoxDecoration( color: Colors.blue, borderRadius: BorderRadius.circular(20), border: Border.all( color: Colors.black, width: 2, ), ), child: Text( "Hello, World!", style: TextStyle( color: Colors.white, fontSize: 20, ), ), )
In this example, the Container has a width and height of 200 pixels, a padding of 20 pixels on all sides, and a blue background color. The border has a black color and a width of 2 pixels, and the corners of the Container are rounded with a radius of 20 pixels. The child widget is a
Text widget that displays the text “Hello, World!” with white color and a font size of 20 pixels.
The Container widget is a fundamental widget in Flutter that provides the basic layout structure for the widgets