Блог

Я создаю динамический список, который создает макет, показанный на изображении ниже. Но на экранах меньшего размера я получаю переполнение пикселей в строке «выданного» текста и значка удаления. Чтобы решить эту проблему, я завернул их в Wrap виджет, чтобы значок мог перейти на новую строку. Но по какой-то причине виджет переноса не расширяется до полной доступной горизонтальной ширины.
Я хотел бы разместить «выданный» текст и удалить значок с Spacer() промежуточным или просто выравниванием spacebetween , но я не могу расположить a Spacer() в Wrap виджете, и spaceBetween выравнивание не влияет, потому что между текстом и значком нет свободного места.

 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"),
                          ),
                        ],
                      )
                    ],
                  ),
                ),
              ),
            ),
          ],
        )
    ],
  ),
),
 

Просто замените выравнивание поперечной оси столбца, чтобы растянуть:

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