Определенное положение значка в контейнере с BoxDecoration и дочерним элементом: Row

Question

Я пытаюсь переместить красный блок вправо от Container. Я пробовал много вариантов, но куда бы я ни перемещал код, этот бит "красного контейнера", я не могу поместить его в положение вверху справа. Я сделаю его кликабельным значком, когда получу правильное расположение.

Я переместил его в дочерний виджет с другим текстом, настроил "crossAxisAlignment на растяжение в этой строке, а mainAxisAlignment на spaceBetween",

Самое близкое, что у меня есть, - это 2-е изображение, которое представляет собой код, добавленный ниже.

Что мне не хватает?

items.add(
        Container(
          decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.all(Radius.circular(10.0)),
              boxShadow: [BoxShadow(color: Colors.black12,spreadRadius: 2.0,blurRadius: 5.0),]),
          margin: EdgeInsets.all(5.0),
          child: Row(
            mainAxisSize: MainAxisSize.max,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              ClipRRect(
                borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(10.0),
                    bottomLeft: Radius.circular(10.0)),
                child: Image.asset(object["personImage"],
                  width: 80,height: 80,fit: BoxFit.cover,
                ),
              ),
              Container(
                color: Colors.blue[900],
                child: Padding(
                  padding: const EdgeInsets.fromLTRB(8, 8, 0, 0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text(object["personName"]),
                      Text(object["personPlace"]),
                      Text(object["personDate"]),
                      Text(object["personCircle"]),
                    ],
                  ),
                ),
              ),
              Container(
                alignment: Alignment.topRight,
                height: 42.0,
                width: 42.0,
                color: Colors.red,
              )
            ],
          ),
        ),
      );
    },
  );

  return items;

---

Изменить: Итак, два решения отлично сработали. Добавление виджета между синим и красным контейнерами. Спасибо вам обоим:)

TT Sage " Spacer(),

Вирен В Варасадия " Expanded(child: Container()),

Answer 1

Вы можете использовать виджет под названием Spacer() за это.

В Spacerвиджет занимает место, которое не используется остальной частью вашего виджета. Проверьте код ниже, он работает нормально:

items.add(
        Container(
          decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.all(Radius.circular(10.0)),
              boxShadow: [BoxShadow(color: Colors.black12,spreadRadius: 2.0,blurRadius: 5.0),]),
          margin: EdgeInsets.all(5.0),
          child: Row(
            mainAxisSize: MainAxisSize.max,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              ClipRRect(
                borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(10.0),
                    bottomLeft: Radius.circular(10.0)),
                child: Image.asset(object["personImage"],
                  width: 80,height: 80,fit: BoxFit.cover,
                ),
              ),
              Container(
                color: Colors.blue[900],
                child: Padding(
                  padding: const EdgeInsets.fromLTRB(8, 8, 0, 0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text(object["personName"]),
                      Text(object["personPlace"]),
                      Text(object["personDate"]),
                      Text(object["personCircle"]),
                    ],
                  ),
                ),
              ),
              // add your spacer widget here
              Spacer(),
              Container(
                alignment: Alignment.topRight,
                height: 42.0,
                width: 42.0,
                color: Colors.red,
              )
            ],
          ),
        ),
      );
    },
  );

  return items;

Надеюсь, это ответит на ваш вопрос.

Answer 2

Для этого вам необходимо использовать расширенный виджет.

В следующем коде я показываю, как добавить расширенный виджет и куда добавить.

Container(
            color: Colors.blue[900],
            child: Padding(
              padding: const EdgeInsets.fromLTRB(8, 8, 0, 0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(object["personName"]),
                  Text(object["personPlace"]),
                  Text(object["personDate"]),
                  Text(object["personCircle"]),
                ],
              ),
            ),
          ),
          Expanded(child: Container()),  // added widget
          Container(
            alignment: Alignment.topRight,
            height: 42.0,
            width: 42.0,
            color: Colors.red,
          )