Flutter Wrap widget align: left inside ExpansionPanel

user_2514402 0
Viewed 12469

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

flutter alignment widget
3 Answers

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.

user_25144020
user_124827560

I had the same problem and resolve with SizedBox:

ExpansionPanelRadio backpackingPanel = ExpansionPanelRadio(
  value: "Backpacking",
  headerBuilder: (BuildContext context, bool isExpanded) {},
  body: SizedBox(
    width: double.infinity, // Use when direction: Axis.horizontal
    height: double.infinity, // Use when direction: Axis.vertical
    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,
        ),
      ],
    ),
  ),
);

Remember to not use width and height SizedBox property at same time, only one for each Wrap.direction.

Reference

user_87002720
Related