Open In App

Flutter – Working with Layouts

Improve
Improve
Like Article
Like
Save
Share
Report

Before talking about Layout in Flutter, there is just one thing to keep in mind that “Everything in Flutter is Widget”. Meaning the core of the layout in any Flutter Application is the widget. Putting it simply, all the images, icons, labels and text, etc are technically widgets of different types and layouts. In this article, we will explore the concept of layouts in flutter in detail.

For a better understanding of the concept let’s take a single example and break down those components for better understanding.

Fig 1

In the above image, you just saw a layout that is nothing but just a composition of few basic widgets.

Fig 2

Now look at the above image here we just outline the layouts, look closely you can see inside a raw widget there are 3 column widgets and each column contains an icon and a label. Take a look at the below widget tree diagram.

Fig 3

Now look closely fig 2 and fig 03, Parent widget is a row widget, inside that 3rd column widget and in each column, there is an icon and inside the container, there is a text widget. 

Now let’s talk about some common layout widgets. The common layout widget can be divided into two categories:

  1. Standard Widgets
  2. Material Widgets

Standard Widgets :

Some basic and useful widgets are used in almost all the app in flutter. Standard widgets in flutter are Container, GridView, ListView, Stack.

Container:

The container is the most used widget in flutter. We can add padding, margin, border, and background color-like properties in this widget and we can customize it according to our requirement. It contains only a single widget or child.

Example:

Dart




Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SafeArea(
             // Container implementation
              child: Container(
               height: 100.0,
               width: 100.0,
              color: Colors.green,
        ),
      )
     
    );


Output:

Here we will define the function that returns a container widget

Dart




// function returning container widget
Widget _buildImageColumn() => Container(
        decoration: BoxDecoration(
          color: Colors.black12,
        ),
        child: Column(
          children: [
            Container(
              height: 100.0,
              width: 50.0,
              color: Colors.red,
            ),
            Container(
              height: 100.0,
              width: 50.0,
              color: Colors.yellow,
            ),
          ],
        ),
      );
 
 
@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.green,
          title: Text(widget.title),
        ),
       
      // replace this section in your app
        body: Center(
          child:_buildImageColumn()
        ));
  }


Output:

This is a bit of complex example, just look at the buildImage() there we create a container with background image black which is a parent widget, then we create a column widget which is the child of container, inside the column, we create two containers with different colors, hope you get that.

Grid View:

Grid view widget is a two-dimensional scrollable list, by default it provides two pre-fabricated lists, but you can customize it and build your custom grid.

  • You can change grid.count property and specify the number of columns.
  • gridView.extend allows the maximum pixel width of a tile.

Example:

Dart




// Method returning Grid Widget
Widget _buildGrid() => GridView.extent(
      maxCrossAxisExtent: 150,
      padding: const EdgeInsets.all(4),
      mainAxisSpacing: 4,
      crossAxisSpacing: 4,
      children: _buildGridTileList(10));
 
  List<Container> _buildGridTileList(int count) => List.generate(
      count,
      (i) => Container(
            width: 100,
            height: 100,
            color: Colors.blue,
          ));
 
 
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.green,
          title: Text(widget.title),
        ),
       
      // Replace this section in your app
        body: Center(child: _buildGrid()));
  }


Output:

Note: Just try to change the max maxCrossAxisExtent value you can figure out what is the use of maxCrossAxisExtent.

List View:

List view is like a column widget, but it has a plus that is it can be scrollable. Listview can be horizontal or vertical. If the contents in the list view are not fitting then it adds scrollable functionality.

Example:

Dart




// function returning List view widget
Widget _buildList() => ListView(
   
        // name is a listTile widget which is defined below
      children: [
        name('james', 'thomas'),
        name('Ajay', 'kumar'),
        name('Arun', 'das'),
        name('Roxie', 'St'),
        name('Stanlee', 'jr'),
        name('AMC', 'hales'),
        Divider(),
        name('Monty',"Chopra"),
        name('Emmy', 'Ave'),
        name(
            'Chaitanya', ' kumar'),
        name('Rio', 'St'),
      ],
    );
 
 
 
// name is a function returning ListTile widget
ListTile name(String firstName, String lastName) => ListTile(
      title: Text(firstName,
          style: TextStyle(
            fontWeight: FontWeight.w500,
            fontSize: 20,
          )),
      subtitle: Text(lastName),
      leading: Icon(
        Icons.arrow_back_ios,
        color: Colors.blue[500],
      ),
    );
 
 
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.green,
          title: Text(widget.title),
        ),
       
      // replace this section in your app
        body: Center(child: _buildList()));
  }


Output:

Stack:

Everybody knows the meaning of stack, i.e on top of another. Exactly this widget serve in that way we can put the widget on top of another.

Note: This is not similar to column widget, in column widget the children are in a column fashion
      that is one after another not overlapping to each other, but in the stack widget case we can
      see the widgets can be overlapped to each other.
  • The first widget in the list of children is the base widget; subsequent children are overlaid on top of that base widget.
  • The stack can not be scrollable.

Example:

Dart




// this function returns a stack widget
Widget _buildStack() => Stack(
        alignment: const Alignment(0.6, 0.6),
        children: [
          Container(
            width: 150,
            height: 150,
            decoration: BoxDecoration(
              color: Colors.black45,
              shape: BoxShape.circle
            ),
            child: Center(
              child: Text(
                'Mia B',
                style: TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                  color: Colors.black,
                ),
              ),
            ),
          ),
        ],
      );
 
@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.green,
          title: Text(widget.title),
        ),
       
      // replace this section in your app
        body: Center(child: _buildStack()));
  }


Output:

Card :

A card is from the Material library, It can contain a single child, all the modern app use card in their app. In Flutter, a Card features slightly rounded corners and a drop shadow, giving it a 3D effect. By changing the card elevation property you can control the 3D effect like a drop shadow.

Example:

Dart




// Function returns the SizeBox Widget inside that Card widget is present
 
Widget _buildCard() => SizedBox(
    height: 210,
    child: Card(
      elevation: 20,
      child: Column(
        children: [
          ListTile(
            title: Text('Geeks For Geeks',
                style: TextStyle(fontWeight: FontWeight.w500)),
            subtitle: Text('log writing'),
            leading: Icon(
              Icons.restaurant_menu,
              color: Colors.blue[500],
            ),
          ),
          Divider(),
          ListTile(
            title: Text('Noida, India',
                style: TextStyle(fontWeight: FontWeight.w500)),
            leading: Icon(
              Icons.contact_phone,
              color: Colors.blue[500],
            ),
          ),
          ListTile(
            title: Text('gfg@contribute.com'),
            leading: Icon(
              Icons.contact_mail,
              color: Colors.blue[500],
            ),
          ),
        ],
      ),
    ),
  );
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.green,
          title: Text(widget.title),
        ),
       
      // Replace this section in your app
        body: Center(child: _buildCard()));
  }


Output:

Here in this example, we give the elevation 20, you can change that and see the result.

ListTile:

ListTile is also from the material library. For an easy way to create a row containing up to 3 lines of text and optional leading and trailing icons. ListTile is most commonly used in Card or ListView but can be used elsewhere.

Example: 

Dart




@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.green,
          title: Text(widget.title),
        ),
        body: Container(
          child: ListTile(
            title: Text('Geeks For Geeks',
                style: TextStyle(fontWeight: FontWeight.w500)),
            subtitle: Text('log writing'),
            leading: Icon(
              Icons.restaurant_menu,
              color: Colors.blue[500],
            ),
          ),
        ));
  }


Output:



Last Updated : 16 Sep, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads