Как растянуть блок на всю высоту?

Question

Перепробовал все известные мне варианты, ничего не получается. Жаль нельзя выражать высоту и длину в процентах, как в css(. Поэтому возникло три вопроса. 1. Как можно растянуть зеленую полоску (как на картинке) во всю высоту родительского блока? Высота родительского блока может меняться в зависимости от контента, то есть она не фиксирована. 2. Как сделать так, чтобы этот блок (зеленая линия) не накладывался поверх родительского блока, чтобы углы так же обрезались? 3. Как реализовать пятерку над надписью "Астрономия"? Код того, что я пытаюсь реализовать:

Container(
    margin: EdgeInsets.only(bottom: 10),
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(13), 
      color: Colors.white),
    child: Row(children: [
      Expanded(flex: 11, child: 
        Container(
          padding: EdgeInsets.symmetric(horizontal: 15, vertical: 20),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(widget.subject.title, style: TextStyle(
                fontWeight: FontWeight.w800,
                fontSize: 21
              )), // название предмета
              content() // Тут находится текст домашнего задания
            ]
          )
        )
      ),
      Container(
        width: 7, 
        height: 10, // Как задать высоту этого блока, как у родителя, чтобы он перекрывал его, а так же обрезался по углам
        color: Colors.green,
      ),
    ])
  )

Answer 1

С пятеркой ещё нужно поиграться:

Container(
  //margin: EdgeInsets.only(bottom: 10),
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(13), color: Colors.white),
  child: Row(
    children: [
      Expanded(
        flex: 11,
        child: Container(
          padding: EdgeInsets.symmetric(horizontal: 15, vertical: 20),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Column(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: <Widget>[
                  Text(
                    "5",
                    style: TextStyle(
                      fontWeight: FontWeight.w500, fontSize: 20),
                    ),
                    Text(
                      "Название",
                      style: TextStyle(
                        fontWeight: FontWeight.w800, fontSize: 21),
                      ),
                    ],
                  ), // название предмета
                  Text(
                    "Тут находится текст домашнего задания Тут находится текст домашнего задания Тут находится текст домашнего задания Тут находится текст домашнего задания",
                    style: TextStyle(
                      fontWeight: FontWeight.w600, fontSize: 16),
                    ), // Тут находится текст домашнего задания
                  ],
                ),
              ),
            ),
            Container(
              width: 7,
              height: MediaQuery.of(context)
                .size
                .height, // Как задать высоту этого блока, как у родителя, чтобы он перекрывал его, а так же обрезался по углам
              color: Colors.green,
            ),
          ],
        ),
      ),

Answer 2

Для зеленой полоски можно использовать градиент с совмещенными контрольными точками (в приведенном примере это позиция 94%) и задать его фоном контейнера с текстом. В том-же декораторе задаем радиус закруглений.

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        padding: EdgeInsets.fromLTRB(16, 16, 32, 16),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(16),
            gradient: LinearGradient(
              colors: [
                Colors.grey[200],
                Colors.grey[200],
                Colors.green,
                Colors.green
              ],
              stops: [0.0, 0.94, 0.94, 1.0],
            )),
        child: Text("Hello, World!",
            style: Theme.of(context).textTheme.headline4));
  }
}

Пятерку в суперскрипте можно реализовать юникодом "Астрономия\u2075" или через RichText.

Answer 3

В общем, всё оказалось на порядок проще. Вовсе не надо растягивать на всю высоту. Достаточно взять контейнер, перекрасить его в нужный цвет, добавить внутренний отступ справа, в качестве ребёнка взять еще контейнер. В итоге получилось то, что хотел. Пятерку реализовал с помощью RichText + unicode

Container(
      padding: EdgeInsets.all(10),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(13), 
          bottomLeft: Radius.circular(13)), 
        color: Colors.white),
      child: 
        Container(
          padding: EdgeInsets.symmetric(horizontal: 15, vertical: 20),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              RichText(
                text: TextSpan(
                  text: "${widget.subject.title}", // название предмета
                  style: TextStyle(
                    color: Colors.black,
                    fontWeight: FontWeight.w600, 
                    fontSize: 21
                  ),
                  children: <TextSpan>[
                    TextSpan(
                      text: '${widget.homework.grade == null ? "" : " "+numbers[widget.homework.grade]}',// оценка (пятерка)
                      style: TextStyle(
                        fontSize: 30,
                        color: Colors.grey)
                    ),
                  ],
                )
              ),// название предмета
              content(),// Тут находится текст домашнего задания
            ],
          ),
        ),
    ),
  ),

БЛОГ НА HUSL

Как растянуть блок на всю высоту?

Ответы (3 шт):