GitLocker: The Coding Marketplace

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 ☕️