Flutter: TabBarView внутри SingleChildScrollView

Question

Моя проблема в том, что мне нужен TabBarView внутри SingleChildScrollView, но он дает мне эту ошибку: RenderFlex дети имеют ненулевой изгиб, но входящие ограничения по высоте не ограничены.

Если я удалю SingleChildScrollView он работает, но мне нужен виджет, потому что тогда я хочу sh ListView, который он прокручивает с помощью TabBar, например Instagram.

Код:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  TabController tabController;

  @override
  void initState() {
    super.initState();
    tabController = new TabController(length: 2, vsync: this);
  }

  @override
  void dispose() {
    tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: SingleChildScrollView(
      child: Column(
        children: [
          TabBar(
            controller: tabController,
            tabs: [
              Tab(
                icon: Icon(
                  Icons.photo_library,
                  size: 30,
                ),
              ),
              Tab(
                icon: Icon(
                  Icons.perm_media,
                  size: 30,
                ),
              ),
            ],
            labelColor: Colors.deepOrange,
            unselectedLabelColor: Colors.black,
            indicatorColor: Colors.deepOrange,
          ),
          Expanded(
            child: TabBarView(controller: tabController, children: [
              Expanded(child: Container()),
              Expanded(child: Container())
            ]),
          ),
        ],
      ),
    )));
  }
}

Изменения:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  TabController tabController;

  @override
  void initState() {
    super.initState();
    tabController = new TabController(length: 2, vsync: this);
  }

  @override
  void dispose() {
    tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          TabBar(
            controller: tabController,
            tabs: [
              Tab(
                icon: Icon(
                  Icons.photo_library,
                  size: 30,
                ),
              ),
              Tab(
                icon: Icon(
                  Icons.perm_media,
                  size: 30,
                ),
              ),
            ],
            labelColor: Colors.deepOrange,
            unselectedLabelColor: Colors.black,
            indicatorColor: Colors.deepOrange,
          ),
          Expanded(
            child: SingleChildScrollView(child:TabBarView(controller: tabController, children: [
              Container(),
              Container()
            ]),
          ),)
        ],
      ),
    ));
  }
}

Answer 1

TabBarView требует конечной высоты, которую SingleChildScrollView не может предложить. Проблема в том, что вы используете развернутый столбец внутри SingleChildScrollView.

Этот ответ на аналогичный вопрос может вам помочь

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

Это вызывает эту ошибку, потому что эти две директивы полностью противоположны друг другу. Как упоминалось в журналах ошибок, попробуйте следующее: Рассмотрите возможность установки mainAxisSize на MainAxisSize.min (для столбца) и использования FlexFit.loose для гибких (используйте гибкий, а не расширенный).