Reputation: 2099
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"),
),
],
)
],
),
),
),
),
],
)
],
),
),
Upvotes: 12
Views: 7923
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