Cihat Akkiraz
Cihat Akkiraz

Reputation: 113

How to align child widgets of wrap widget to left?

When I use a wrap for listing some widgets I have some problems. Wrap automatically align-center its child widgets. How can I align-left if there is one widget on the row?

Wrappping Output - 1

enter image description here

Wrapping Output - 2

enter image description here

Wrap(
              crossAxisAlignment: WrapCrossAlignment.start,
              alignment: WrapAlignment.start,
              children: customAnnouncementLabels
                  .map(
                    (customAnnouncementLabel) => LabelChip(
                      text: customAnnouncementLabel.name,
                      color: customAnnouncementLabel.bgColor,
                      isDetailed: false,
                    ),
                  )
                  .toList(),
            ),

Upvotes: 3

Views: 2289

Answers (3)

Elmar
Elmar

Reputation: 4455

You can achieve the similar output with Column. Just use mainAxisAlignment: MainAxisAlignment.start for left align, mainAxisAlignment: MainAxisAlignment.end for the right side.

Upvotes: -1

Ali Ajmi
Ali Ajmi

Reputation: 81

Try wrapping your Wrap Widget with a SizedBox Widget with maximum width

SizedBox( 
     width: double.infinity, 
     child: Wrap( 
              children: []     // Your Children           
))

Upvotes: 8

Rohit Soni
Rohit Soni

Reputation: 1447

Try it :

runAlignment: WrapAlignment.start

Upvotes: 1

Related Questions