Как расширить всю ширину ребенка во флаттере?

Question

У меня есть следующая разметка:

Красный блок - ListView с горизонтальной ориентацией.Фиолетовый блок - это просто Контейнер для всего контента.Белый также является контейнером, но с отступами.

Я хочу увеличить ширину красного блока на всю ширину.Как мне это сделать?Это должно выглядеть так:

Код разметки:

class FifaApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Directionality(
      textDirection: TextDirection.ltr,
      child: Container(
        padding: EdgeInsets.symmetric(
          vertical: 60.0,
          horizontal: 30.0,
        ),
        color: Color(0xFFffffff),
        alignment: Alignment.topLeft,
        child: Container(
          color: Colors.purple,
          margin: EdgeInsets.symmetric(vertical: 10.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text("Math Reports"),
              Container(
                color: Colors.red,
                padding: EdgeInsets.symmetric(vertical: 10.0),
                height: 170.0,
                child: ListView(
                  scrollDirection: Axis.horizontal,
                  // children: renderItems(), // the example of code without green blocks
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

Вы можете использовать стек, как показано ниже

class FifaApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Directionality(
      textDirection: TextDirection.ltr,
      child: Container(
        padding: EdgeInsets.symmetric(
          vertical: 60.0,
        ),
        color: Color(0xFFffffff),
        alignment: Alignment.topLeft,
        child: Stack(
          children: <Widget>[
            Container(
              color: Colors.purple,
              margin: EdgeInsets.symmetric(horizontal: 30),
            ),
            Padding(
              padding: const EdgeInsets.only(left: 30.0),
              child: Text(
                "Math Reports",
                style: TextStyle(color: Colors.white),
              ),
            ),
            Container(
              height: 170,
              color: Colors.red,
              margin: EdgeInsets.only(top: 30),
              child: ListView(
                scrollDirection: Axis.horizontal,
              ),
            )
          ],
        ),
      ),
    );
  }
}