Tab Page Selector Widget in Flutter

This article will teach about Tab Page Selector Widget in a flutter.

What is Tab Page Selector Widget?

• TabPageSelector displays a row of small circular indicators, one per tab. 
• Tabpageselector is a crucial part of the TabBar, which functions distinctly.    
• It plays a major role in increasing the user experience while exploring the app.
• The selected tab’s indicator will have a different appearance from the others.
• TabPageSelector can be wired up with a controller, which can be declared and initialized

Constructor:

This is the constructor for Tab Page Selector Widget:

Dart

TabPageSelector({ Key? key,
    TabController? controller,
    double indicatorSize = 12.0,
    Color? color,
    Color? selectedColor,
    BorderStyle? borderStyle
})

TabPageSelector creates a compact widget that indicates which tab has been selected.

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Create a List of Widgets with three different Icons

// Creating the List of icons
List <Widget> widgets = const[
    Icon(Icons.home),
    Icon(Icons.settings),
    Icon(Icons.person),
];

Step 3: Use SingleTickerProviderStateMixin

What is SingleTickerProviderStateMixin?

• Provides a single Ticker that is configured to only tick while the current tree is enabled, as defined by TickerMode.
• This mixin only supports vending a single ticker.
• Tab Controller is a given property in the constructor of TabPageSelector so we have created TabController variable and also set the index to 0

class _MyHomePageState extends State <MyHomePage> with SingleTickerProviderStateMixin {
    late final TabController controller;
    int _index = 0;
    
    @override
    Widget build(BuildContext context) {
        return Scaffold();
    }
}

Step 4: Creating initState and disposeState

• We have set the controller to TabController
• provide length and set the initial index to _index which is 0.
• vsync = this which can be accessible because of SingleTickerProviderStateMixin.
• because we are using a controller so we also need to dispose of the controller

class _MyHomePageState extends State <MyHomePage> with SingleTickerProviderStateMixin {
    late final TabController controller;
    int _index = 0;

    // Creating initState and dispose state
    @override
    void initState() {
        super.initState();
        controller = TabController(length: widgets.length, initialIndex: _index, vsync: this);
    }

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

    @override
    Widget build(BuildContext context) {
        return Scaffold();
    }
}

Step 5: Creating an Appbar

@override
Widget build(BuildContext context) {
    return Scaffold(
        // created an appbar
        appBar: AppBar(
            title: Text('GeeksforGeeks'),
            centerTitle: true,
        ),
    );
}

Output Image:

Step 6:  Create a Stack Widget

• we have given the alignment property with alignment.center.
• in children we have TabBarView.
• in TabBarView we have provided children as widgets where these widgets are the list of icons.
• Used Positioned widget to position TabPageSelector at the bottom of the screen.

// inside stack widget we have used TabBarView and have some alignment property
body: Stack(
    alignment: Alignment.center,
    children: < Widget > [
        TabBarView(controller: controller, children: widgets),

        //Used Positioned widget to position TabPageSelector at the bottom of screen.
        Positioned(
            bottom: 40,
            child: TabPageSelector(
                color: Colors.black38,
                controller: controller,
            ),
        ),
    ],
),

Step 7: Create a Floating Action Button 

• Use the Button Bar to navigate to next pages.
• provided the logic that if index = 0 then reset the page else navigate to the next page.
• We used controller.animateTo(_index) which will navigate to the next page
• Used Icons.navigate_next icon for ButtonBar by pressing button we will navigate.

// Creating floating action button for navigation
floatingActionButton: ButtonBar(
    children: [
        FloatingActionButton.small(
            onPressed: () {
                (_index != widgets.length - 1) ? _index++ : _index = 0;
                controller.animateTo(_index);
            },
            child: Icon(Icons.navigate_next),
            hoverElevation: 0,
            elevation: 0,
        )
    ],
)

Complete Code:

Dart

import 'package:flutter/material.dart';

void main() {
    runApp(const MyApp());
}
// List of icons
List <Widget> widgets = const[
    Icon(Icons.home),
    Icon(Icons.settings),
    Icon(Icons.person),
];

class MyApp extends StatelessWidget {
    const MyApp({Key ? key}): super(key: key);

    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            title: 'Flutter Demo',
            theme: ThemeData(
                primarySwatch: Colors.green,
            ),
            home: const MyHomePage(),
        );
    }
}

class MyHomePage extends StatefulWidget {
    const MyHomePage({Key ? key}): super(key: key);

    @override
    State <MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State <MyHomePage> with SingleTickerProviderStateMixin {

    late final TabController controller;
    int _index = 0;

    @override
    void initState() {
        super.initState();
        controller = TabController(
            length: widgets.length,
            initialIndex: _index,
            vsync: this
        );
    }

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

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text('GeeksforGeeks'),
                centerTitle: true,
            ),
            // Building UI
            body: Stack(
                alignment: Alignment.center,
                children: <Widget> [
                    TabBarView(
                        controller: controller,
                        children: widgets),

                    Positioned(
                        bottom: 40,
                        child: TabPageSelector(color: Colors.black38,
                            controller: controller,
                        ),
                    ),
                ],
            ),

            // Creating floating action button for navigation
            floatingActionButton: ButtonBar(
                children: [
                    FloatingActionButton.small(onPressed: () {
                        (_index != widgets.length - 1) ? _index++ : _index = 0;
                            controller.animateTo(_index);
                        },
                        child: Icon(Icons.navigate_next),
                        hoverElevation: 0,
                        elevation: 0,
                    )
                ],
            ),
        );
    }
}

Working Output: