Flutter Container Card SizedBox Expanded Box Constraints

Layout widgets are very important in designing flutter app layouts. We have already familiar with two important layout widgets Rows and Columns on previous lesson. Here let’s learn some other important layout widgets such as Container, Card, SizedBox and Expanded.

All these widgets are Box Constraints; are the 2D boxes with many constraints like height, width, opacity, padding, margin, etc.

Container

We are already familiar with Container. One of the main layout widget; which represents a specific area with height and width. Normally Container widgets can be act as the parent widgets for other layout widgets.

Layout widgets like Rows, Columns, Card, Expanded, etc do not support height and width, so we include these layout widgets inside a Container widget to get these types of layout constraints.

Example:

In previous lesson, we coded the body of the Scaffold inside a Container widget.

Let’s write again another Container as a child of the Column.

Container(
  color: Colors.pink,
  height:50,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children:
      <Widget>[
      Text("Container content"),
    ],
  ),
)

Card

Card is similar to Container but it’s corner is rounded and Card does not support properties like height and width. So if you want these constraints, then you need to add other supporting widget like Container as a child of the Card.

Example:

Card(
  color: Colors.lightGreen,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Container(
        height: 50,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text("Card content"),
          ],
        ),
      ),
    ],
  ),
)

Note: Here the child of the Card is a Row, if it is a Column, then the round corner appearance will not work.

SizedBox

As the name indicates, the sizedBox has a fixed size of height and width. The alignment of content inside a sizedBox never change even on a large sized device screen. If the content is more than the width limit, then the content will jump into next line until its height.

Example:

SizedBox(
  height: 40,
  width: 100,
  child:  Text("Sized box content"),
),

Expanded

The widget Expanded is just the reverse of the SizedBox, that is, the content on this widget is expandable according to the content and screen size.

Expanded(
  child: Text("The content on Expanded widget is expandable"),
)

Example Application (iOS and Android)

Let’s create a flutter application contains all these widgets

import 'package:flutter/material.dart';
void main()
{
  runApp(
    MaterialApp(
      home: MyApp(),
    )
  );
}
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: new Text("My App Title"),
      ),
      backgroundColor: Colors.blueGrey,
      body: Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Container(
              color: Colors.pink,
              height: 50,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text("Container content"),
                ],
              ),
            ),
            Card(
              color: Colors.lightGreen,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Container(
                    height: 50,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Text("Card content"),
                      ],
                    ),
                  ),
                ],
              ),
            ),
            Container(
              height: 50,
              color: Colors.limeAccent,
              child:  Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                  SizedBox(
                    height: 40,
                    width: 100,
                    child:  Text("Sized box content"),
                  ),
                  Expanded(
                    child: Text("The content on Expanded widget is expandable "),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  } 
}

Note:

• To understand the basics, read the previous articles.
• Card widget contains a Container widget to maintain the height.
• Both SizedBox and Expanded are inside a Container widget.
• Added background colors to separate widgets

Output:

Portrait Mode:

Landscape (widescreen by rotating screen):

Look the changes on the contents on SizedBox and Expanded on both screens. Content on Sizedbox has a fixed width and content on Expanded is flexible according to the screen size.

Video Tutorial