Tutorial: Flutter Cupertino (iOS) TabBar

Tutorial: Flutter Cupertino TabBar (iOS)

Introduction: Flutter Cupertino TabBar

Cupertino tabbar is a flutter version of the iOS bottom tabbar or bottom navigation bar. The CupertinoTabBar widget allows us to add an iOS-style tabbar to our project. It’s comparable to the android platform’s bottom navigation bar in flutter. It shows a row of tabs with a label and an icon for each one. By default, the first tab will be active. The BottomNavigationBarItem widget will be used to create each tab.

To automatically reflect new data when a tab is changed, we must utilize the CupertinoTabScaffold with the CupertinoTabBar. Tabbar can be used without the cupertinoTabScaffold. In such situation, we’ll have to manually listen for tab changes. To reflect new data, we must execute setState to update the cureent Index with the specified tab index.

Every time a tab is changed, the navigation is changed as well. A separate navigation stack will be created for each navigator. CupertinoTabView in the tabBuilder of CupertinoTabScaffold may be used to achieve this type of behavior.

Do you have any idea what Cupertino is? It’s just a collection of flutter widgets that adhere to the iOS design pattern. These widgets are intended to be used in flutter apps that target the iOS platform.

With the help of an example, we will learn how to use the Cupertino Tabbar in Flutter. We’ll also learn how to use different settings to change the look of the CupertinoTabBar widget.

Cupertino Flutter Documentation

How To Create Cupertino TabBar In Flutter?

CupertinoTabBar is a flutter class that may be used to construct a cupertino tabbar. We must invoke the class’s constructor and give the needed attributes. Only one property item is required for Tabbar. As a value for items, we should offer a list of BottomNavigationBarItem(s).

CupertinoTabBar Constructor:

CupertinoTabBar(
{Key? key,  
 required List<BottomNavigationBarItem> items, 
 ValueChanged<int>? onTap, 
 int currentIndex, 
 Color? backgroundColor, 
 Color? activeColor, 
 Color inactiveColor, 
 double iconSize, 
 Border? border}
)Code language: HTML, XML (xml)

Flutter Cupertino TabBar Properties:

  • items
  • onTap
  • currentIndex
  • backgroundColor
  • activeColor
  • inactiveColor
  • iconSize
  • border

Code To Create Cupertino TabBar In Flutter:

items:

This attribute will be used to supply items to the cupertino tabbar. The value is a list of BottomNavigationBarItems.

CupertinoTabBar(
              items: [
                  BottomNavigationBarItem(
                  icon: Icon(CupertinoIcons.home),
                  ),
                  BottomNavigationBarItem(
                  icon: Icon(CupertinoIcons.person),
                  )
              ],
            ),

Output:

onTap:

When the user touches on a tab, it will trigger a callback function. The index of the chosen tab will be returned by this method. To change the selection in the UI, we must set this value to the currentIndex property and execute setState. If we use the cupertinoTabScaffold widget with a tabbar, we may disregard this feature.

CupertinoTabBar(
              items: [
                  BottomNavigationBarItem(
                  icon: Icon(CupertinoIcons.home),
                  ),
                  BottomNavigationBarItem(
                  icon: Icon(CupertinoIcons.person),
                  )
              ],
              onTap: (value){
                index = value;
                setState(() {
                  
                });
              },
            ),

currentIndex:

This attribute will be used to show which tab is presently chosen. It accepts int as a parameter. If we use the cupertinoTabScaffold widget with a tabbar, we may disregard this feature.

CupertinoTabBar(
              items: [
                  BottomNavigationBarItem(
                  icon: Icon(CupertinoIcons.home),
                  ),
                  BottomNavigationBarItem(
                  icon: Icon(CupertinoIcons.person),
                  )
              ],
              onTap: (value){
                index = value;
                setState(() {

                });
              },
              currentIndex:index,
            ),

backgroundColor:

This parameter will be used to apply or alter the tabbar’s background color. CupertinoColors or Colors class constant is used as a value.

CupertinoTabBar(
              items: [
                  BottomNavigationBarItem(
                  icon: Icon(CupertinoIcons.home),
                  ),
                  BottomNavigationBarItem(
                  icon: Icon(CupertinoIcons.person),
                  )
              ],
              backgroundColor: Colors.indigo.shade900,
            ),

Output:

activeColor:

This parameter will be used to modify the color of the active tab (tab that is currently selected).

CupertinoTabBar(
              items: [
                  BottomNavigationBarItem(
                  icon: Icon(CupertinoIcons.home),
                  ),
                  BottomNavigationBarItem(
                  icon: Icon(CupertinoIcons.person),
                  )
              ],
              backgroundColor: Colors.indigo.shade900,
              activeColor: Colors.deepOrange,
            ),

Output:

inactiveColor:

This attribute will be used to modify the color of the inactive tab (tab that is not selected).

CupertinoTabBar(
              items: [
                  BottomNavigationBarItem(
                  icon: Icon(CupertinoIcons.home),
                  ),
                  BottomNavigationBarItem(
                  icon: Icon(CupertinoIcons.person),
                  )
              ],
              backgroundColor: Colors.indigo.shade900,
              activeColor: Colors.deepOrange,
              inactiveColor:Colors.white,
            ),

Output:

iconSize:

This attribute will be used to adjust the size of the tabbar icon. It is worth twice as much.

