touchkit

Description:

touchkit

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)
]);
}

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

}

copied to clipboard

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter