Flutter Tab Toggle pub package

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: "^0.0.3+2"

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");
  },  
),

Farmers Market Finder Demo

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");
  },  
),

Farmers Market Finder Demo

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");
  },

Farmers Market Finder Demo

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

ParamisRequired
List<String> labelsYes
int initialIndex (default selected index)Yes
Function(int) selectedLabelIndexYes
TextStyle selectedTextStyleYes
TextStyle unSelectedTextStyleYes
int selectedIndex (listener for index selected) see on exampleNo
double width (in Percent of width Screen) default: 100No
double height (double) default: 45No
List<IconData> icons (List of IconData)No
double borderRadius (double) default 30No
List<Color> selectedBackgroundColors default : Theme.of(context).primaryColorNo
List<Color> unSelectedBackgroundColors default Color(0xffe0e0e0)No
Alignment begin default : Alignment.topCenterNo
Alignment endn default : Alignment.bottomCenterNo

Buy me coffee if you love my works ☕️

ko-fi      buymeacoffe      paypal



Libraries

button_tab
data_tab
flutter_toggle_tab
helper