Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

It’s the divider. You can set the color to transparent.

TabBar(
  dividerColor: Colors.transparent,
  // ...
)
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading