The Essential Container Widget : Basic Layout Element — Flutter Basic Tutorial #2
--
Welcome to this tutorial on the Flutter Container widget.
The Flutter Container widget is an extremely useful and flexible layout element in the Flutter framework. It allows us to specify the size, background color, and other visual properties of a rectangular area in the user interface, and it also provides a number of optional parameters that allow us to customize its appearance and behavior even further. In this article, we’ll take a closer look at the Container widget and explore some of the different ways in which it can be used to create visually appealing layouts for our Flutter app.
To start off, let’s take a look at a basic example of how to use the Container widget. In this example, we’ll create a blue rectangular container that is 200 pixels wide and 200 pixels tall, and we’ll also use the Text widget to display the string `Hello World` within the container:
Center(
child: Container(
width: 200,
height: 200,
color: Colors.blue,
child: const Text('Hello World'),
),
),
This will create a blue rectangular container that is 200 pixels wide and 200 pixels tall, and will also display the text ‘Hello World’ within the container.
Take my Flutter Course for FREE → https://bit.ly/31hxS4R
→ SOURCE CODE — EnLive App :
https://codingyourlife.gumroad.com/l/enlive-flutter-ui-kit-app
→ SOURCE CODE — Car Rental App : https://codingyourlife.gumroad.com/l/flutter-cental-car-app
→ SOURCE CODE - Aqua Workout App : https://codingyourlife.gumroad.com/l/flutter-aqua-workout-app
Now, let’s say that we want to add some space around the content of the container. We can do this using the padding parameter, which allows us to specify the amount of space to add around the content on all sides, or on individual sides. For example, to add 20 pixels of padding on all sides, we can use the following code:
Center(
child: Container(
width: 200,
height: 200,
color: Colors.blue,
padding: const EdgeInsets.all(20),
child: const Text('Hello World'),
),
),
Alternatively, we can specify different amounts of padding for each side using the EdgeInsets.only method, like so:
Center(
child: Container(
width: 200,
height: 200,
color: Colors.blue,
padding: const EdgeInsets.only(top: 20, bottom: 20, left: 40, right: 40),
child: const Text('Hello World'),
),
),
In addition to the padding parameter, the Container widget also has a margin parameter that allows us to add space around the outside of the container. Just like the padding parameter, the margin parameter can be used to specify a uniform margin on all sides or different margins on individual sides. For example, to add a margin of 30 pixels on the horizontal sides and 40 pixels on the vertical sides, we can use the following code:
Container(
width: 200,
height: 200,
color: Colors.blue,
margin: const EdgeInsets.symmetric(horizontal: 30, vertical: 40),
child: const Text('Hello World'),
)Now, let’s say that we want to add a border, shadow, or other visual effects to the container. We can do this using the decoration parameter, which takes a BoxDecoration object as its value. The BoxDecoration object allows us to specify various visual effects, such as a border, border radius, and box shadow. For example, to add a black border with a width of 2 pixels, a border radius of 10 pixels, and a box shadow with a color of black and an opacity of 50%, we can use the following code:
Center(
child: Container(
width: 200,
height: 200,
decoration: BoxDecoration(
color: Colors.blue,
border: Border.all(
color: Colors.black,
width: 2,
),
borderRadius: BorderRadius.circular(10),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.5),
spreadRadius: 2,
blurRadius: 5,
),
],
),
child: const Center(child: Text('Hello World')),
),
)
In addition to these basic layout properties, the Container widget also has several other optional parameters that allow us to customize its appearance and behavior even further. For example, we can use the alignment parameter to specify the alignment of the child widget within the container, the foregroundDecoration parameter to specify a decoration to be painted in front of the child widget, and the transform parameter to specify a transformation to apply to the container.
One thing to keep in mind when using the Container widget is that it takes up as much space as its parent widget allows, unless we explicitly specify its size or use constraints to limit its size. This means that if we want the Container widget to take up a specific amount of space, we need to make sure that its parent widget allows it to do so. We can do this by using a parent widget that has a fixed size, such as a SizedBox, or by using a parent widget that enforces constraints on its children, such as a LayoutBuilder.
In conclusion, the Flutter Container widget is an extremely useful and flexible layout element that allows us to create visually appealing layouts for our Flutter app. It provides a number of optional parameters that allow us to customize its appearance and behavior, and it can be used in a variety of different ways to achieve a wide range of layout effects. Whether you’re just starting out with Flutter or you’re an experienced developer, the Container widget is definitely worth mastering, as it will no doubt come in handy time and time again in your Flutter projects.
Download My Apps → https://codingyourlife.gumroad.com
Buy Me a Coffee → https://www.buymeacoffee.com/faisalramdan17
My Portfolio → https://codecanyon.net/user/codingyourlife/portfolio
→ Take my Flutter Course for FREE:
→ SOURCE CODE — EnLive App :
→ SOURCE CODE — Car Rental App :
→ SOURCE CODE - Aqua Workout App :
