Flutter expand Container to fill remaining space of Row

Question

I have one image in a row and a text next to that image. I want the row to expand fully and image takes as its size, then remain full area should be taken by Container.

Here is my code snippet:

Row(
        children: <Widget>[
          Container(
            margin: EdgeInsets.fromLTRB(10, 50, 10, 8),
            decoration: BoxDecoration(
              color: Colors.white,
              boxShadow: [
                BoxShadow(
                  color: Color.fromARGB(100, 0, 0, 0),
                  blurRadius: 5,
                ),
              ],
            ),
            child: Row(
              mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                Column(children: <Widget>[
                  Image.asset(
                    'assets/card.png',
                    height: 62,
                    width: 62,
                    fit: BoxFit.cover,
                  )
                ]),
                Container(
                  child: Text("Hello world"),
                )
              ],
            ),
          ),
        ],
      ),

I want it like this: Flutter UI

You might want to use `ListTile` instead. https://docs.flutter.io/flutter/material/ListTile-class.html — Chenna Reddy, Feb 23 '19 at 09:20

score 20 · Accepted Answer · answered Feb 23 '19 at 12:23

I recommend you to start building layouts only with Row and Column not to get confusing. I often build layouts as follows.

Layout objects(eg. Text, Image) only with Row and Column. And Set mainAxisAlignment and crossAxisAlignment property in Row and Column.
Set styles with Padding or Align, Expanded etc. You can also use Container.
Decorate in addition.

Reference:

Layout basic:

https://flutter.dev/docs/development/ui/layout

Tips when building layouts:

https://medium.com/@liewjuntung/tips-on-using-android-studio-to-develop-flutter-apps-9e42c047b7f4

I hope you this will help you.

example code:


    Widget buildCard() {
      return Container(
        margin: EdgeInsets.all(10.0),
        decoration: BoxDecoration(
          color: Colors.white,
          boxShadow: [
            BoxShadow(
              color: Color.fromARGB(100, 0, 0, 0),
              blurRadius: 5,
            ),
          ],
        ),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Image.asset(
              'assets/card.png',
              height: 62,
              width: 62,
              fit: BoxFit.cover,
            ),
            Padding(
              padding: const EdgeInsets.only(top: 12.0, left: 12.0),
              child: Text(
                "Hello world",
                style: TextStyle(
                  fontWeight: FontWeight.w500,
                  letterSpacing: 0.8,
                ),
              ),
            )
          ],
        ),
      );
    }

score 4 · Answer 2 · answered Sep 12 '21 at 14:15

4

Use Expanded instead of the Container around the Text.

answered Sep 12 '21 at 14:15

Martin Růžek

517
3
8

score 0 · Answer 3 · answered May 17 '23 at 11:52

0

Give the container alignment: Alignment.center

answered May 17 '23 at 11:52

Максим Бочаров

31
4

Flutter expand Container to fill remaining space of Row

3 Answers3

Linked