CODEWITHSUNDEEP
flutterflutter-layout
kikap
kikap

Reputation: 862

How to make Wrap to not minimise height (reduce number of rows) as much as possible

I'm trying to build a "semi-responsive" widget. It has a fixed number of relatively large children that always fit on the screen horizontally (A, B and C) and a variable list of small children that not always fit horizontally together with A, B, and C. My idea is to have the widget look like the first picture when the screen is wide, and as a second when the screen is more narrow, and as a third when there's no space for smaller widgets at all. What I'm getting is the third only. As if Wrap always tries to put as many children horizontally as possible. I want it to minimize width instead. My pseudocode:

Card(
  child: Wrap(
    children: [
      Row(children: [A(), B(), C()]),
      Wrap(children: [1(), 2(), 3(), 4(), 5()]),
    ]
  ),
);

Any idea how to "squeeze" Wrap vertically? Using standard layout widgets if possible.

enter image description here

Upvotes: 1

Views: 291

Answers (1)

Loïc Fonkam
Loïc Fonkam

Reputation: 2340

You can archive that using the alignment property in the Wrap widget.

Card( 
   child: Wrap( 
      alignment: WrapAlignment.end, 
      children: [ 
            Row(children: [A(), B(), C()]),
            1(), 2(), 3(), 4(), 5(), 
       ],),
 );

check it out in dartpad gist

Upvotes: 1

Related Questions