gap icon indicating copy to clipboard operation
gap copied to clipboard

How to combine Gap with Expanded/Flexible widgets

Open migalv opened this issue 3 years ago • 0 comments

Hello. I'm very familiar with the Expanded/Flexible widgets that help me a lot to position my widgets how I want in the Columns & Rows. But when I use them with Gap it doesn't seem to work as I would expect it.

Sample code

Column(
  children: [
    MaxGap(32),
    Text("Some title"),
    MaxGap(16),
    Text("Some subtitle"),
    Expanded(
      child: PageView(
        children: [
          CarouselSlide(),
          CarouselSlide(),
          CarouselSlide(),
        ],
      )
    ),
    MaxGap(24),
    TextButton(child: Text("A button")),
  ],
);

Expected outcome:

  1. The gaps between widgets don't exceed the value given to the MaxGap widget. While getting smaller if there is not enough space.
  2. The PageView (carousel in this example) expands and takes as much space as possible.

What I get:

For each MaxGap widget that I add the Expanded widget reduces its size to half.

How can I can use the Gap widget while still being able to utilize widgets like Expanded, Flexible or Spacer?

migalv avatar Nov 09 '22 20:11 migalv