CupertinoTabBar(
              items: [
                  BottomNavigationBarItem(
                  icon: Icon(CupertinoIcons.home),
                  ),
                  BottomNavigationBarItem(
                  icon: Icon(CupertinoIcons.person),
                  )
              ],
              backgroundColor: Colors.indigo.shade900,
              activeColor: Colors.deepOrange,
              inactiveColor:Colors.white,
              iconSize: 40,
            ),

Output:

border:

This attribute will be used to give the tabbar a border. As a value, it uses the Border class.

CupertinoTabBar(
              items: [
                  BottomNavigationBarItem(
                  icon: Icon(CupertinoIcons.home),
                  ),
                  BottomNavigationBarItem(
                  icon: Icon(CupertinoIcons.person),
                  )
              ],
              border: Border(top: BorderSide(color: Colors.indigo.shade900)),
            ),

Output:

Flutter Cupertino TabBar Example Code

Let’s make an example where we’ll use the CupertinoTabBar widget to construct a cupertino tabbar in flutter. We’ll show a tabbar with two tabs, home and profile, in this example. When the user touches on the tab, the associated widgets will appear. We’ll utilize the CupertinoTabScaffold with the CupertinoTabBar to avoid having to use the onTap and currentIndex attributes. When you switch tabs, the data will be updated automatically.

Let’s start by declaring a list that will house the tab widgets.

List<Widget> data = [HomeTab(), ProfileTab()];Code language: HTML, XML (xml)

Add the CupertinoTabScaffold widget to the CupertinoPageScaffold widget’s child. CupertinoTabBar should be added to the CupertinoTabScaffold’s tabbar attribute.

child: CupertinoTabScaffold(
            tabBar: CupertinoTabBar(
              items: [
                BottomNavigationBarItem(
                  icon: Icon(CupertinoIcons.home),
                  label: "Home",
                ),
                BottomNavigationBarItem(
                  icon: Icon(CupertinoIcons.person),
                  label: "Profile",
                )
              ],
            ),
        )Code language: JavaScript (javascript)

Provide a callback method for the CupertinoTabScaffold widget’s tabBuilder attribute. The index of the currently chosen tab will be returned by this callback function. Within the callback function, return the widget based on the index.

child: CupertinoTabScaffold(
            tabBar: CupertinoTabBar(
              items: [
                BottomNavigationBarItem(
                  icon: Icon(CupertinoIcons.home),
                  label: "Home",
                ),
                BottomNavigationBarItem(
                  icon: Icon(CupertinoIcons.person),
                  label: "Profile",
                )
              ],
            ),
            tabBuilder: (context, index) {
              return CupertinoTabView(
                  builder: (context) {
                    return data[index];
                  },
              );
            },
        )Code language: JavaScript (javascript)

We’ve finished building the tabbar. Make classes for the home and profile tabs now. These classes can be created in separate dart files. I’m going to make them all in the same file in this example (main.dart).

Home Class:

class HomeTab extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Material(
      child: Container(
        alignment: Alignment.center,
        height: MediaQuery.of(context).size.height,
        child:Text(
          "This is home page",
          style:TextStyle(
              fontSize: 20
          ) ,
        ),
      ),
    );
  }
}Code language: JavaScript (javascript)

Profile Class:

class ProfileTab extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Material(
      child: Container(
        alignment: Alignment.center,
        height: MediaQuery.of(context).size.height,
        child:Text(
          "This is profile page",
          style: TextStyle(
              fontSize: 20,
          ),
        ),
      ),
    );
  }
}Code language: JavaScript (javascript)

Full Code Example CupertinoTabBar Flutter

Let’s wrap up our flutter example of a cupertino tabbar by combining the code snippets above. Replace the code in the main.dart file with the code below in a new flutter project.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

void main()
{
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Learning',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home:MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState()
  {
    return _MyHomePageState();
  }
}

class _MyHomePageState extends State<MyHomePage> {
  List<Widget> data = [HomeTab(), ProfileTab()];
  @override
  Widget build(BuildContext context) {
    return new CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle:Text("Flutter Cupertino Tabbar"),
      ),
        child: CupertinoTabScaffold(
            tabBar: CupertinoTabBar(
              items: [
                BottomNavigationBarItem(
                  icon: Icon(CupertinoIcons.home),
                  label: "Home",
                ),
                BottomNavigationBarItem(
                  icon: Icon(CupertinoIcons.person),
                  label: "Profile",
                )
              ],
            ),
            tabBuilder: (context, index) {
              return CupertinoTabView(
                  builder: (context) {
                    return data[index];
                  },
              );
            },
        )
    );
  }
}

class HomeTab extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Material(
      child: Container(
        alignment: Alignment.center,
        height: MediaQuery.of(context).size.height,
        child:Text(
          "This is home page",
          style:TextStyle(
              fontSize: 20
          ) ,
        ),
      ),
    );
  }
}

class ProfileTab extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Material(
      child: Container(
        alignment: Alignment.center,
        height: MediaQuery.of(context).size.height,
        child:Text(
          "This is profile page",
          style: TextStyle(
              fontSize: 20,
          ),
        ),
      ),
    );
  }
}Code language: JavaScript (javascript)

Output:

Conclusion

In this article, we looked at how to make and utilize the Cupertino Tabbar in Flutter. We’ve also seen an example of how the CupertinoTabBar widget that has been altered in appearance by modifying it’s properties. As always, If you have found this article useful do not forget to share it and leave a comment if you have any questions. Happy Coding 🙂


Posted

in

, ,

by

Comments

Leave a Reply