По моему дизайну невыбранная вкладка должна иметь другой цвет фона. Все решения, которые были предложены ранее, охватывают случай, когда все TabBar имеют один и тот же цвет, но я хочу, чтобы были заданы c цвет и форма для невыбранного Tab. Есть ли какое-то решение для этого?
[требуемый дизайн:] https://i.stack.imgur.com/HEc4Y.png
Вот пример кода.
Widget build(BuildContext context) {
return Container(
child: DefaultTabController(
length: 2,
child: Scaffold(
extendBody: true,
floatingActionButton: FloatingActionButton(
backgroundColor: Theme.of(context).primaryColor,
onPressed: () {},
child: Icon(
Icons.add,
color: Colors.white,
)),
floatingActionButtonLocation:
FloatingActionButtonLocation.centerFloat,
appBar: PreferredSize(
preferredSize: Size.fromHeight(120.0), // here the desired height
child: Header(
title: NoomeeLocalizations.of(context).trans("Social stories"),
onSubmit: () {
// _scaffoldKey.currentState.openEndDrawer();
setState(() {});
},
preferredSizeWidget: TabBar(
controller: tabController,
labelColor: Colors.grey,
labelStyle: TextStyle(fontWeight: FontWeight.bold),
unselectedLabelColor: Colors.white,
indicatorSize: TabBarIndicatorSize.label,
indicator: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.grey[100],
blurRadius: 15, // soften the shadow
spreadRadius: 1.0, //extend the shadow
offset: Offset.fromDirection(
10.0, // Move to right 10 horizontally
0.0, // Move to bottom 10 Vertically
),
)
],
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10),
topRight: Radius.circular(10)),
color: Colors.grey[200],
),
tabs: [
Tab(
child: Align(
alignment: Alignment.center,
child: Text(NoomeeLocalizations.of(context)
.trans('My Stories')),
),
),
Tab(
child: Align(
alignment: Alignment.center,
child: Text(
NoomeeLocalizations.of(context).trans('Database')),
),
),
]),
),
)
[1]: https://i.stack.imgur.com/HEc4Y.png