Search code examples
fluttertabbar

why i get a unexpected grey line on my tabBar?


i try to do a simple tabbar for the navigation on a flutter app. i want the same background everywhere. But i see a grey line between my tabBar and my page. I don't know how to make it disappear. Maybe it's very simple i m sorry i m a beginner on flutter. Here is my code:

class Homelogin extends StatefulWidget {
  const Homelogin({Key? key}) : super(key: key);

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

class HomeloginState extends State<Homelogin>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;

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

  @override
  Widget build(BuildContext context) {
    // Définir la couleur de la barre de statut
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.grey[900], 
      statusBarIconBrightness: Brightness
          .light, 
    ));
    return Scaffold(
      body: Column(
        children: [
          SafeArea(
            child: Container(
              color: Colors.grey[900],
              child: Padding(
                padding: const EdgeInsets.only(top: 10.0),
                child: TabBar(
                  splashBorderRadius: null,
                  controller: _tabController,
                  indicatorColor: Colors.deepPurple,
                  indicatorWeight: 5,
                  tabs: [
                    Tab(text: 'Log in'),
                    Tab(text: 'Sign up'),
                  ],
                ),
              ),
            ),
          ),
          Expanded(
            child: TabBarView(
              controller: _tabController,
              children: [
                Loginpage(),
                Newaccountpage(),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

and here is the result

unexpected grey line

I tried a lot of things like i make a new project just for the tabBar and follow tutorial on youtube but i don't have the same result i have a grey line everytime. I tried to put in a boxdecoration so i can select the border , ... don't work i have the border with the selected color and the grey line. I tried these solutions Flutter Tabbarview underline color don't work too. I think maybe the grey line don't belongs to the tabbar.


Solution

  • It's the divider. You can set the color to transparent.

    TabBar(
      dividerColor: Colors.transparent,
      // ...
    )