TabView 展开到页面底部

Question

当我运行以下代码时，我收到错误：A RenderFlex overflowed by 99523 pixels on the bottom.。我尝试了各种错误修复，例如将扩展的小部件作为 TabView 的子级和其他组合，但似乎没有一个有效。我正在努力实现下图。我见过各种解决方案，其中 TabView 小部件包装在展开的小部件中，但没有任何效果。

下面是我当前的代码。

class Discover extends StatefulWidget {
  @override
  _DiscoverState createState() => _DiscoverState();
}

class _DiscoverState extends State<Discover> {

  final _auth = FirebaseAuth.instance;
  String request;
  FirebaseUser loggedInUser;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    getCurrentUser();
  }

  void getCurrentUser () async {
    try{
      final user = await _auth.currentUser();
      if (user != null){
        loggedInUser = user;
        print(loggedInUser.email);
      }
    } catch (e){
      print(e);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: kSnow,//Color(0xffDCE3E5),
      appBar: AppBar(
        backgroundColor: kSnow,
        leading: IconButton(
          icon: Icon(Icons.menu),
          iconSize: 30.0,
          color: kOnyx,
          onPressed: () {},
        ),
        elevation: 0.0,
        actions: <Widget>[
          FlatButton.icon(
            icon: Icon(
              Icons.person,
              color: kOnyx,
              size: 30.0,
            ),
            label: Text('Log Out'),
            onPressed: () {
              _auth.signOut();
              Navigator.push(context, MaterialPageRoute(builder: (context) => Authentication()));
            },
          ),
        ],
      ),
      body: Column(
        children: <Widget>[
          Container(
            color: kSnow,
            padding: EdgeInsets.only(left: 15.0, top: 15.0, bottom: 30.0),
            child: FractionallySizedBox(
              widthFactor: 1.0,
              child: Text(
                'DISCOVER',
                style: TextStyle(
                    color: kOnyx,
                    fontSize: 30.0,
                    //fontWeight: FontWeight.w600,
                    fontFamily: 'Baukasten'),
              ),
            ),
          ),
          DefaultTabController(
            length: 4,
            child: Column(
              children: <Widget>[
                TabBar(
                  isScrollable: true,
                  labelColor: kOnyx,
                  unselectedLabelColor: kFossil,
                  indicatorSize: TabBarIndicatorSize.label,
                  indicator: BoxDecoration(
                      color: kSnow),
                  tabs: [Tab(text: 'HOME'), Tab(text: 'CREATE'), Tab(text: 'PROFILE'), Tab(text: 'SETTINGS')],
                  indicatorColor: kOnyx,
                  labelStyle: TextStyle(
                    //ntSize: 10.0,
                    fontFamily: 'Baukasten'
                  ),
                ),
                TabBarView(
                  children: <Widget>[
                    Text('hello'),
                    Text('hello'),
                    Text('hello'),
                    Text('hello')
                  ],
                )
              ],
            ),
          ),
          //Container(height: 45, color: kOnyx,),
        ],
      ),
    );
  }
}

当前输出：

Answer 1

导致overflow 的小部件是嵌套的Column，它被赋予了无限的高度，我以你的小部件树为例添加了一个演示代码。 检查以下：

class Discover extends StatefulWidget {
  @override
  _DiscoverState createState() => _DiscoverState();
}

class _DiscoverState extends State<Discover> with SingleTickerProviderStateMixin {

  final _auth = FirebaseAuth.instance;
  String request;
  FirebaseUser loggedInUser;
    // create a tab controller 
  TabController _tabController;

  @override
  void initState() {
    // create a tab controller 
    _tabController = TabController(length: 4, vsync: this);
    // TODO: implement initState
    super.initState();
    getCurrentUser();
  }

  void getCurrentUser () async {
    try{
      final user = await _auth.currentUser();
      if (user != null){
        loggedInUser = user;
        print(loggedInUser.email);
      }
    } catch (e){
      print(e);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: kSnow,//Color(0xffDCE3E5),
      appBar: AppBar(
        backgroundColor: kSnow,
        leading: IconButton(
          icon: Icon(Icons.menu),
          iconSize: 30.0,
          color: kOnyx,
          onPressed: () {},
        ),
        elevation: 0.0,
        actions: <Widget>[
          FlatButton.icon(
            icon: Icon(
              Icons.person,
              color: kOnyx,
              size: 30.0,
            ),
            label: Text('Log Out'),
            onPressed: () {
              _auth.signOut();
              Navigator.push(context, MaterialPageRoute(builder: (context) => Authentication()));
            },
          ),
        ],
      ),
      body: Column(
        children: <Widget>[
          Container(
            color: kSnow,
            padding: EdgeInsets.only(left: 15.0, top: 15.0, bottom: 30.0),
            child: FractionallySizedBox(
              widthFactor: 1.0,
              child: Text(
                'DISCOVER',
                style: TextStyle(
                    color: kOnyx,
                    fontSize: 30.0,
                    //fontWeight: FontWeight.w600,
                    fontFamily: 'Baukasten'),
              ),
            ),
          ),
           DefaultTabController(
            length: 4,
                      child: TabBar(
              controller: _tabController,
              isScrollable: true,
              labelColor: kOnyx,
              unselectedLabelColor: kFossil,
              indicatorSize: TabBarIndicatorSize.label,
              indicator: BoxDecoration(color: kSnow),
              tabs: [
                Tab(text: 'HOME'),
                Tab(text: 'CREATE'),
                Tab(text: 'PROFILE'),
                Tab(text: 'SETTINGS')
              ],
              indicatorColor: kOnyx,
              labelStyle: TextStyle(
                  //ntSize: 10.0,
                  fontFamily: 'Baukasten'),
            ),
          ),
          Expanded(
            child: TabBarView(
              controller: _tabController,
              children: <Widget>[
                Text('hello'),
                Text('hello'),
                Text('hello'),
                Text('hello')
              ],
            ),
          ),
          //Container(height: 45, color: kOnyx,),
        ],
      ),
    );
  }
}

输出：

请注意，我使用了不同的颜色，因为我无法获得您的确切颜色：