Search code examples
flutterwidgetalignment

Flutter Wrap widget align: left inside ExpansionPanel


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


Solution

  • 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.