flutter_toggle_tab 0.0.1+2

Library to create Beautiful and Customized Tab/Toggle Widget on Flutter

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: "^0.0.1+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,  
  initialLabelIndex: 0,  
  selectedColor: 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) {  
	setState(() {
	  print("Selected Index $index");
	});
  },  
),

Basic tab/toggle switch with Icon

FlutterToggleTab(  
  width: 50,  
  borderRadius: 15,  
  initialLabelIndex: 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) {  
	setState(() {
	  print("Selected Index $index");
	});
  },  
),

Basic tab/toggle switch with Icon Only

FlutterToggleTab(  
  width: 40,  
  borderRadius: 15,  
  initialLabelIndex: 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) {  
	setState(() {
	  print("Selected Index $index");
	});
  },

Available Parameters

Param	isRequired
labels (List of String)	Yes
initialLabelIndex (int)	Yes
selectedLabelIndex (Return Selected Index)	Yes
selectedTextStyle (TextStyle)	Yes
unSelectedTextStyle (TextStyle)	Yes
width (in Percent of width Screen) #default 100	No
height (double) #default 45	No
icons (List of IconData)	No
borderRadius (double) #default 30	No
selectedBackgroundColor #default Theme.of(context).primaryColor	No
unSelectedBackgroundColor #default Color(0xffe0e0e0)	No

---

Buy me coffee if you love my works ☕️