What is Flutter Container

The Flutter Container is one of the most common layout Widgets. Almost in every Flutter App, we will find the presence of the Container Widget, or Class.

We have already learned how Flutter Structure works. Besides, we have also created our first Flutter App. During the learning we have noticed that the Flutter-Framework basically builds the beautiful User Interface. It paints on the screen using various Widgets.

For that reason, when we generate a Stateless Widget in Visual Studio Code IDE, or the Android Studio IDE, it automatically returns the Container Widget.

As the name suggests, the Container Widget contains one child Widget. In addition, that child Widget may contain several other children Widgets and the Widget tree grows.

Like other Widgets, the Container also has many properties that expect other Widgets. Moreover, those properties pass through as the named parameters.

However, as a beginner, we need to understand a few basic properties of the Container Widget firstly.

Secondly, we will build a Flutter App from scratch where we will test those Container properties.

How do you create a container in Flutter?

Let us build the Flutter App – “How to be peaceful?”.

Let us issue the necessary command on our terminal.

flutter create how_to_be_peaceful

As a result, the Flutter-Framework comes up with a Stateful Counter App.

We will later learn the State in Flutter. At present we will limit ourselves to a simple Flutter App.

Here is the basic structure at the very beginning.

import 'package:flutter/material.dart';

main() {
  runApp(const App());
}

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  static const title = 'How to be Peaceful?';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: title,
      home: AppHomePage(
        title: title,
      ),
    );
  }
}

class AppHomePage extends StatelessWidget {
  const AppHomePage({
    Key? key,
    required this.title,
  }) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.amber[200],
      appBar: AppBar(
        backgroundColor: Colors.amber[900],
        title: Text(title),
      ),
      body: Container(
         color: Colors.blue,      
      ),
    );
  }
}

The Widget tree starts with the MaterialApp(). Then it flows down below and builds the Widget tree.

Let us take a look at how it looks like.

We have defined three background colors in the above code. However, the Scaffold background color has been overlapped by the color of the Container.

Let us take a close look at the code snippet.

return Scaffold(
      backgroundColor: Colors.amber[200],
      appBar: AppBar(
        backgroundColor: Colors.amber[900],
        title: Text(title),
      ),
      body: Container(
         color: Colors.blue,      
      ),
    );

If we did not provide the value to the color property of the Container, the whole body would take the light amber color.

But the Container takes the whole place.

Why?

This is the most important key features of the Container.

When the Container has no child, or children it tries to be as big as possible. Consequently, it takes up the whole screen and paints it Blue.

Let us give the Container a child Widget and see what happens.

The code changes to the following.

body: Container(      
        color: Colors.blue,
        child: const Text(
          'I am Container',          
        ),
      ),

As a result, the Container Widget takes up the size of the child Widget which is a Text Widget.

It tells us about the most important characteristic of the Container Widget.

When the Container Widget has no Child Widget, or a bunch of other Widgets as its children, it takes the size of the Parent Widget.

Once it gets the Child Widget, the size of the Container Widget changes.

Why?

Because the Container leaves the size of the Parent Widget, and takes up the size of the Child Widget.

However, we can design the Container a little bit. The Container Widget has the margin and the padding properties.

The margin property maintains the distance with the outside. And the padding property does the opposite.

Every Container has an outline. According to the size of the Child Widget the outline of the Container changes its shape. It might be square, or rectangle.

Let us change the above code more and provide values to the margin and padding.

Besides, we have added some styling to the Text Widget as well.

body: Container(
        margin: const EdgeInsets.all(20.0),
        padding: const EdgeInsets.all(10.0),
        color: Colors.blue,
        child: const Text(
          'I am Container',
          style: TextStyle(
            color: Colors.white,
            fontSize: 50.0,
          ),
        ),
      ),

By taking a close look at the above code we understand one key concept of Flutter.

Each property of the Widget expects either another Widget, a custom Type; or, it expects a built-in data type, such as String, or double.

If we provide the correct value, it works fine.

Therefore, we have learned how to create a Container in Flutter. We have also learned some key concepts.

In the next section we will learn another important layout Widget Column. At the same time we will build the Flutter App – How to be Peaceful – with the help of the Image Widget.

So stay tuned.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

GitHub repository

Technical blog

Twitter