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

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

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

CodePudding user response：

Wrap the widget with an Expanded inside the row:

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

CodePudding user response：

Use ListView.builder with ListTile widgets. It has a leading widget (normally an icon or an avatar) to the left, text in the middle and trailing widget (normally an icon), each of which is optional.

ListView.builder(
  itemCount: ...,
  itemBuilder: (BuildContext context, int index) {
    return ListTile(
      leading: const CircleAvatar(
        radius: 20.0,
        foregroundImage: NetworkImage(...),
      ),
      title: Text(...),
      subtitle: Text(...),
      trailing: ...,
      onTap: () => ...,
    );
  },
)