Блог

У меня есть простой макет, который состоит из столбца, контейнера и коробки определенного размера. Вот код:

 class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: (){
          showModalBottomSheet(
            context: context,
            builder: (context) => AddTaskScreen(),
          );
        },
        child: Icon(
          Icons.add,
          color: Colors.white,
        ),
      ),
      body: SafeArea(
        child: SizedBox(
          width: double.infinity,
          child: Container(
            color: Colors.lightBlueAccent,
            padding: EdgeInsets.only(left: 20, top: 20, right: 20),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  //padding: EdgeInsets.all(20),
                  color: Colors.lightBlueAccent,
                  child: CircleAvatar(
                    child: Icon(
                      Icons.list,
                      color: Colors.white,
                    ),
                    radius: 30,
                  ),
                ),
                Flexible(
                  child: SizedBox(
                    height: 20,
                  ),
                ),
                Text(
                  "Todoey List",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 50
                  ),
                ),
                Flexible(
                  child: SizedBox(
                    height: 10,
                  ),
                ),
                Text(
                  "1 items",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 15
                  ),
                ),
                Flexible(
                  child: SizedBox(
                    height: 30,
                  ),
                ),
                Expanded(
                  child: Container(
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.only(topLeft: Radius.circular(15), topRight: Radius.circular(15))
                    ),
                    //child: TaskScreen(),
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }

}
 

Всякий раз, когда я добавляю Flexible виджет Sized box , я получаю вот так:

Но всякий раз, когда я удаляю гибкий виджет, я получаю такое(ожидаемое поведение):

Почему Flexible виджет сжимается, даже если места достаточно?

Почему белый контейнер становится маленьким всякий раз, когда я добавляю Flexible виджет?

Вы знаете, что делает расширенный виджет? Если да, то знаете ли вы, что делает гибкий виджет?

Расширенный говорит своему ребенку занимать столько места, сколько доступно, Гибкий говорит своему ребенку занимать столько места, сколько доступно (или меньше), то есть в этом контексте Гибкий и Расширенный делают то же самое.

Единственное различие между гибким и расширенным заключается в том, что у гибкого есть некоторые дополнительные опции, которые вы не используете.

Тем не менее, с этой информацией ваш макет не должен выглядеть так, как он выглядит, это действительно довольно странная ошибка, однако я знаю, почему вы получаете эту ошибку:

Flexible как я создана, рассказывает ее ребенку использовать столько места, сколько доступно, SizedBox с другой стороны, сам сказал чтобы использовать точное количество пространства, поэтому гибкий пытается расширить sizedbox быть около 1/4 пространства (потому что есть три гибкие виджеты и один расширенный, то есть, каждый должен принимать по 1/4 оставшегося пространства), но это не потому, что sizedbox отказывается иметь различный размер, чем тот, который вы ему предоставили.

Однако единственным виджетом, который может сам определять размер, является Расширенный виджет, поэтому он использует четвертую часть доступного пространства, поэтому расширенный виджет становится маленьким, он ожидает использовать все доступное пространство, но этого не происходит из-за коробок размера.

Решение? Ну, ты же сам это сказал! Просто удалите гибкий виджет из полей размеров, и макет будет действовать так, как должен. Другим решением было бы не указывать высоту на полях, чтобы позволить гибкому виджету самостоятельно определять их размер, но это, скорее всего, не то, что вы хотите, потому что это заставит ваш интервал занимать столько же места, сколько и ваш белый контейнер.