У меня есть функция панели вкладок, в которой я показываю диаграмму пончика и список транспортных средств, но мне нужно показать, какую вкладку выбрал для этого пользователь. У меня есть indicatorColor в TabBar, но мне нужно заполнить линией градиента, как показано на изображении, пожалуйста, помогите мне вне.
PS: Если возможно, дайте мне знать, как задать основной цвет темы в основном как градиент ???
return Scaffold(
body: new DefaultTabController(
length: 2,
child: new Column(
children: <Widget>[
new Container(
width: 1200.0,
child: new Container(
color: Colors.white,
child: new TabBar(
labelColor: Colors.black,
tabs: [
Tab(
child: new Text("Visual",
style: new TextStyle(fontSize: 20.0)
),
),
Tab(
child: new Text("Tabular",
style: new TextStyle(fontSize: 20.0)),
),
],
),
),
),
new Expanded(
child: new TabBarView(
children: [
Tab(
child: new RefreshIndicator(
child: new Text('DONUT CHART'),
onRefresh: refreshList,
key: refreshKey1,
),
),
Tab(
child: new RefreshIndicator(
child: new Text('List of vehicles'),
onRefresh: refreshList,
key: refreshKey2,
),
),
],
),
),
],
),
),
);
2 ответа
Я думаю, что единственный способ - создать свой собственный TabBar. Вы можете скопировать код TabBar из tabs.dart, а в _TabBarState вы должны изменить Decoration get _indicator.
Что-то вроде:
return ShapeDecoration(shape: UnderlineInputBorder(), gradient: LinearGradient(
colors: [Colors.blue, Colors.green]));
< Сильный > UPD :
Понял. ShapeDecoration не работает. С его помощью я могу установить градиент для всей вкладки. Для подчеркивания - в этом же файле есть класс _IndicatorPainter. И есть метод этого класса Rect indicatorRect.
return Rect.fromLTWH(tabLeft, 0.0, tabRight - tabLeft, tabBarSize.height);
Эта строка возвращает прямоугольник для украшения. Если его изменить - можно получить подчеркивание:
return Rect.fromLTWH(tabLeft, tabBarSize.height - 4.0, tabRight - tabLeft, 4.0);
И внутри Decoration get _indicator не забудьте заменить return UnderlineTabIndicator на
return ShapeDecoration(shape: RoundedRectangleBorder(), gradient: LinearGradient(
colors: [Colors.blue, Colors.green]));
И вот результат 
Вместо того, чтобы менять основные файлы, это лучший ответ, который сработал для меня.
TabBar(
controller: tabController,
indicatorPadding: EdgeInsets.all(0.0),
indicatorWeight: 4.0,
labelPadding: EdgeInsets.only(left: 0.0, right: 0.0),
indicator: ShapeDecoration(
shape: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.transparent,
width: 4.0,
style: BorderStyle.solid)),
gradient: LinearGradient(colors: [pinkLight, pinkDark])),
tabs: <Widget>[
Center(
child: Container(
alignment: Alignment.center,
color: whiteColor,
child: Text(
"Rating",
style: themeData.accentTextTheme.title,
),
),
),
Container(
alignment: Alignment.center,
color: whiteColor,
child: Text(
"Category",
style: themeData.accentTextTheme.title,
),
),
Container(
alignment: Alignment.center,
color: whiteColor,
child: Text(
"Friend",
style: themeData.accentTextTheme.title,
),
),
],
),
Сделайте заполнение индикатора равным нулю, заполнение метки равным нулю, а индикаторВес индикатора - 4.0 или ваш требуемый размер, после этого вместо использования текста во вкладках используйте Контейнер вверху и придайте ему цвет.