Container class in Flutter
Last Updated :
26 Feb, 2025
Container class in flutter is a convenience widget that combines common painting, positioning, and sizing of widgets. A Container class can be used to store one or more widgets and position them on the screen according to our convenience. Basically, a container is like a box to store contents. A basic container element that stores a widget has a margin, which separates the present container from other contents. The total container can be given a border of different shapes, for example, rounded rectangles, etc. A container surrounds its child with padding and then applies additional constraints to the padded extent (incorporating the width and height as constraints, if either is non-null).
Check out this post to understand the scaffold widget which we will be using in our examples.
Constructor of Container Class
Syntax:
Container({Key key,
AlignmentGeometry alignment,
EdgeInsetsGeometry padding,
Color color,
Decoration decoration,
Decoration foregroundDecoration,
double width,
double height,
BoxConstraints constraints,
EdgeInsetsGeometry margin,
Matrix4 transform,
Widget child,
Clip clipBehavior: Clip.none});Properties of Container Class
1. child : Container widget has a property ‘child:’ which stores its child. The child class can be any widget. Let us take an example, taking a text widget as a child.
Example:
Dart
import 'package:flutter/material.dart';
// Entry point of the application
void main() => runApp(const MyApp());
// Main application widget
class MyApp extends StatelessWidget
{
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
// Disable the debug banner
debugShowCheckedModeBanner: false,
home: Scaffold(
// App bar with a title
appBar: AppBar(
backgroundColor: Colors.blue,
title: const Text(
"Container example",
style: TextStyle(color: Colors.white),
),
),
// Body of the scaffold with a container
body: Container(
child: const Text(
"Hello! I am inside a container!",
style: TextStyle(fontSize: 20),
),
),
),
);
}
}
Output:
2. color : The color property sets the background color of the entire container. Now we can visualize the position of the container using a background color.
Example:
Dart
import 'package:flutter/material.dart';
// Entry point of the application
void main() => runApp(const MyApp());
// Main application widget
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
// Disable the debug banner
debugShowCheckedModeBanner: false,
home: Scaffold(
// App bar with a title
appBar: AppBar(
backgroundColor: Colors.blue,
title: const Text(
"Container example",
style: TextStyle(color: Colors.white),
),
),
// Body of the scaffold with a container
body: Container(
// Background Color of the Container
color: Colors.green,
child: const Text(
"Hello! I am inside a container!",
style: TextStyle(fontSize: 20,
color: Colors.white
),
),
),
),
);
}
}
Output:
3. height and width : By default, a container class takes the space that is required by the child. We can also specify the height and width of the container based on our requirements.
Example:
Dart
import 'package:flutter/material.dart';
// Entry point of the application
void main() => runApp(const MyApp());
// Main application widget
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
// Disable the debug banner
debugShowCheckedModeBanner: false,
home: Scaffold(
// App bar with a title
appBar: AppBar(
backgroundColor: Colors.blue,
title: const Text(
"Container example",
style: TextStyle(color: Colors.white),
),
),
// Body of the scaffold with a container
body: Container(
// Height of the container
height: 200,
// Width of the container
width: double.infinity,
color: Colors.green,
child: const Text(
"Hello! I am inside a container!",
style: TextStyle(fontSize: 20,
color: Colors.white
),
),
),
),
);
}
}
Output:
4. margin : The margin is used to create an empty space around the container. Observe the white space around the container. Here EdgeInsets.geometry is used to set the margin .all() indicates that the margin is present in all four directions equally.
Example:
Dart
import 'package:flutter/material.dart';
// Entry point of the application
void main() => runApp(const MyApp());
// Main application widget
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
// Disable the debug banner
debugShowCheckedModeBanner: false,
home: Scaffold(
// App bar with a title
appBar: AppBar(
backgroundColor: Colors.blue,
title: const Text(
"Container example",
style: TextStyle(color: Colors.white),
),
),
// Body of the scaffold with a container
body: Container(
height: 200, // Height of the container
width: double.infinity, // Width of the container
margin: const EdgeInsets.all(20), // Margin of the container
color: Colors.green,
child: const Text(
"Hello! I am inside a container!",
style: TextStyle(fontSize: 20,
color: Colors.white
),
),
),
),
);
}
}
Output:
5. padding: The padding is used to give space from the border of the container from its children. Observe the space between the border and the text.
Example:
Dart
import 'package:flutter/material.dart';
// Entry point of the application
void main() => runApp(const MyApp());
// Main application widget
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
// Disable the debug banner
debugShowCheckedModeBanner: false,
home: Scaffold(
// App bar with a title
appBar: AppBar(
backgroundColor: Colors.blue,
title: const Text(
"Container example",
style: TextStyle(color: Colors.white),
),
),
// Body of the scaffold with a container
body: Container(
// Height of the container
height: 200,
// Width of the container
width: double.infinity,
// Margin of the container
margin: const EdgeInsets.all(20),
// Padding of the container
padding: const EdgeInsets.all(30),
color: Colors.green,
child: const Text(
"Hello! I am inside a container!",
style: TextStyle(fontSize: 20,
color: Colors.white
),
),
),
),
);
}
}
Output:
6. alignment: The alignment is used to position the child within the container. We can align in different ways: bottom, bottom center, left, right, etc. here the child is aligned to the bottom center.
Example:
Dart
import 'package:flutter/material.dart';
// Entry point of the application
void main() => runApp(const MyApp());
// Main application widget
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
// Disable the debug banner
debugShowCheckedModeBanner: false,
home: Scaffold(
// App bar with a title
appBar: AppBar(
backgroundColor: Colors.blue,
title: const Text(
"Container example",
style: TextStyle(color: Colors.white),
),
),
// Body of the scaffold with a container
body: Container(
// Height of the container
height: 200,
// Width of the container
width: double.infinity,
// Alignment of the container
alignment: Alignment.bottomCenter,
// Margin of the container
margin: const EdgeInsets.all(20),
// Padding of the container
padding: const EdgeInsets.all(30),
color: Colors.green,
child: const Text(
"Hello! I am inside a container!",
style: TextStyle(fontSize: 20,
color: Colors.white
),
),
),
),
);
}
}
Output:
7. Decoration : The decoration property is used to decorate the box(e.g. give a border). This paints behind the child. Whereas foreground Decoration paints in front of a child. Let us give a border to the container. But, both color and border color cannot be given. if you use the color outside the decoration property.
Example:
Dart
import 'package:flutter/material.dart';
// Entry point of the application
void main() => runApp(const MyApp());
// Main application widget
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
// Disable the debug banner
debugShowCheckedModeBanner: false,
home: Scaffold(
// App bar with a title
appBar: AppBar(
backgroundColor: Colors.blue,
title: const Text(
"Container example",
style: TextStyle(color: Colors.white),
),
),
// Body of the scaffold with a container
body: Container(
// Height of the container
height: 200,
// Width of the container
width: double.infinity,
// Alignment of the container
alignment: Alignment.center,
// Margin of the container
margin: const EdgeInsets.all(20),
// Padding of the container
padding: const EdgeInsets.all(30),
// Removed the color property from here to avoid assertion error
// color: Colors.green,
decoration: BoxDecoration(
// Use color here when using the decoration property
color: Colors.green,
// Add rounded corners
borderRadius: BorderRadius.circular(15),
border: Border.all(color: Colors.black, width: 3),
),
child: const Text(
"Hello! I am inside a container!",
style: TextStyle(fontSize: 20,
color: Colors.white
),
),
),
),
);
}
}
Note: if you are using color and decoration property in a container, you must use color inside the decoration otherwise it cause Assertion Error.
Output:
8. Transform: This property of the container helps us to rotate the container. We can rotate the container in any axis, here we are rotating in the z-axis.
Example:
Dart
import 'package:flutter/material.dart';
// Entry point of the application
void main() => runApp(const MyApp());
// Main application widget
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
// Disable the debug banner
debugShowCheckedModeBanner: false,
home: Scaffold(
// App bar with a title
appBar: AppBar(
backgroundColor: Colors.blue,
title: const Text(
"Container example",
style: TextStyle(color: Colors.white),
),
),
// Body of the scaffold with a container
body: Container(
// Height of the container
height: 200,
// Width of the container
width: double.infinity,
// Alignment of the container
alignment: Alignment.center,
// Margin of the container
margin: const EdgeInsets.all(20),
// Padding of the container
padding: const EdgeInsets.all(30),
// Removed the color property from here to avoid assertion error
color: Colors.green,
// Rotation of the container
transform: Matrix4.rotationZ(0.1),
child: const Text(
"Hello! I am inside a container!",
style: TextStyle(fontSize: 20,
color: Colors.white
),
),
),
),
);
}
}
Output:
9. Constraints: When we want to give additional constraints to the child, we can use this property.
10. ClipBehaviour: This property takes in Clip Enum as the object. This decides whether the content inside the container will be clipped or not.
11. Foreground Decoration: This parameter holds Decoration class as the object. It controls the decoration in front of the Container widget.
Note: There can be many more operations that can be performed to container class. Moreover, the container class is used often while developing flutter applications. This is just basics to get started with. Find more properties and attributes in the given link which is the official flutter documentation.
Similar Reads
Basics
This Flutter Tutorial is specifically designed for beginners and experienced professionals. It covers both the basics and advanced concepts of the Flutter framework. Flutter is Google’s mobile SDK that builds native Android and iOS apps from a single codebase. It was developed in December 2017. When
7 min read
Flutter is Google’s Mobile SDK to build native iOS and Android, Desktop (Windows, Linux, macOS), and Web apps from a single codebase. When building applications with Flutter, everything is Widgets – the blocks with which the flutter apps are built. They are structural elements that ship with a bunch
5 min read
Flutter architecture application mainly consists of: WidgetsGesturesConcept of StateLayersWidgetsWidgets are the primary component of any flutter application. It acts as a UI for the user to interact with the application. Any flutter application is itself a widget that is made up of a combination of
3 min read
This article will show how to set up Android Studio to run Flutter Applications. Android Studio is one of the popular IDE( integrated development environment  ) developed by Google itself to create cross-platform Android applications. First, you have to install Android Studio version 3.0 or later, a
3 min read
Flutter is an open-source mobile application development SDK created by Google to develop cross-platform mobile applications. Flutter makes it extremely easy and fast for even novice programmers (computer programmers who are not experienced in any programming languages) to build high-quality and res
7 min read
In this article, let's look at how you can set up a development environment for Flutter if you're using Ubuntu 20.04. It was difficult earlier and was kind of a nightmare to get it done. But now, it has changed, and anyone can easily set up a flutter development environment on their Ubuntu system in
5 min read
UI Components
Tabs are the part of the UI that navigates the user through different routes(ie, pages) when clicked upon. The use of tabs in applications is standard practice. Flutter provides a simple way to create tab layouts using the material library. In this article, we will be exploring the same in detail. T
2 min read
In Flutter there can be Two types of lists, namely, horizontal list and vertical list. Both these lists are created using the ListView constructor and assigning the scrollDirection parameter. By default, the scroll direction parameter is vertical for a vertical list but it can be overridden by passi
3 min read
The Expansion Tile Card works similarly to that of the Flutter SDK's standard expansion tile. But it uses the style used by Google itself in its products to raise a tile. It can be called a better version of the Flutter's ExpansionTileCard. In this article, we will look into the process of implement
3 min read
Icon class in Flutter is used to show specific icons in our app. Instead of creating an image for our icon, we can simply use the Icon class for inserting an icon in our app. For using this class you must ensure that you have set uses-material-design: true in the pubsec.yaml file of your object. Syn
2 min read
When we create any child of a row or column we provide the size of the widget according to the screen size but sometimes when we provide more size of child as compared to screen size we get a warning and our widget goes out of the screen for resolving this we put a child of a row or column in an exp
3 min read
The dialog is a type of widget which comes on the window or the screen which contains any critical information or can ask for any decision. When a dialog box is popped up all the other functions get disabled until you close the dialog box or provide an answer. We use a dialog box for a different typ
5 min read
Progress Indicator in any application displays the time which is needed for some tasks to complete such as downloading, installation, uploading, file transfer, etc. This shows the progress of a task or the time to display the length of the processes. In Flutter, progress can be displayed in two ways
4 min read
Staggered Grid View is a type of layout that is used to display images and posts. As you see in various social platforms such as Pinterest, Instagram and many more. The main feature of Staggered Grid View is that it makes the layout beautiful and develop a great User Experience. Staggered Grid View
4 min read
Design & Animations
Customization is everywhere, from documents to apps, we can customize everything as we want to. The power of customization is humongous, and it has revolutionized the way we look at technology in this world. Just like how printing "Hello World", is the basic step towards learning a new programming l
4 min read
In Flutter, the skeleton_text library is used to easily implement skeleton text loading animation. Its main application in a flutter app is to assure its users that the servers are working but running slow, but the content will eventually load. It also enhances the User Interface if the user connect
3 min read
Themes are an integral part of UI for any application. Themes are used to design the fonts and colors of an application to make it more presentable. In Flutter, the Theme widget is used to add themes to an application. One can use it either for a particular part of the application like buttons and n
3 min read
The Lazy loader is a wrapper to the ScrollView that enables lazy loading. It is very useful in situations where the application's intent is to show endless content in a ListView. For instance, Instagram, Facebook, Youtube and most social networking platforms use them to deliver an endless stream of
5 min read
All applications should be able to adjust their User Interface (UI) based on the orientation of the phone. By orientation, we implicate the portrait and landscape mode in smartphones rather the physical orientation. In, Flutter it is done so by using the OrientationBuilder, which determines the app'
2 min read
Routes are simply Pages in Flutter applications. An application often needs to move from one page to another. However, animations can be used to make these transitions smoother. These animations can be used to curve or tween the Animation object of the PageRouteBuilder class to alter the transition
4 min read
Physics simulation in Flutter is a beautiful way to Animate components of the flutter app to make it look more realistic and interactive. These can be used to create a range of animations like falling objects due to gravity to making a container seem attached to a spring. In this article, we will ex
4 min read
A Radial transformation means turning a circular shape into a square shape. In Radial Hero animation the same is done with a Hero. In Flutter, a Hero Widget is used to create a hero animation. A hero in this context refers to a widget that moves in between screens. This is one of the most fundamenta
3 min read
Animations are a big part of the Flutter application. It makes an app sweet to the eyes and equally user-friendly. In this article, we will discuss in detail the Hinge animations. In Flutter there are two ways to work with animations namely: A pub packageAnimated Builder WidgetIn this article, we wi
4 min read
Visualization is an integral part of any application. Animations can highly glorify the UI of an app, but animations can be hectic to implement for an application. This is where the Lottie animation comes in. Lottie is a JSON-based animation file. It can be used both as a network asset and a static
4 min read
Navigation & Routing
While surfing the net, every user will come across many buttons, text, etc., that would redirect the user to a different webpage in the same tab or in a different tab when clicked. In the same way, when a developer links a URL to a button or text in an app, the app will open the website when clicked
6 min read
Route: Apps are the new trend. The number of apps available in the Play Store and App Store nowadays is quite a lot. The apps display their content in a full-screen container called pages or screens. In flutter, the pages or screens are called Routes. In android, these pages/screens are referred to
4 min read
WebSockets are used to connect with the server just like the http package. It supports two-way communication with a server without polling. In this article, we will explore the below-listed topics related to WebSockets in Flutter: Connecting to a WebSocket serverListen to messages from the server.Se
3 min read
An app has to display multiple screens depending upon the user's needs. A user needs to back and forth from the multiple screens to the home screen. In, Flutter this is done with the help of Navigator. Note: In Flutter, screens and pages are called routes. Steps to Implement Named Routes in FlutterS
3 min read
Navigating between the various routes (i.e, pages) of an application in Flutter is done with the use of Navigator. The Navigator uses a common identifier to transition between routes. One can pass arguments to these routes using the arguments parameter of Navigator.pushNamed() method. Arguments can
4 min read
Apps are widely used by humans in this techie world. The number of apps in the app store is increasing day by day. Due to this competition, app developers have started to add a number of features to their apps. To reduce this complexity, the content of the app is mostly divided into various pages so
5 min read
In today's world, most applications heavily rely on fetching and updating information from the servers through the internet. In Flutter, such services are provided by the http package. In this article, we will explore the same. To update the data on the Internet follow the below steps: Import the ht
5 min read
In today's world, most applications heavily rely on fetching information from the servers through the internet. In Flutter, such services are provided by the http package. In this article, we will explore this concept. Steps to Implement Data Fetching from the InternetStep 1 : Create a new flutter a
4 min read
In this article, we will explore the process of deleting data on the internet. Before deleting data on the internet, we will fetch the data first and then will delete the data. Steps to implement Deleting Data on the InternetStep 1 : Create a new flutter applicationCreate a new Flutter application u
4 min read
Interacting with the Internet is crucial for most apps to function. In Flutter, sending data to the internet is one of them, and the http package is used to send the data to the internet. In this article, we will explore the same topic in detail. Steps to Implement Sending Data to the InternetStep 1
5 min read
Interaction with the UI is an integral part of any application. But more often than not, the information needs to be sent from one screen to another. For instance, say you need to pass data regarding a selected or tapped component of the UI to another route(i.e., page). In this article, we will expl
4 min read
Hardware Interaction
We can add images from the gallery using the image_picker package in Flutter. For this, you'll need to use your real device. Steps to Implement Gallery and Camera AccessStep 1: Create a new flutter applicationCreate a new Flutter application using the command Prompt. To create a new app, write the b
4 min read
To add images from the camera in Flutter, we'll use the image_picker package. For this, you'll need to use your real device. Follow the below steps to display the images from the cameraStep 1: Create a new Flutter ApplicationCreate a new Flutter application using the command Prompt. To create a new
3 min read
Sometimes user wants some essential features like the latest news updates, latest articles updates, weather condition alert, complete his/her profile update, future events update and much more in his/ her Android or iOS device without opening App and if you would like to develop this kind of Android
6 min read
In this article, we'll learn how to restrict landscape mode in the flutter app. A production-ready app should be free from all sorts of bugs and errors. Mostly, we design our app for portrait orientation if we flip to landscape orientation, the UI might not be adjusted for that. So, there are two ca
2 min read
Sample Flutter Apps
Flutter SDK is an open-source software development kit for building beautiful UI that is natively compiled. Currently, it is available as a stable version for iOS and Android OS. In this app, we are going to have the features or modules mentioned below: Five multiple-choice questions ( more question
8 min read
In Flutter, everything is a Widget, and by using predefined widgets, one can create user-defined widgets just like using int, float, and double can create user-defined data types. In Flutter there are three types of widgets Stateless WidgetStateful WidgetInherited WidgetIn this article, we will use
3 min read
Flutter Community has created several packages to work with PDFs in our apps. In this article, we will be creating a simple PDF-generating app. This application will convert a plain text to PDF. The packages that we are going to need are listed below with their uses: pdf: It is a PDF creation librar
9 min read
We will be building a Magic 8-Ball app that will give you the answers to all fun, tricky questions (basically, it is a fun game app that will change its state of image using Textbutton in Stateful widgets). For this, we will use Stateless and Stateful Flutter widgets and a Textbutton. Steps to build
3 min read