FlutterFlakes — Layout Widgets in Flutter [Part 1]

Flutter is the new SDK from Google which help you to develop beautiful UI for Android & iOS with the same code base. If you are new to flutter and want to know how to install and start with it just visit https://flutter.io/get-started/install/

In this article, I am going to discuss about the basic layout widgets which are available to organise your screen.

Container Widget

Row & Column Widget

Stack Widget

1. Container Widget

As name defines, the container widget contains another widget. The Container widget have one clild and that child can be any widget.

The Container widget also provides basic positioning, painting and styling properties.

The Container widget without child

If the Container widget does not contain any child widget, it will be as big as the given area automatically.

The Container widget with Child

class ContainerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
      color: Colors.blue,
    );
  }
}

And if it contains any child widget then it will wrap the child widget.

class ContainerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
      color: Colors.blue,
      child: Text("Hello World"),
    );
  }
}

The Container widget provides Padding, Alignment, Decoration, Foreground Decoration to support positioning and styling. Below is the Container widget constructor & Code snippet. You can visit the documentation for more details.

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 })

class ContainerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
        padding: EdgeInsets.all(16.0),
        alignment: Alignment.centerLeft,
        child: Text("Hello World"),
        decoration: new BoxDecoration(
          color: Colors.blue,
          border: new Border.all(
            color: Colors.black,
            width: 8.0,
          ),
        ));
  }
}

FlutterFlakes/ContainerWidgetDemo

2. Row & Column Widget

The Row widget and the Column widgets both can have more than one child. Both the widgets have children property which accept widget array.

The main difference between the Row widget and Column widget is the way they place the widget inside it. The Row widget place the children widget in horizontal linear fashion where the Column widget places the widget in vertically linear fashion.

Left Image: Row widget Demo — Right Image: Column widget Demo

Code snippet of Row widget Demo:

class RowDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Text("1. Text", style: TextStyle(fontSize: 20.0),),
        Text("2. Text", style: TextStyle(fontSize: 20.0),),
        Text("3. Text", style: TextStyle(fontSize: 20.0),),
      ],
    );
  }
}

Code snippet of Column widget Demo

class ColumnDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return  Column(
      children: <Widget>[
        Text("1. Text", style: TextStyle(fontSize: 20.0),),
        Text("2. Text", style: TextStyle(fontSize: 20.0),),
        Text("3. Text", style: TextStyle(fontSize: 20.0),),
      ],
    );
  }
}

Both the Row widget and Column widget does not support scroll in any direction. If the children require more space that available it will show an overflowing error. To resolve this error consider to wrap the Row or the Column widget into ListView widget.

Both the widgets have some common properties to align their children.

1. mainAxisAlignment: In the Row widget, main axis is the horizontal axis. In the column widget, main axis the vertical axis. The alignment of the children is based on the Flex alignment. You can align children from the start, end, center, with equal space in between each child(spaceBetween), equal space around the each child(spaceAround) and equal space with one another(spaceEvenly).
2. crossAxisAlignment: In the Row widget, cross axis is the vertical axis. In the column widget, cross axis the horizontal axis. You can align children from the start, end, center, baseline & stretch.

Left Image: Row widget Demo — Right Image: Column widget Demo

Code snippet of Row widget Demo:

class RowDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.end,
      children: <Widget>[
        Text("1. Text", style: TextStyle(fontSize: 20.0),),
        Text("2. Text", style: TextStyle(fontSize: 60.0),),
        Text("3. Text", style: TextStyle(fontSize: 20.0),),
      ],
    );
  }
}

FlutterFlakes/RowWidgetDemo

Code snippet of Column widget Demo:

class ColumnDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return  Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.end,
      children: <Widget>[
        Text("1. Text", style: TextStyle(fontSize: 20.0),),
        Text("2. Text", style: TextStyle(fontSize: 60.0),),
        Text("3. Text", style: TextStyle(fontSize: 20.0),),
      ],
    );
  }
}

FlutterFlakes/ColumnWidgetDemo

So now you can play with the different properties and values to make your layout proper. Click here for the Row widget & for the Column widget documentation.

3. Stack Widget

Till now, we have seen the widget which provides the child widget to position in a specific manner. The Stack widget provides the functionality to put the widget on one another. i.e. You can stack a widget on another widget.

The Stack widget allows to overlap the children widgets in an easy way. The overlapping of widget work in first come first render order.

Stack widget Demo

class StackDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Stack(
      children: <Widget>[
        Text("First Base Text", style: TextStyle(fontSize: 50.0)),
        Text("New stacked Text", style: TextStyle(color: Colors.red, fontSize: 20.0),)
      ],
    );
  }
}

The main property which you have to take care while using the Stack widget is the alignment. Alignment property helps to align the children accordingly.

Stack widget with alignment

class StackDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Stack(
      alignment: Alignment.bottomRight,
      children: <Widget>[
        Text("First Base Text", style: TextStyle(fontSize: 50.0)),
        Text("New stacked Text", style: TextStyle(color: Colors.red, fontSize: 20.0),)
      ],
    );
  }
}

FlutterFlakes/StackWidgetDemo

In the above example, the alignment of the stack is provided as bottomRight which is shown in the image.
To know more check the documentation.

That’s it for now. I hope you all learned the basics of how you can layout your screen by using this widgets.

If you like this article please appreciate with the applause, If you have any question or query write in the comment or tweet us. Thank you :)

Dhrumil Shah #Shipmnts (@dhuma1981) | Twitter

FlutterFlakes (@Flutter_Flakes) | Twitter

Flutter Flakes