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:

Answer 1

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

1. Layout objects(eg. Text, Image) only with Row and Column. And Set mainAxisAlignment and crossAxisAlignment property in Row and Column.
2. Set styles with Padding or Align, Expanded etc. You can also use Container.
3. 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,
                ),
              ),
            )
          ],
        ),
      );
    }

Answer 2

Use Expanded instead of the Container around the Text.