touchkit
A library that contains base classes for building custom widgets
Widgets in the Library
- Tab Bar Widget
Tab Bar Widget
The tab bar widget in this library can be used to create tab bar items that have rounded corners where the radius can be anything from 0 right up to something that results in the tab bar items becoming circular
Usage Example # 1 : Circular Social Sign Up Bars
Hint : To ignore the current selected tab, set resting color and active color to be the same color for both the icon and its background as shown below:
import 'package:touchkit/touchkit.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
//Create The Tab Data items
List<TabItemData> _socialIconsList = [
TabItemData(
iconData: FontAwesomeIcons.facebook,
iconRestingColor: Colors.grey,
iconActiveColor: Colors.grey,
iconSize: 22.0,
backgroundRestingColor: Color(0xff4468B0),
backgroundActiveColor: Color(0xff4468B0),
backgroundBorderRadius: 30.0),
TabItemData(
iconData: FontAwesomeIcons.google,
iconRestingColor: Colors.grey,
iconActiveColor: Colors.grey,
iconSize: 22.0,
backgroundRestingColor: Color(0xff3CBFF8),
backgroundActiveColor: Color(0xff3CBFF8),
backgroundBorderRadius: 30.0),
TabItemData(
iconData: FontAwesomeIcons.instagram,
iconRestingColor: Colors.grey,
iconActiveColor: Colors.grey,
iconSize: 22.0,
backgroundRestingColor: Color(0xffEA4C89),
backgroundActiveColor: Color(0xffEA4C89),
backgroundBorderRadius: 30.0)
];
// Nest the Tab Bar Widget in your a builder function
class SignInScreen extends StatefulWidget {
@override
_SignInScreenState createState() => _SignInScreenState();
}
class _SignInScreenState extends State<SignInScreen> {
int _selectedItemIndex = 0;
int _selectedItemIndex = 0;
@override
Widget build(BuildContext context) {
return Column(
children: [
SizedBox(height: 20.0),
TabBarWidget(
selectedIndex: _selectedItemIndex,
tabItemDataList: _socialIconsList,
onTap: (int index) {
setState(() {
_selectedItemIndex = index;
print(_selectedItemIndex);
});
}),
SizedBox(height: 20.0)
]);
}
}
Usage Example # 2 : Carousel Tab Buttons
Hint : To track the current selected tab, make sure the resting color and active color are different for both the icon and its background as shown below :
Note: The view that imports the widget must manage the state of the selected tab as shown below:
import 'package:touchkit/touchkit.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
//Create The Tab Data items
List<TabItemData> _carouselIconsList = [
TabItemData(
iconData: FontAwesomeIcons.plane,
iconRestingColor: Colors.grey,
iconActiveColor: 0xff3EBACE,
iconSize: 22.0,
backgroundRestingColor: Color(0xffD8ECF1),
backgroundActiveColor: Color(0xff3EBACE),
backgroundBorderRadius: 30.0),
TabItemData(
iconData: FontAwesomeIcons.bedding,
iconRestingColor: Colors.grey,
iconActiveColor: 0xff3EBACE,
iconSize: 22.0,
backgroundRestingColor: Color(0xffD8ECF1),
backgroundActiveColor: Color(0xff3EBACE),
backgroundBorderRadius: 30.0),
TabItemData(
iconData: FontAwesomeIcons.walking,
iconRestingColor: Colors.grey,
iconActiveColor: 0xff3EBACE,
iconSize: 22.0,
backgroundRestingColor: Color(0xffD8ECF1),
backgroundActiveColor: Color(0xff3EBACE),
backgroundBorderRadius: 30.0)
];
// Nest the Tab Bar Widget in your a builder function
class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
int _selectedItemIndex = 0;
int _selectedItemIndex = 0;
@override
Widget build(BuildContext context) {
return Column(
children: [
SizedBox(height: 20.0),
TabBarWidget(
selectedIndex: _selectedItemIndex,
tabItemDataList: _carouselIconsList,
onTap: (int index) {
setState(() {
// update the current selected index to be the index of the tab that was selected otherwise the selected tab wont change
_selectedItemIndex = index;
print(_selectedItemIndex);
});
}),
SizedBox(height: 20.0)
]);
}
}