Я пытаюсь создать панель вкладок во флаттере следующим образом:
TabController _controller;
int _selectedIndex = 0;
List<Widget> list = [
Tab(
icon: Image.asset(
'images/dollar_world_grid_selected.png',
width: 50.0,
height: 50.0,
),
child: Text(
"Currency",
style: TextStyle(color: Color.fromRGBO(127, 127, 127, 0.4)),
),
),
Tab(
icon: Image.asset(
'images/gold-bars.png',
width: 50.0,
height: 50.0,
),
child: Text(
"Gold",
style: TextStyle(color: Color.fromRGBO(127, 127, 127, 0.4)),
)),
];
@override
void initState() {
super.initState();
// Create TabController for getting the index of current tab
_controller = TabController(length: list.length, vsync: this);
_controller.addListener(() {
setState(() {
_selectedIndex = _controller.index;
list = [
Tab(
icon: Image.asset(
_selectedIndex == 0
? 'images/dollar_world_grid_selected.png'
: 'images/dollar_world_grid.png',
width: 50.0,
height: 50.0,
),
child: Text(
"Currency",
style: TextStyle(color: Color.fromRGBO(127, 127, 127, 0.4)),
),
),
Tab(
icon: Image.asset(
_selectedIndex == 1
? 'images/gold-bars-selected.png'
: 'images/gold-bars.png',
width: 50.0,
height: 50.0,
),
child: Text(
"Gold",
style: TextStyle(color: Color.fromRGBO(127, 127, 127, 0.4)),
)),
];
});
});
}
@override
Widget build(BuildContext context) {
// This method is rerun every time setState is called, for instance as done
// by the _incrementCounter method above.
//
// The Flutter framework has been optimized to make rerunning build methods
// fast, so that you can just rebuild anything that needs updating rather
// than having to individually change instances of widgets.
return Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(200.0), // here the desired height
child: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Row(children: <Widget>[
Image.asset(
'images/logobig.png',
width: 50.0,
height: 50.0,
),
Text(widget.title),
]),
backgroundColor: Colors.blue,
bottom: TabBar(
controller: _controller,
indicatorColor: Color.fromRGBO(43, 73, 193, 0.4),
tabs: list,
),
)),
body: TabBarView(controller: _controller, children: [
]));
Как видите, каждая вкладка содержит значок и текст под ним. К сожалению, вывод следующий:
Как вы можете видеть, текст не отображается, и я получаю нижнее переполнение на 4 пикселя. Любая идея о том, как отобразить значок и текст под значком на каждой вкладке с ошибкой? Спасибо.





Просто оберните виджеты Tab с помощью SizedBox или Container и установите высоту 80 или больше. :)
Уменьшить 4px от вас Tab Подобные изображения
Image.asset(
'images/gold-bars.png',
width: 46.0,
height: 46.0,
)
Увеличить высоту виджета панели вкладок на 4 пикселя
appBar: PreferredSize(
preferredSize: Size.fromHeight(204.0), // change 200 to 204
child: AppBar(
//your code