touchkit 0.0.2

A library that contains universal widgets and base classes for building custom widgets.

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

}