JonasLevin
JonasLevin

Reputation: 2099

Flutter Wrap layout doesn't expand to full available width

I'm creating a dyamic list which creates the layout seen in the image below. But on smaller screens I get pixel overflows in the row of the "issued" text and the delete icon. To counter this problem I wrapped them in a Wrap widget so that the icon can flow to a new line. But for some reason does the Wrap widget not expand to the full available, horizontal width.
I would like to position the "issued" text and delete icon with a Spacer() inbetween or just an alignment of spacebetween but I can't position a Spacer() in a Wrap widget and the spaceBetween alignment has no effect because there is no available space betwee the text and Icon.

SliverList(
  delegate: SliverChildListDelegate(
    [
      for (var i = 0; i < children.length; i++)
        Row(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [
            Padding(
              padding: const EdgeInsets.only(bottom: 10.0, left: 20.0),
              child: Text(
                children[i].issuanceDate,
              ),
            ),
            Column(
              //vertical line with round dot
            ),
            Expanded(
              child: Padding(
                padding: const EdgeInsets.symmetric(vertical: 10.0),
                child: Container(
                  padding: const EdgeInsets.symmetric(
                      vertical: 10.0, horizontal: 20.0),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(6),
                    color: Colors.white,
                    boxShadow: [
                      BoxShadow(
                        color: (Colors.grey[200])!,
                        offset: const Offset(0, 8),
                        blurRadius: 8,
                        spreadRadius: 1.0,
                      )
                    ],
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Row(
                        children: [
                          Text(
                            children[i].credentialSubject.documentName,
                            style:
                                Theme.of(context).textTheme.bodyText1,
                          ),
                        ],
                      ),
                      Wrap(
                        alignment: WrapAlignment.spaceBetween,
                        crossAxisAlignment: WrapCrossAlignment.center,
                        children: [ Text("${L.of(context).issued}${children[i].issuanceDate}",
                            style: Theme.of(context)
                                .textTheme
                                .bodyText2!
                                .copyWith(
                                    color: Theme.of(context)
                                        .colorScheme
                                        .onBackground
                                        .withOpacity(0.5)),
                            overflow: TextOverflow.ellipsis,
                            softWrap: true,
                          ),
                          IconButton(
                            icon: Icon(
                              Icons.delete,
                              color: Theme.of(context).errorColor,
                            ),
                            onPressed: () => print("delete $i"),
                          ),
                        ],
                      )
                    ],
                  ),
                ),
              ),
            ),
          ],
        )
    ],
  ),
),

enter image description here

Upvotes: 12

Views: 7923

Answers (1)

Alex Radzishevsky
Alex Radzishevsky

Reputation: 3768

Just replace column cross axis alignment to stretch:

...
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch, // !!!!!!! here
                    children: [
                      Row(
                        children: [
                          Text(
                            children[i].credentialSubject.documentName,
                            style:
                                Theme.of(context).textTheme.bodyText1,
                          ),
 ...

Upvotes: 15

Related Questions