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"
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");
},
),
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");
},
),
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");
},
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
| Param | isRequired |
|---|---|
| List<String> labels | Yes |
| Function(int) selectedLabelIndex | Yes |
| TextStyle selectedTextStyle | Yes |
| TextStyle unSelectedTextStyle | Yes |
| 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 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
โ๏ธ
185 Dec 13, 2022
8 Jun 17, 2022
1 Jun 9, 2020
51 Dec 23, 2022
13 Dec 2, 2022
5 Sep 16, 2022
98 Oct 31, 2022
76 Dec 6, 2022
10 Oct 26, 2022
5 Oct 30, 2022