Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Efficient way to make container take remaining width in a Row widget in Flutter

I am new to Flutter and was practicing its UI where I came across a situation where I had a list where each list element have an image on the left and some text on right.

Below is my approach to that

child: ListView(
            padding: const EdgeInsets.symmetric(horizontal: 20),
            children: [
            const SizedBox(height: 5),
            Row(
              children: [
                 Container(
                        height: 80,
                        width: 80,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(10),
                          image: const DecorationImage(
                            image: NetworkImage('http://images.unsplash.com/photo-1555010133-d883506aedee?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max'),
                            fit: BoxFit.cover
                          )
                        ),
                      ),
                      const SizedBox(width: 10),
                      Container(
                        color: Colors.green,
                        height: 80,
                        width: 280,
                      )
                    ],
                  ),
                ],
              ),

Here I am specifying width individually for both containers which is not an efficient way to do this since phone sizes may vary.
Below is the result for above block of code

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

Screenshot of the app screen

I tried specifying crossAxisAlignment: CrossAxisAlignment.stretch to the Row() but it throws an error as below

The following assertion was thrown during performLayout():
BoxConstraints forces an infinite height.

How can I achieve this? Please assist

Thank you

>Solution :

Wrap the widget with an Expanded inside the row:

Row(
  children: [
    ...otherChildren,
    Expanded(
      child: Container(
        color: Colors.green,
        height: 80,
      ),
    ),
  ],
),

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading