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('w3wiki'), 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( 'w3wiki' ), 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, ) ], ), ); } } |
Contact Us