flutter_toggle_tab

Description:

flutter toggle tab

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"
copied to clipboard
Import it:
import 'package:flutter_toggle_tab/flutter_toggle_tab.dart';
copied to clipboard
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,
)
copied to clipboard


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;
});
},
)
copied to clipboard


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),
)
copied to clipboard


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;
});
},
)
copied to clipboard
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 ☕️