Получение 'Горизонтальная область просмотра получила неограниченную высоту.' с TabBarView во флаттере

Question

Я пытаюсь создать страницу профиля, где информация о пользователях находится вверху. А затем откройте вкладку для разных представлений.

Это код, который я использую в данный момент, когда я вынимаю TabBarView, это не происходит из-за ошибки, и если я обертываю TabBarView в Expanded, появляется ошибка RenderFlex children have non-zero flex but incoming height constraints are unbounded. до.

     @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(''),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: EdgeInsets.all(10.0),
            child: Row(
              children: <Widget>[
                CircleAvatar(
                  minRadius: 45.0,
                  backgroundImage: NetworkImage(
                      'https://www.ienglishstatus.com/wp-content/uploads/2018/04/Anonymous-Whatsapp-profile-picture.jpg'),
                ),
                Padding(
                  padding: EdgeInsets.only(left: 10.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text(
                        'Testing Name',
                        style: TextStyle(
                          fontSize: 22.0,
                          color: Colors.grey.shade800,
                        ),
                      ),
                      Text(
                        '@testing_username',
                        style: TextStyle(
                          fontSize: 13.0,
                          color: Colors.grey.shade800,
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),

          DefaultTabController(
            length: 3,
            child: Column(
              children: <Widget>[
                TabBar(
                  tabs: <Widget>[
                    Tab(
                      icon: Padding(
                        padding: EdgeInsets.all(6.0),
                        child: Image.asset(
                          "assets/images/icons/butterlike.png",
                          color: Colors.grey.shade800,
                        ),
                      ),
                    ),
                    Tab(
                      icon: Padding(
                        padding: EdgeInsets.all(6.0),
                        child: Image.asset(
                          "assets/images/icons/butterlike.png",
                          color: Colors.grey.shade800,
                        ),
                      ),
                    ),
                    Tab(
                      icon: Padding(
                        padding: EdgeInsets.all(6.0),
                        child: Image.asset(
                          "assets/images/icons/butterlike.png",
                          color: Colors.grey.shade800,
                        ),
                      ),
                    ),
                  ],
                ),

                TabBarView(
                  children: <Widget>[
                    Container(
                      color: Colors.grey,
                    ),
                    Container(
                      color: Colors.green,
                    ),
                    Container(
                      color: Colors.purple,
                    ),
                  ],
                ),
              ],
            ),
          )
        ],
      ),
    );
  }

Я попробовал вариант этого , но не смог заставить его работать.

Answer 1

Я решил это, добавив TabBar внутри Container и TabBarView внутри Expanded:

DefaultTabController(
    length: 3,
    child: Column(
      children: <Widget>[
        Container(child: TabBar(..)),
        Expanded(child: TabBarView(..)),
      ],
    ),
  );

Answer 2

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

РЕДАКТИРОВАТЬ: ниже решения для вышеуказанного вопроса (с колонками). В общем случае используйте ListView с shrinkWrap: true. (Илилюбые другие виджеты с shrinkWrap)

Есть несколько вариантов:

Первое решение:

Обернуть родительский виджет (столбец) виджетом с ограниченной высотойкак SizedBox или AspectRatio.Затем используйте расширенный виджет следующим образом:

child: SizedBox(
          height: 300.0,
          child: Column(
            children: <Widget>[
       .
       .
       .
              Expanded(
                child: TabBarView(
                  children: <Widget>[
                    Container(
                      height: 200.0,
                      color: Colors.grey,
                    ),
                    Container(
                      height: 200.0,
                      color: Colors.green,
                    ),
                    Container(
                      height: 200.0,
                      color: Colors.purple,
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),

Второе решение:

Используйте ограниченный виджет, такой как SizedBox или AspectRatio, на самом TabBarView:

SizedBox(
            height: 300.0,
            child: TabBarView(
                children: <Widget>[
                  Container(
                    height: 200.0,
                    color: Colors.grey,
                  ),
                  Container(
                    height: 200.0,
                    color: Colors.green,
                  ),
                  Container(
                    height: 200.0,
                    color: Colors.purple,
                  ),
                ],
              ),
            ),

Примечание Вы также можете рассчитать высоту динамически, если высота не является статичной.