Created
July 13, 2017 15:41
-
-
Save alardizabal/5dd5870628d8240da2af1259c8987bc7 to your computer and use it in GitHub Desktop.
Setting letterSpacing in a TextStyle makes text label in Tab off-center
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/material.dart'; | |
void main() { | |
runApp(new MaterialApp( | |
home: new MyHomePage(), | |
)); | |
} | |
class TabbedPage extends StatefulWidget { | |
TabbedPage({ Key key, this.pageIndex, this.tabCount }) : super(key: key); | |
final int pageIndex; | |
final int tabCount; | |
_TabbedPageState createState() => new _TabbedPageState(); | |
} | |
class _TabbedPageState extends State<TabbedPage> with TickerProviderStateMixin { | |
TabController _tabController; | |
@override | |
void initState() { | |
_tabController = new TabController( | |
length: widget.tabCount, | |
vsync: this, | |
initialIndex: PageStorage.of(context).readState(context) ?? 0, | |
)..addListener(() { | |
PageStorage.of(context).writeState(context, _tabController.index); | |
}); | |
super.initState(); | |
} | |
Widget build(BuildContext context) { | |
return new Column( | |
children: <Widget>[ | |
new Container( | |
color: Theme.of(context).primaryColor, | |
child: new TabBar( | |
indicatorColor: Colors.red, | |
indicatorWeight: 5.0, | |
labelStyle: const TextStyle( | |
letterSpacing: 5.0, | |
), | |
indicatorPadding: const EdgeInsets.symmetric(horizontal: 12.0), | |
key: new PageStorageKey<Type>(TabBar), | |
controller: _tabController, | |
isScrollable: true, | |
tabs: new List<Tab>.generate(widget.tabCount, (int tabIndex) { | |
return new Tab( | |
text: 'AL', | |
); | |
}), | |
), | |
), | |
new Expanded( | |
child: new TabBarView( | |
key: new PageStorageKey<Type>(TabBarView), | |
controller: _tabController, | |
children: new List<Widget>.generate(widget.tabCount, (int tabIndex) { | |
return new Center( | |
child: new Text('View ${widget.pageIndex}-${tabIndex}'), | |
); | |
}), | |
), | |
), | |
], | |
); | |
} | |
} | |
class MyHomePage extends StatefulWidget { | |
_MyHomePageState createState() => new _MyHomePageState(); | |
} | |
const List<int> tabCounts = const <int>[13, 17, 21]; | |
class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin { | |
PageController _controller = new PageController(); | |
Widget build(BuildContext context) { | |
return new PageView( | |
controller: _controller, | |
children: new List<Widget>.generate(tabCounts.length, (int index) { | |
return new Scaffold( | |
appBar: new AppBar( | |
title: new Text('Page $index'), | |
), | |
body: new TabbedPage( | |
key: new PageStorageKey<int>(index), | |
pageIndex: index, | |
tabCount: tabCounts[index], | |
), | |
); | |
}), | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment