Flutter expand Container to fill remaining space of Row

问题

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

回答1:

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,
                ),
              ),
            )
          ],
        ),
      );
    }

来源：https://stackoverflow.com/questions/54839870/flutter-expand-container-to-fill-remaining-space-of-row

标签

Flutter

flutter-layout