CODEWITHSUNDEEP
flutter
redbnlrg
redbnlrg

Reputation: 277

Expand a Row inside a Column Flutter

I have a ListView which takes a half of a screen. The design of my listview is a row with two expanded (flex 1 color grey [for design] and flex 10 color bluegrey [for the content of my list]).

I would like to expand the design of my listview to the rest of the screen. I think that I can do it by wrapping my listview in a column, and put an expanded with a row and my two expanded but it didn't work ... Everything is wrapped inside a SingleChildScrollView.

The exception caught is : RenderFlex children have non-zero flex but incoming height constraints are unbounded.

Here is the code :

SingleChildScrollView(
    child: Column(
      children: <Widget>[
        Container(
          color: Colors.grey,
          child: ListView.builder(
            shrinkWrap: true,
            physics: NeverScrollableScrollPhysics(),
            itemBuilder: (context, index) {
              return DossierTile(
                dossier: dossier[index],
              );
            },
            itemCount: length,
          ),
        ),
        //Expanded( // I try to add this expanded but it didn't work.
          child: Row(
            children: <Widget>[
              Expanded(
                flex: 1,
                child: Container(
                  color: Colors.grey,
                ),
              ),
              Expanded(
                flex: 10,
                child: Container(
                  color: Colors.blueGrey,
                ),
              ),
            ],
          ),
        //)
      ],
    ),
  );

Here is a picture of what I'm looking for :

enter image description here

Upvotes: 0

Views: 2008

Answers (1)

mahesh
mahesh

Reputation: 4763

If your ListView is only in the right part of the screen then you need a scroll view only in that part.

ListView is a scrollable list of widgets arranged linearly.ListView doesn't need SingleChildScrollView.

The exception caught is: RenderFlex children have non-zero flex but incoming height constraints are unbounded.

The reason for this problem is you have SingleChildScrollView as a parent of Column and it makes vertical constraint infinite and you can not use Expanded with infinite height.

So after refactoring your code you can do like this.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Row(
          children: <Widget>[
            Expanded(
              flex: 1,
              child: Container(
                color: Colors.grey,
              ),
            ),
            Expanded(
              flex: 10,
              child: Container(
                color: Colors.blueGrey,
                child: ListView.builder(
                  itemBuilder: (context, index) {
                    return ListTile(
                      leading: Icon(Icons.location_on),
                    );
                  },
                  itemCount: 5,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

Upvotes: 2

Related Questions