如何从默认选项卡栏删除底部

Midhilaj

我需要添加一个不带应用程序栏的选项卡栏，并且我从StackOverflow获得了一个解决方案以使用灵活的空间，并且该选项卡正常工作，但是它在选项卡栏底部增加了多余的空间。
如何删除或隐藏它？

我的完整代码

import 'package:flutter/material.dart';

class TemplesListingWithTabMode extends StatefulWidget {
  TemplesListingWithTabMode({Key key}) : super(key: key);

  @override
  _TemplesListingWithTabModeState createState() =>
      _TemplesListingWithTabModeState();
}

class _TemplesListingWithTabModeState extends State<TemplesListingWithTabMode> {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[

        Container(
          height: MediaQuery.of(context).size.height-kToolbarHeight-kMaterialListPadding.top-kTabLabelPadding.top,
          child: DefaultTabController(
            length: 2,
            child: Scaffold(
              appBar: AppBar(
                backgroundColor: Colors.white,
                flexibleSpace: TabBar(
                    indicatorColor: Colors.pink,
                    tabs: [
                  Tab(
                    child: Text("ALL",style: TextStyle(color: Colors.pink),),
                  ),Tab(
                    child: Text("Favorites",style: TextStyle(color: Colors.pink),),
                  )
                ]),
              ),
              body  : Container(
                color: Colors.grey,
                child: TabBarView(

                    children: [
                      ListView.builder(
                          itemCount: 100,
                          itemBuilder: (context,index){
                        return Container(
                          child: Center(
                            child: Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Text("i am $index"),
                            ),
                          ),
                        );
                      }),
                      ListView.builder(
                          itemCount: 5,
                          itemBuilder: (context,index){
                            return Container(
                              child: Center(
                                child: Padding(
                                  padding: const EdgeInsets.all(8.0),
                                  child: Text("i am $index"),
                                ),
                              ),
                            );
                          })
                ]),
              ),
            ),
          ),
        )
      ],
    );
  }
}

@Darshan提供的解决方案无法解决我的问题，解决方案是
在SafeArea小部件中包装TabBar。结果是如何从应用程序栏中删除这个小的底部？

布拉桑卡

原因是AppBar它的大小+状态栏的大小。有多种解决方法。正如其他答案所述，简单的方法是添加SafeArea。

请注意，即使在两个标签下，您也会得到难看的很小的空间。

为了解决您可以使用的问题PreferredSize（还有其他方法）。

以上屏幕截图的代码：

class _TemplesListingWithTabModeState extends State<TemplesListingWithTabMode> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: SafeArea(
        child: Scaffold(
          appBar: PreferredSize(
            preferredSize: Size(double.infinity, 60),
            child: TabBar(
                indicatorColor: Colors.pink,
                tabs: [
                  Tab(
                    child: Text("ALL",style: TextStyle(color: Colors.pink),),
                  ),Tab(
                    child: Text("Favorites",style: TextStyle(color: Colors.pink),),
                  )
                ]),
          ),
          body  : Container(
            color: Colors.grey,
            child: TabBarView(

                children: [
                  ListView.builder(
                      itemCount: 100,
                      itemBuilder: (context,index){
                        return Container(
                          child: Center(
                            child: Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Text("i am $index"),
                            ),
                          ),
                        );
                      }),
                  ListView.builder(
                      itemCount: 5,
                      itemBuilder: (context,index){
                        return Container(
                          child: Center(
                            child: Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Text("i am $index"),
                            ),
                          ),
                        );
                      })
                ]),
          ),
        ),
      ),
    );
  }
}