Flutter Tab Toggle

A Beautiful and Simple Tab/Toggle switch widget. It can be fully customized with desired icons, width, colors, text, corner radius etc. It also maintains selection state.

Getting Started

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
  ...
  flutter_toggle_tab: "^latestVersion"

Import it:

import 'package:flutter_toggle_tab/flutter_toggle_tab.dart';

Usage Examples

Basic tab/toggle switch

// Here default theme colors are used for activeBgColor, activeFgColor, inactiveBgColor and inactiveFgColor
FlutterToggleTab(  
  // width in percent, to set full width just set to 100  
  width: 90,  
  borderRadius: 30,  
  height: 50,  
  initialIndex:0, 
  selectedColors: [Colors.blue],  
  selectedTextStyle: TextStyle(  
    color: Colors.white,
    fontSize: 18,
    fontWeight: FontWeight.w700),
  unSelectedTextStyle: TextStyle(  
    color: Colors.black87,
    fontSize: 14,
    fontWeight: FontWeight.w500),
  labels: ["Tab A (10)", "Tab B (6)", "Tab C (9)"],  
  selectedLabelIndex: (index) {  
	print("Selected Index $index");
  },  
),

Basic tab/toggle switch with Icon

FlutterToggleTab(  
  width: 50,  
  borderRadius: 15,  
  initialIndex:0, 
  selectedTextStyle: TextStyle(
    color: Colors.white,
    fontSize: 18,
    fontWeight: FontWeight.w600),
  unSelectedTextStyle: TextStyle(
    color: Colors.blue,
    fontSize: 14,
    fontWeight: FontWeight.w400),
  labels: ["Male","Female"],  
  icons: [Icons.person,Icons.pregnant_woman],  
  selectedLabelIndex: (index) {  
	print("Selected Index $index");
  },  
),

Basic tab/toggle switch with Icon Only

FlutterToggleTab(  
  width: 40,  
  borderRadius: 15,  
  initialIndex:0, 
  selectedTextStyle: TextStyle(
    color: Colors.white,
    fontSize: 18,
    fontWeight: FontWeight.w600),
  unSelectedTextStyle: TextStyle(
    color: Colors.grey,
    fontSize: 14,
    fontWeight: FontWeight.w400),
  labels: ["",""],  
  icons: [Icons.person,Icons.pregnant_woman], 
  selectedLabelIndex: (index) { 
	print("Selected Index $index");
  },

Update selected tab Programmatically

var _selectedIndex= 0 // you can change selected with update this 
FlutterToggleTab(  
  width: 40,  
  borderRadius: 15,
  initialIndex:0, 
  selectedIndex: _selectedIndex,  
  selectedTextStyle: TextStyle(
    color: Colors.white,
    fontSize: 18,
    fontWeight: FontWeight.w600),
  unSelectedTextStyle: TextStyle(
    color: Colors.grey,
    fontSize: 14,
    fontWeight: FontWeight.w400),
  labels: ["",""],  
  icons: [Icons.person,Icons.pregnant_woman], 
  selectedLabelIndex: (index) {  
	setState(() {
	  _selectedIndex = index;
	  print("Selected Index $index");
	});
  },

Available Parameters

Param	isRequired
List<String> labels	Yes
Function(int) selectedLabelIndex	Yes
TextStyle selectedTextStyle	Yes
TextStyle unSelectedTextStyle	Yes
int selectedIndex (listener for index selected) see on example	Yes
double width (in Percent of width Screen) default: 100	No
double height (double) default: 45	No
List<IconData> icons (List of IconData)	No
double borderRadius (double) default 30	No
List<Color> selectedBackgroundColors default : [ Theme.of(context).primaryColor]	No
List<Color> unSelectedBackgroundColors default [ Color(0xffe0e0e0)]	No
Alignment begin default : Alignment.topCenter	No
Alignment end default : Alignment.bottomCenter	No
bool isScroll default : true	No
EdgeInsets marginSelected default : EdgeInsets.zero	No