uinavigationbar - How to modify the default top navigation bar style in flutter

Question

I want to make a top navigation bar with this effect, but it's very difficult to modify the default tab style of tabcontroller! Then I try to use container to modify it by myself. It's very simple, but the problem is that I can't support left and right swiping to switch pages. Because the gesture has been blocked by pageview. So in the end, I think it's better to use the tab provided by the system and then modify the style, some one help me!

DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          bottom: TabBar(
            tabs: [
              Tab(icon: Icon(Icons.directions_car)),
              Tab(icon: Icon(Icons.directions_transit)),
            ],
          ),
        ),
      ),
    );

Answer 1

The indicator property of TabBar can be used to achieve the look. In your case, try this-

DefaultTabController(
  length: 3,
  child: Scaffold(
    appBar: AppBar(
      bottom: Container(
        color: Colors.grey[200],
        width: 200,
        child:TabBar(
        labelColor: Colors.red,
        unselectedLabelColor: Colors.grey,
        indicator: BoxDecoration(
            borderRadius: BorderRadius.circular(20),
            color: Colors.white),
        tabs: [
          Tab(icon: Icon(Icons.directions_car)),
          Tab(icon: Icon(Icons.directions_transit)),
        ],
      ),
    ),
  ),
);