flutter_toggle_tab 0.0.3+2

Flutter

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

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).primaryColor]No
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



7
likes
80
pub points
74%
popularity

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

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

hey.mudassir@gmail.com

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on flutter_toggle_tab