How to manage Row overflow in Flutter

We have already learned how to use Container, Column, Image and Icon Widgets. Just like Column, another multi-child layout Widget is there. The Row Widget also plays a crucial role in Flutter.

The Row Widget places its children Widgets in a row. That means horizontally.

However, we need to be careful. If we cannot manage, the Row Widget might give us an overflow error.

We will see in a moment. To get an idea, let us see the screenshot first.

As we see, we have placed two images in a Row. But it does not work. The first image takes the full size. But the half portion of the second image cannot fit itself.

As a result, the Flutter Framework gives us an overflow error signal.

Why does it happen?

Certainly, the main reason revolves around the screen size. A Mobile Screen might be small, medium or big. It comes in various size.

Therefore, we have to remember the various screen sizes.

What is Row in Flutter?

The Row Widget displays its children Widgets in an array. Horizontally.

Certainly, we must consider how many children will fit in the room.

The following code has given us the overflow error.

body: Center(
        child: Row(
          children: [
             Image.asset('images/lion-king.jpg'),
             Image.asset('images/lion-king.jpg'),
          ],
        ),
      ),
...

We can solve this problem in a minute.

If we wrap the Image with the “Expanded-Widget”, it solves the problem instantly.

As we see, two images in the Row Widget take the available space. Besides, the Expanded Widget tries to fit the children of the Row Widget in the available room.

And it solves our problem partially.

body: Center(
        child: Row(
          children: [
            Expanded(              
                child: Image.asset('images/lion-king.jpg'),              
            ), 
            Expanded(              
                child: Image.asset('images/lion-king.jpg'),              
            ),            
          ],
        ),
      ),
...

W have just said, that it solves the problem partially.

Why?

Because, we may want to add some space around the Image Widgets.

Right?

We may want to make one Image bigger and the other smaller.

Can we really make one Image bigger and the other smaller?

Yes, we can do. With the help of a property that Expanded Widget supplies.

What is Flex Flutter?

With the help of the “flex” property in the Expanded Widget we can control the size.

The “flex” property is of the “type” integer. It manages the aspect ratio.

Suppose, between these two images, we want to make one bigger.

To add that, we will just provide the value to the “flex” property.

body: Center(
        child: Row(
          children: [
            Expanded(
                flex: 2,              
                child: Image.asset('images/lion-king.jpg'),              
            ), 
            Expanded(     
                flex: 1,             
                child: Image.asset('images/lion-king.jpg'),              
            ),            
          ],
        ),
      ),
...

As a result, the “flex” property automatically makes the first image twice the size of the first Image.

The following image shows the result.

You can just play around to see how you can adjust these sizes.

However, we can fit more images easily and give them space around. Subsequently, we will use another useful Widget – the Padding Widget.

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Expanded Example'),
      ),
      body: Center(
        child: Row(
          children: [
            Expanded(
              child: Padding(
                padding: const EdgeInsets.all(18.0),
                child: Image.asset('images/lion-king.jpg'),
              ),
            ),
            Expanded(
              child: Padding(
                padding: const EdgeInsets.all(18.0),
                child: Image.asset('images/lion-king.jpg'),
              ),
            ),
            Expanded(
              child: Padding(
                padding: const EdgeInsets.all(18.0),
                child: Image.asset('images/lion-king.jpg'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

As a result, we get the three images in an array.

The images no longer overlap each other.

At the same time, we also see how the Widget tree works here.

Scaffold->body->Center->child->Row->children->Expanded->child->Padding->child->Image.asset ....

There are a couple of things that we have learned already. Besides, we have found a few new concepts.

We find that the multi-child Widgets like Column, or Row use the “children” property. The “children” property expects a List.

As a List of Widgets, we can supply various Widgets. That works fine. But we can also create a custom List of Widgets. After that, we can change them according to their indices.

In the List section of Dart, we have learned a List starts with index 0. Then it goes in sequential order.

Right?

How we can apply that knowledge?

Our next lesson will teach that super important concept in Flutter.

For these part, we have a GitHub repository. Please check for the full code snippet.

What Next?

In a series of articles we will learn a few important concepts in Flutter.

Firstly, we will learn what is State in Flutter.

Secondly, we will learn why we need a Stateful Widget. Is there any alternative to Stateful Widget?

Thirdly, we Will see how the State is associated with User Events.

And, finally, we will build a Quiz App where the State will be changed with the click of Buttons.

In addition, we will also discuss List and Map in detail. Because without understanding this Data Structure part we cannot build our Quiz App.

Books at Leanpub

Books in Apress

My books at Amazon

Courses at Educative

GitHub repository

Technical blog

Twitter