Flutter Widgets → Flutter Tabs – Camposha

Flutter Widgets

Flutter Widgets

Flutter Widgets

Flutter Tabs

Flutter Tabs Tutorial and Examples

Exploring the classes required to create tabs in flutter.

Tab derives from the StatelessWidget:

class Tab extends StatelessWidget

Tab also resides in the flutter package.

If both icon and text are provided, the text is displayed below the icon.

Let’s start by introducing some APIs we will be using while constructing our Tabs.

1. TabView

TabBarView is a page view that displays the widget which corresponds to the currently selected tab. Typically used in conjunction with a TabBar.

TabBarView is a concrete class and derives from the StatefulWidget class.

class TabBarView extends StatefulWidget

Think of this as the page that actually renders your widgets when you click or swipe to a given tab.

The tabBarView as well as the TabBar are normally cordinated by the TabController.

However if a TabController is not provided, you use the DefaultTabController.

 

2. TabBar

TabBar is a material design widget that displays a horizontal row of tabs.

class TabBar extends StatefulWidget implements PreferredSizeWidget

TabBar resides in the flutter package.

Mostly TabBar is created as the AppBar.bottom part of an AppBar and in conjunction with a TabBarView.

And if you don’t provide a tabcontroller that will cordinate the tabbar and tabview, then you can use DefaultTabController instead.

Make sure your tab controller’s TabController.length is the same as the length of the tabs list.

3. TabBarController

TabController is a class that coordinates tab selection between a TabBar and a TabBarView.

Here’s it’s definition:

class TabController extends ChangeNotifier

This widget is important when you want to work with tabs.

You can get the position of the selected tab via the index property of this class. When you swipe or scroll or click a tab, we animate to the clicked tab, the selected tab’s index can be changed with animateTo.

A stateful widget that builds a TabBar or a TabBarView can create a TabController and share it directly.

When the TabBar and TabBarView don’t have a convenient stateful ancestor, a TabController can be shared by providing a DefaultTabController inherited widget.

Here’s an example of TabController in use:

class MyTabbedPage extends StatefulWidget {
  const MyTabbedPage({ Key key }) : super(key: key);
  @override
  _MyTabbedPageState createState() => new _MyTabbedPageState();
}

class _MyTabbedPageState extends State<MyTabbedPage> with SingleTickerProviderStateMixin {
  final List<Tab> myTabs = <Tab>[
    new Tab(text: 'LEFT'),
    new Tab(text: 'RIGHT'),
  ];

  TabController _tabController;

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

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

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        bottom: new TabBar(
          controller: _tabController,
          tabs: myTabs,
        ),
      ),
      body: new TabBarView(
        controller: _tabController,
        children: myTabs.map((Tab tab) {
          return new Center(child: new Text(tab.text));
        }).toList(),
      ),
    );
  }
}

4. DefaultTabBarController

DefaultTabController is the TabController for descendant widgets that don’t specify one explicitly.

DefaultTabController derives from the StatefulWidget. This implies it has a mutable state.

class DefaultTabController extends StatefulWidget

DefaultTabController is an inherited widget that is used to share a TabController with a TabBar or a TabBarView.

It’s used when sharing an explicitly created TabController isn’t convenient because the tab bar widgets are created by a stateless parent widget or by different parent widgets.

class MyDemo extends StatelessWidget {
  final List<Tab> myTabs = <Tab>[
    new Tab(text: 'LEFT'),
    new Tab(text: 'RIGHT'),
  ];

  @override
  Widget build(BuildContext context) {
    return new DefaultTabController(
      length: myTabs.length,
      child: new Scaffold(
        appBar: new AppBar(
          bottom: new TabBar(
            tabs: myTabs,
          ),
        ),
        body: new TabBarView(
          children: myTabs.map((Tab tab) {
            return new Center(child: new Text(tab.text));
          }).toList(),
        ),
      ),
    );
  }
}

Leave a Reply

Your email address will not be published. Required fields are marked *

Rating

Not enough ratings to display
Join Us
X