Reputation: 4987

How to remove bottom from default tab bar

I need to add a tab bar without an app bar and I got a solution from StackOverflow to use flexible space and it is working but it makes additional unwanted space in tab bar bottom
How to remove this or hide this?

My full code

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"),
                                ),
                              ),
                            );
                          })
                ]),
              ),
            ),
          ),
        )
      ],
    );
  }
}

The solution provided by @Darshan is not solved my issue and the solution is
Wrap TabBar in SafeArea widget. and the result is

How to remove this small bottom from appbar?

Upvotes: 3

Answers (8)

HU1YE

Reputation: 1

try to use

TabBar(indicatorColor: Colors.transparent,),

Upvotes: 0

Infinity_zhang

Reputation: 112

I had the same issue。 I spent a long time and finally found a way。 It is simple.

TabBar(
  padding: const EdgeInsets.only(top: 8),
)

Give the TabBar a topPadding, and then the indicator will overlap with the divider of the AppBar

Upvotes: 0

Arenukvern

Reputation: 534

Just in case if it is needed to be done in slivers:

MediaQuery.removePadding is needed to remove SafeArea padding from the SliverAppBar. If you needed SafeArea - use without MediaQuery.removePadding.

MediaQuery.removePadding(
  context: context,
  removeTop: true,
  child: SliverAppBar(
    pinned: true,
    automaticallyImplyLeading: false,
    primary: false,
    toolbarHeight: 0,
    bottom: PreferredSize(
      preferredSize: Size.fromHeight(kToolbarHeight),
      child: TabBar(),
    ),
    titleSpacing: 0,
  ),
)

Upvotes: 0

Hfkn Hfjn

Reputation: 21

By default, ListView acts as if SafeArea is turned on. Setting the padding to zero will remove that white space.

ListView(
padding: EdgeInsets.zero;
...
);

Discussion on ListView and the default SafeArea

Upvotes: 2

Blasanka

Reputation: 22437

The reason is AppBar have its size + status bar size. There are multiple ways fix this. As other answer mentioned, simple way is to add SafeArea.

And note that even after you will get ugly little space under two tabs.

To solve that you can use PreferredSize (there are other ways for this also).

Code for the above screenshot:

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"),
                            ),
                          ),
                        );
                      })
                ]),
          ),
        ),
      ),
    );
  }
}

Upvotes: 4

Mr vd

Reputation: 978

import 'package:bubble_tab_indicator/bubble_tab_indicator.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';



class AppBarrTest extends StatefulWidget {
  @override
  _AppBarrTestState createState() => _AppBarrTestState();
}

class _AppBarrTestState extends State<AppBarrTest>with SingleTickerProviderStateMixin {

  int index = 0;
  TabController _controller;

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

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


  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
             flexibleSpace: fun_Appbar(),
          bottom: PreferredSize(
            preferredSize: Size.fromHeight(50),
            child: Column(
              children: <Widget>[
                Card(
                  shape: Border.all(color: Colors.blue),
                  color: Colors.white,
                  child: fun_tabBar(20),
                ),
              ],
            ),
          ),

      ),
      ),
    );
  }

  fun_Appbar(){
    double h = MediaQuery.of(context).size.height;
    return Container(

      height: 50,

      child: Center(
        child: Text(
          "Messages",
          style: TextStyle(
            fontSize: 22,
            color: Colors.white,
            letterSpacing: 2.0,
            fontFamily: 'Nunito',
          ),
        ),
      ),
    );

  }
  fun_tabBar(double fontSize){
    return TabBar(
      controller: _controller,

      //indicatorWeight: 20,
      indicatorSize: TabBarIndicatorSize.label,
      labelPadding: EdgeInsets.only(left: 0, right: 0),
      dragStartBehavior: DragStartBehavior.start,
      unselectedLabelColor: Colors.black,

      indicatorColor: Colors.red,
      indicator: new BubbleTabIndicator(
        indicatorHeight: 40.0,
        indicatorColor: Color(0xFF343193),
        //padding: EdgeInsets.all(20),
        tabBarIndicatorSize: TabBarIndicatorSize.tab,
        indicatorRadius: 30,
      ),

      tabs: <Widget>[
        Tab(
          child: Container(
            alignment: Alignment.center,

            child: Text(
              "Inbox",
              style: TextStyle(
                fontFamily: 'Nunito',
                fontSize: fontSize,
              ),
            ),
          ),
        ),
        Tab(
          child: Container(
            alignment: Alignment.center,

            child: Text(
              "Sent",
              style: TextStyle(
                fontFamily: 'Nunito',
                fontSize: fontSize,
              ),
            ),
          ),
        ),
      ],
    );
  }
}

bubble_tab_indicator: "^0.1.4"

or Just wrap your flexible space with SizeBox and set height

  flexibleSpace: SizedBox(
                height: 100,
                child: TabBar(
                    indicatorColor: Colors.pink,
                    tabs: [
                      Tab(
                        child: Text("ALL",style: TextStyle(color: Colors.pink),),
                      ),Tab(
                        child: Text("Favorites",style: TextStyle(color: Colors.pink),),
                      )
                    ]),
              ),

Upvotes: 0

Crazy Lazy Cat

Reputation: 15053

You can create your appbar by extending AppBar

class MyAppBar extends AppBar {
  MyAppBar({PreferredSizeWidget child, Color backgroundColor})
      : super(bottom: child, backgroundColor: backgroundColor);

  @override
  Size get preferredSize => bottom.preferredSize;
}

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 DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: MyAppBar(
          backgroundColor: Colors.white,
          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"),
                      ),
                    ),
                  );
                })
          ]),
        ),
      ),
    );
  }
}

Upvotes: 0

Darshan

Reputation: 11669

Wrap TabBar in SafeArea widget. It adds the necessary padding to the child widget which in your case, minimizes the space you are seeing. Working code below:

child: Scaffold(
              appBar: AppBar(
                backgroundColor: Colors.white,
                flexibleSpace: SafeArea(
                child: TabBar(
                    indicatorColor: Colors.pink,
                    tabs: [
                  Tab(
                    child: Text("ALL",style: TextStyle(color: Colors.pink),),
                  ),Tab(
                    child: Text("Favorites",style: TextStyle(color: Colors.pink),),
                  )
                ]),)
              ),

Hope this answers your question.

Upvotes: 0

How to remove bottom from default tab bar

Answers (8)

Related Questions