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: "^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: 90, // width in percent
  borderRadius: 30,
  height: 50,
  selectedIndex: _tabTextIndexSelected,
  selectedBackgroundColors: [Colors.blue, Colors.blueAccent],
  selectedTextStyle: TextStyle(
  color: Colors.white,
  fontSize: 18,
  fontWeight: FontWeight.w700),
  unSelectedTextStyle: TextStyle(
  color: Colors.black87,
  fontSize: 14,
  fontWeight: FontWeight.w500),
  labels: _listTextTabToggle,
  selectedLabelIndex: (index) {
    setState(() {
        _tabTextIndexSelected = index;
    });
  },
  isScroll:false,
)

image

Basic tab/toggle switch with Icon

FlutterToggleTab
(
  width: 50,
  borderRadius: 15,
  selectedTextStyle: TextStyle(
  color: Colors.white,
  fontSize: 18,
  fontWeight: FontWeight.w600),
  unSelectedTextStyle: TextStyle(
  color: Colors.blue,
  fontSize: 14,
  fontWeight: FontWeight.w400),
  labels: _listGenderText,
  icons: _listIconTabToggle,
  selectedIndex: _tabTextIconIndexSelected,
  selectedLabelIndex: (index) {
    setState(() {
      _tabTextIconIndexSelected = index;
    });
  },
)

image

Basic tab/toggle switch with Icon Only and add margin on selected item

FlutterToggleTab
(
  width: 40,
  borderRadius: 15,
  selectedIndex: _tabIconIndexSelected,
  selectedTextStyle: TextStyle(
  color: Colors.white,
  fontSize: 18,
  fontWeight: FontWeight.w600),
  unSelectedTextStyle: TextStyle(
  color: Colors.grey,
  fontSize: 14,
  fontWeight: FontWeight.w400),
  labels: _listGenderEmpty,
  icons: _listIconTabToggle,
  selectedLabelIndex: (index) {
    setState(() {
      _tabIconIndexSelected = index;
    });
  },
  marginSelected: EdgeInsets.symmetric(horizontal: 4,vertical:4),
)

image

Update selected tab Programmatically

FlutterToggleTab
(
  width: 90,
  borderRadius: 15,
  selectedIndex: _tabSelectedIndexSelected,
  selectedTextStyle: TextStyle(
  color: Colors.white,
  fontSize: 18,
  fontWeight: FontWeight.w600),
  unSelectedTextStyle: TextStyle(
  color: Colors.grey,
  fontSize: 14,
  fontWeight: FontWeight.w400),
  labels: _listTextSelectedToggle,
  selectedLabelIndex: (index) {
    setState(() {
      _tabSelectedIndexSelected = index;
    });
  },
)

Available Parameters

Param isRequired
List<String> labels Yes
Function(int) selectedLabelIndex Yes
TextStyle selectedTextStyle default:Theme.of(context).textTheme.bodyMedium, No
TextStyle unSelectedTextStyle default:Theme.of(context).textTheme.bodyMedium, No
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 iconSize 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

Buy me coffee if you love my works ☕️

ko-fi      buymeacoffe      paypal