TabBar: TabView in flutter

TabView is a very useful and popular widget in Flutter, which allows you to easily create tabs for your app. It’s a great way to organize your app’s content and to provide users with an intuitive navigation experience. In this article, we’ll dive into how to use TabView in Flutter and its key features.

What is TabView?

TabView is a widget in Flutter that allows you to create a collection of tabs. Each tab contains a child widget that is displayed when the tab is selected. Tabs are typically used to organize content into different categories, such as news articles, photos, or videos.

The TabView widget is part of the Material Design library in Flutter, which provides a set of guidelines for building high-quality, responsive apps on Android and iOS. It’s a great way to create tabs that are consistent with the overall look and feel of your app.

How to Use TabView in Flutter

Using TabView in Flutter is quite simple. First, you need to create a list of Tab objects, each of which has a text label and a child widget. Here’s an example:

TabController _tabController;
List<Tab> _tabs = [
  Tab(text: "Tab 1", icon: Icon(Icons.home),),
  Tab(text: "Tab 2", icon: Icon(Icons.search),),
  Tab(text: "Tab 3", icon: Icon(Icons.settings),),
];

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

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("TabView Example"),
      bottom: TabBar(
        controller: _tabController,
        tabs: _tabs,
      ),
    ),
    body: TabBarView(
      controller: _tabController,
      children: [
        // First tab
        Center(child: Text("Tab 1"),),
        
        // Second tab
        Center(child: Text("Tab 2"),),
        
        // Third tab
        Center(child: Text("Tab 3"),),
      ],
    ),
  );
}

In the above example, we first create a list of three Tab objects, each with a text label and an icon. We then create a TabController object, which manages the state of the tabs. We set the length of the TabController to the length of the list of tabs.

Next, we create the UI for the tabs by adding a TabBar widget to the AppBar of our Scaffold. We pass in the list of tabs and the TabController to the TabBar widget. The TabBar widget automatically displays the labels and icons of the tabs.

Finally, we create the content for each tab by adding a TabBarView widget to the body of our Scaffold. We pass in the TabController and a list of child widgets. The TabBarView widget automatically displays the child widget for the currently selected tab.

You can also stop user from scrolling left or right if you want to by passing just NeverSScrollablePhysics to your TabBar like:

TabBarView(
   physics: const NeverScrollableScrollPhysics(),
)

and again navigate user to next widget by making some kind of validations on button onPress which you can place inside any tabview Item:

_tabController.animateTo(
   1,
   duration: const Duration(milliseconds: 500),
   curve: Curves.ease,
 );

Hope you enjoy it and if it helps you, kindly like and share this article.