Flutter Wrap widget align: left inside ExpansionPanel

7,172

Solution 1

I solved this by nesting the Wrap widget inside an Align widget:

 Align(
            alignment: Alignment.topLeft, 
child: Wrap(....

I do not like my solution, I'm wary of so much nestings effect on performance and sprawling code harms legibility, so if you have a better solution I'm all eyes. x Sam.

Solution 2

Wrap has an alignment property that you can use to align the children.

Wrap(
  ...
  alignment: WrapAlignment.center,
  children: [],
),
Share:
7,172
Sam
Author by

Sam

Updated on December 22, 2022

Comments

  • Sam
    Sam over 1 year

    This is strange, the Wrap widget, containing FilterChips, is centering inside it's parent a ExpansionPanel. I've tried wrapping the Wrap Widget in a Flexible widget, no reaction, I've tried wrapping in an Expanded widget, no reaction.

    There doesn't appear to be a property on the Expansion panel to left align body: Widgets. It's important because some of the ExpansionPanels are aligning to the left, when the Wrap widget has been forced to full width, but others, like pictured, center. Ultimately I'm going to wrap all the children widgets in the ExpansionPanel in a Padding widget, but I need the child Wrap widgets aligning left first.

    bool travelSack;
    ExpansionPanelRadio backpackingPanel = ExpansionPanelRadio(
                value: "Backpacking",
                headerBuilder: (BuildContext context, bool isExpanded) {
                  return ListTile(
                    leading: FaIcon(
                      FontAwesomeIcons.globeEurope,
                      size: 19,
                    ),
                    title: Text("Backpacking"),
                  );
                },
                body: Expanded(child:
                Wrap(spacing: 4, children: [
                  FilterChip(
                    showCheckmark: false,
                    label: Text('Travel rucksack'),
                    labelStyle: TextStyle(
                      color: travelSack ? Colors.black : Colors.white,
                    ),
                    selected: travelSack,
                    onSelected: (bool selected) {
                      setState(() {
                        travelSack = !travelSack;
                      });
                    },
                    selectedColor: Colors.green.shade500,
                    backgroundColor: Colors.grey.shade500,
                  ),
            ])
        );
    

    I'm Scoobied, help appreciated.

    enter image description here