flutterdartflutter-layouttabbar
Why doesn't the color change everywhere in the tabbar?
My task is to change the background to orange on click, the text under the icon to orange, and the icon to white. However, I only change the color of the text. Why?
my tabs -
return Tab(
height: 90,
child: Column(
children: [
Container(
width: 71,
height: 71,
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.circle
),
child: IconButton(onPressed: () {}, icon: Icon(iconName, size: 26, color: configColors.homeIcon,)),
),
FittedBox(
child: Text(header, style: TextStyle(fontFamily: "Mark-Pro", fontWeight: FontWeight.w500, fontSize: 15),),
)
],
),);
my tabbar -
TabBar(
isScrollable: true,
labelColor: configColors.orange,
unselectedLabelColor: configColors.darkBlue,
indicatorColor: Colors.transparent,
tabs: const [
Tabs('Phones', Icons.phone_iphone),
Tabs('Computer', Icons.computer),
Tabs('Health', Icons.monitor_heart_outlined),
Tabs('Books', Icons.menu_book),
Tabs('Watch', Icons.watch_later_outlined),
],
),
full code -
return Scaffold(
backgroundColor: configColors.bgHome,
body: Container(
margin: EdgeInsets.fromLTRB(17, 50, 33, 0),
child: SingleChildScrollView(
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
SizedBox(
width: 50,
),
Row(
children: [
IconButton(onPressed: () {}, icon: Icon(Icons.place_outlined, color: configColors.orange, size: 17,)),
Text('Zihuatanejo, Gro', style: TextStyle(
color: configColors.darkBlue,
fontFamily: "Mark-Pro",
fontSize: 15,
fontWeight: FontWeight.w500
),),
IconButton(onPressed: () {}, icon: Icon(Icons.expand_more, color: configColors.grey, size: 20,))
],
),
IconButton(onPressed: () {}, icon: Image.asset('assets/image/vector.png'))
],
),
Container(
margin: EdgeInsets.only(top: 18),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('Select Category', style: TextStyle(
color: configColors.darkBlue,
fontFamily: "Mark-Pro",
fontSize: 25,
fontWeight: FontWeight.w700
),),
TextButton(onPressed: () {}, child: Text('view all', style: TextStyle(
color: configColors.orange,
fontFamily: "Mark-Pro",
fontSize: 15,
fontWeight: FontWeight.w400
),))
],
),
),
Container(
child: DefaultTabController(
length: 5, // length of tabs
initialIndex: 0,
child: Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: <Widget>[
Container(
child: TabBar(
isScrollable: true,
labelColor: configColors.orange,
unselectedLabelColor: configColors.darkBlue,
indicatorColor: Colors.transparent,
tabs: const [
Tabs('Phones', Icons.phone_iphone),
Tabs('Computer', Icons.computer),
Tabs('Health', Icons.monitor_heart_outlined),
Tabs('Books', Icons.menu_book),
Tabs('Watch', Icons.watch_later_outlined),
],
),
),
// Container(
// margin: EdgeInsets.only(top: 35),
// child: Row(
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
// children: [
// TextField(
// decoration: InputDecoration(
// enabledBorder: OutlineInputBorder(
// borderSide:
// BorderSide(width: 3, color: Colors.greenAccent), //<-- SEE HERE
// borderRadius: BorderRadius.circular(50.0),
// ),
// ),
// ),
// ],
// ),
// ),
Container(
height: 400, //height of TabBarView
decoration: BoxDecoration(
border: Border(top: BorderSide(color: Colors.grey, width: 0.5))
),
child: TabBarView(children: <Widget>[
Container(
child: Center(
child: Text('Display Tab 1', style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
),
),
Container(
child: Center(
child: Text('Display Tab 2', style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
),
),
Container(
child: Center(
child: Text('Display Tab 3', style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
),
),
Container(
child: Center(
child: Text('Display Tab 4', style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
),
),
Container(
child: Center(
child: Text('Display Tab 5', style: TextStyle(
fontSize: 22, fontWeight: FontWeight.bold)),
),
)])
)
])
),
),
],
),
)
),
);
}
}
class Tabs extends StatelessWidget {
final String header;
final IconData iconName;
const Tabs(this.header, this.iconName);
@override
Widget build(BuildContext context) {
return Tab(
height: 90,
child: Column(
children: [
Container(
width: 71,
height: 71,
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.circle
),
child: IconButton(onPressed: () {}, icon: Icon(iconName, size: 26, color: configColors.homeIcon,)),
),
FittedBox(
child: Text(header, style: TextStyle(fontFamily: "Mark-Pro", fontWeight: FontWeight.w500, fontSize: 15),),
)
],
),);
}
Solution
There is a way to determine if it was triggered by using the index value at the time of tapping.
class _HomeState extends State<Home> {
List<bool> _selected = [true, false, false, false];
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white70,
appBar: AppBar(),
body: DefaultTabController(
length: 4,
child: TabBar(
isScrollable: true,
labelColor: Colors.orange,
unselectedLabelColor: Colors.blueGrey,
indicatorColor: Colors.transparent,
onTap: (index) => _selectedState(index),
tabs: [
Tabs('Phones', Icons.phone_iphone, 0),
Tabs('Computer', Icons.computer, 1),
Tabs('Books', Icons.menu_book, 2),
Tabs('Watch', Icons.watch_later_outlined, 3),
],
),
),
);
}
Widget Tabs(String header, IconData iconName, int index) {
return Tab(
height: 90,
child: Column(
children: [
Container(
width: 71,
height: 71,
decoration:
BoxDecoration(color: _selected[index] == true ? Colors.orange : Colors.white, shape: BoxShape.circle),
child: IconButton(
onPressed: () {},
icon: Icon(
iconName,
size: 26,
color: Colors.grey,
)),
),
FittedBox(
child: Text(
header,
style: TextStyle(
fontFamily: "Mark-Pro",
fontWeight: FontWeight.w500,
fontSize: 15),
),
)
],
),
);
}
_selectedState(int index) {
setState(() {
switch (index) {
case 0:
_selected[0] = true;
_selected[1] = false;
_selected[2] = false;
_selected[3] = false;
break;
case 1:
_selected[0] = false;
_selected[1] = true;
_selected[2] = false;
_selected[3] = false;
break;
case 2:
_selected[0] = false;
_selected[1] = false;
_selected[2] = true;
_selected[3] = false;
break;
case 3:
_selected[0] = false;
_selected[1] = false;
_selected[2] = false;
_selected[3] = true;
break;
default:
_selected[0] = true;
_selected[1] = false;
_selected[2] = false;
_selected[3] = false;
}
});
}
}