Блог

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

Желаемый Результат

Что у меня есть

Мой код

 class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: AppBar(
        backgroundColor: Colors.black,
      ),
      body: SafeArea(
        child: Column(
          children: [
            Flexible(
              flex: 9,
              child: Column(
                children: [
                  Padding(
                    padding: const EdgeInsets.only(bottom: 8.0),
                    child: Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(15),
                        color: Colors.grey,
                      ),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(bottom: 8.0),
                    child: Container(),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(bottom: 8.0),
                    child: Container(),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(bottom: 8.0),
                    child: Container(),
                  ),
                ],
              ),
            ),
            Flexible(
              flex: 1,
              child: Container(
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(15),
                    color: Colors.white),
              ),
            )
          ],
        ),
      ),
    );
  }
}

 

Завершите свою работу, вы получите то, о чем просили

Обеспечить ребенка на контейнере

  Padding(
                    padding: const EdgeInsets.only(bottom: 8.0),
                    child: Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(15),
                        color: Colors.grey,
                      ),
                      child: SizedBox(
                        height: 50,
                        width: double.infinity,
                      ),
                    ),
                  ),