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.
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';// 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");
},
),
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");
},
),
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");
},
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");
});
},| 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 |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent