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),),
)
],
),);
}
CodePudding user response：
You can try below named parameter by assigning color in Tabbar widget.
indicatorColor: Colors.orange,
CodePudding user response：
Use TabController to track the selected tap, and play with the color decoration by passing active index.
class FAG extends StatefulWidget {
FAG({Key? key}) : super(key: key);
@override
State<FAG> createState() => _FAGState();
}
class _FAGState extends State<FAG> with SingleTickerProviderStateMixin {
late final TabController controller = TabController(length: 5, vsync: this)
..addListener(() {
setState(() {});
});
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.pink,
body: Container(
margin: EdgeInsets.fromLTRB(17, 50, 33, 0),
child: SingleChildScrollView(
child: Column(
children: [
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
child: TabBar(
controller: controller,
isScrollable: true,
labelColor: Colors.orange,
unselectedLabelColor: Colors.blueGrey,
indicatorColor: Colors.transparent,
tabs: [
Tabs(
'Phones',
Icons.phone_iphone,
isActive: controller.index == 0,
),
Tabs(
'Computer',
Icons.computer,
isActive: controller.index == 1,
),
Tabs(
'Health',
Icons.monitor_heart_outlined,
isActive: controller.index == 2,
),
Tabs(
'Books',
Icons.menu_book,
isActive: controller.index == 3,
),
Tabs(
'Watch',
Icons.watch_later_outlined,
isActive: controller.index == 4,
),
],
),
),
Container(
height: 400, //height of TabBarView
decoration: BoxDecoration(
border: Border(
top: BorderSide(
color: Colors.grey, width: 0.5))),
child: TabBarView(
controller: controller,
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;
final bool isActive;
const Tabs(this.header, this.iconName, {required this.isActive, super.key});
@override
Widget build(BuildContext context) {
return Tab(
icon: Container(
width: 71,
height: 71,
decoration: BoxDecoration(
color: isActive ? Colors.white : Colors.amber,
shape: BoxShape.circle),
child: IconButton(
onPressed:null,//dont need this
icon: Icon(
iconName,
size: 26,
color: isActive ? Colors.amber : Colors.white,
)),
),
height: 97,
text: header,
);
}
}
CodePudding user response：
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;
}
});
}
}