Skip to content

Instantly share code, notes, and snippets.


Afonsocraposo/main.dart Secret

Last active Aug 11, 2019
What would you like to do?
Body of the app
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Button Tabs (IOS Style)'),
backgroundColor: Colors.white,
body: Column(children: <Widget>[
// this is the TabBar
height: 49.0,
// this generates our tabs buttons
child: ListView.builder(
// this gives the TabBar a bounce effect when scrolling farther than it's size
physics: BouncingScrollPhysics(),
controller: _scrollController,
// make the list horizontal
scrollDirection: Axis.horizontal,
// number of tabs
itemCount: _icons.length,
itemBuilder: (BuildContext context, int index) {
return Padding(
// each button's key
key: _keys[index],
// padding for the buttons
padding: EdgeInsets.all(6.0),
child: ButtonTheme(
child: AnimatedBuilder(
animation: _colorTweenBackgroundOn,
builder: (context, child) => FlatButton(
// get the color of the button's background (dependent of its state)
color: _getBackgroundColor(index),
// make the button a rectangle with round corners
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(7.0)),
onPressed: () {
setState(() {
_buttonTap = true;
// trigger the controller to change between Tab Views
// set the current index
// scroll to the tapped button (needed if we tap the active button and it's not on its position)
child: Icon(
// get the icon
// get the color of the icon (dependent of its state)
color: _getForegroundColor(index),
// this will host our Tab Views
child: TabBarView(
// and it is controlled by the controller
controller: _controller,
children: <Widget>[
// our Tab Views
_getBackgroundColor(int index) {
if (index == _currentIndex) {
// if it's active button
return _colorTweenBackgroundOn.value;
} else if (index == _prevControllerIndex) {
// if it's the previous active button
return _colorTweenBackgroundOff.value;
} else {
// if the button is inactive
return _backgroundOff;
_getForegroundColor(int index) {
// the same as the above
if (index == _currentIndex) {
return _colorTweenForegroundOn.value;
} else if (index == _prevControllerIndex) {
return _colorTweenForegroundOff.value;
} else {
return _foregroundOff;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment