Flutter - Как достичь строки с той же высотой, что и родительский контейнер

Question

Мне нужно создать виджет со следующим дизайном

У меня есть базовый макет c, созданный для того же ниже. Приведенный ниже код находится внутри столбца.

                      Row(
                          mainAxisSize: MainAxisSize.max,
                          children: <Widget>[

                            /*******Outer Container********/
                            Container(
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.all(Radius.circular(8)),
                                border: Border.all(color: Colors.grey, width: 0.5),
                              ),
                              child: Row(
                                children: <Widget>[
                                  Container(
                                    padding: EdgeInsets.all(8),
                                    child: Row(
                                      children: <Widget>[
                                        Text("1981-June-01"),
                                        SizedBox(width: 8),
                                        Icon(Icons.calendar_today),
                                      ],
                                    ),
                                  ),
                                  SizedBox(width: 8),

                                  /*******Inner Container********/
                                  Container(
                                    padding: EdgeInsets.all(8),
                                    child: Text("38Yrs"),
                                    decoration: BoxDecoration(
                                      color: Colors.grey,
                                      borderRadius: BorderRadius.all(Radius.circular(8)),
                                      border: Border.all(color: Colors.grey, width: 0.5),
                                    ),
                                  ),
                                ],
                              ),
                            )
                          ],
                        ),

В результате я получаю следующее

Есть еще некоторые нежелательные заполнение между родительским контейнером и границами строки, которая содержит два контейнера. Я пытался использовать IntrinsicHeight Widget, но интерфейс остался прежним. Я обернул внешний контейнер и строку внутри него с помощью виджета IntrinsicHeight. По одному и обоим одновременно. Но без изменений.

Я хочу удалить лишнюю прокладку между внешним контейнером и внутренним контейнером и сделать внутреннюю границу / высоту контейнера такой же, как у внешнего контейнера. Я что-то пропустил? Любая помощь приветствуется.

Answer 1

Как указано @pskink в комментариях к вопросу, более упрощенным ответом будет замена строки следующим кодом (скопировано из комментария под вопросом @pskink)

Material(
                              elevation: 0,
                              shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(5),
                                  side: BorderSide(color: Color(0xFFDDDDDD), width: 1)),
                              clipBehavior: Clip.antiAlias,
                              child: Row(
                                mainAxisSize: MainAxisSize.min,
                                children: <Widget>[
                                  SizedBox(width: 8),
                                  Text("1981-June-01", style: dateTextStyle),
                                  SizedBox(width: 8),
                                  Image.asset(
                                    "assets/images/widgetImages/calendar.png",
                                    width: 15,
                                    height: 15,
                                  ),
                                  SizedBox(width: 8),
                                  Container(
                                    padding: EdgeInsets.symmetric(horizontal: 8, vertical: 12),
                                    child: Text(
                                      "38Yrs",
                                      style: dateTextStyle,
                                    ),
                                    color: Color(0xFFEEEEEE),
                                  ),
                                ],
                              ),
                            ),

Этот код проще с точки зрения количества виджетов в дереве виджетов.

Answer 2

Это выходное изображение:

Row(
    children: <Widget>[
      /*******Outer Container********/
      Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(8)),
          border: Border.all(color: Colors.grey, width: 0.5),
        ),
        child: Row(
          children: <Widget>[
            Container(
              //padding: EdgeInsets.all(8),
              child: Row(
                children: <Widget>[
                  Text("  1981-June-01"),
                  SizedBox(width: 8),
                  Icon(Icons.calendar_today, size: 15),
                ],
              ),
            ),
            SizedBox(width: 8),
             /*******Inner Container********/
            Container(
              padding: EdgeInsets.all(8),
              child: Text("38Yrs"),
              decoration: BoxDecoration(
                color: Colors.grey,
                borderRadius: BorderRadius.only(
                    topRight: Radius.circular(8),
                    bottomRight: Radius.circular(8)),
                // border: Border.fromBorderSide(BorderSide.none),
              ),
            ),
          ],
        ),
      )
    ],
  ),