I want to change the color of the text in the elevated button when they are selected from black to white. For now, if I select any option from these elevated buttons, the background color changes, but there is no change in the text color. But I want to change the text color as well. Here is a sample image of my current code. Can anyone help me out with this one, please?
Here is my current code of this part -
class property_selection extends StatefulWidget {
const property_selection({Key? key}) : super(key: key);
@override
_property_selectionState createState() => _property_selectionState();
}
int index = -1;
Color enableColor = Colors.red; //your color
Color disableColor = Colors.white; //your color
class _property_selectionState extends State<property_selection> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Center(
child: ListView(
shrinkWrap: true,
children: <Widget>[
Container(
margin: EdgeInsets.fromLTRB(0, 0, 0, 0),
child: Text(
'Select your class',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.red,
fontWeight: FontWeight.w500,
fontSize: 30),
),
),
SizedBox(
height: 15.0,
),
Container(
margin: EdgeInsets.fromLTRB(75, 0, 75, 0),
padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
height: 60.0,
child: ElevatedButton(
onPressed: () {
setState(() {
index = 0;
});
},
child: SizedBox(
width: double.infinity,
child: Text(
'Clas 01',
textAlign: TextAlign.left,
),
),
style: ElevatedButton.styleFrom(
side: BorderSide(width: 2.5, color: Colors.grey),
primary: index == 0 ? Colors.red : Colors.white,
onPrimary: Colors.black,
textStyle: const TextStyle(
fontSize: 15,
)),
),
),
SizedBox(
height: 10.0,
),
Container(
margin: EdgeInsets.fromLTRB(75, 0, 75, 0),
padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
height: 60.0,
child: ElevatedButton(
onPressed: () {
setState(() {
index = 1;
});
},
child: SizedBox(
width: double.infinity,
child: Text(
'Clas 02',
textAlign: TextAlign.left,
),
),
style: ElevatedButton.styleFrom(
side: BorderSide(width: 2.5, color: Colors.grey),
primary: index == 1 ? Colors.red : Colors.white,
onPrimary: Colors.black,
textStyle: const TextStyle(
fontSize: 15,
)),
),
),
SizedBox(
height: 10.0,
),
Container(
margin: EdgeInsets.fromLTRB(75, 0, 75, 0),
padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
height: 60.0,
child: ElevatedButton(
onPressed: () {
setState(() {
index = 2;
});
},
child: SizedBox(
width: double.infinity,
child: Text(
'Clas 03',
textAlign: TextAlign.left,
),
),
style: ElevatedButton.styleFrom(
side: BorderSide(width: 2.5, color: Colors.grey),
primary: index == 2 ? Colors.red : Colors.white,
onPrimary: Colors.black,
onSurface: Colors.white,
textStyle: const TextStyle(
fontSize: 15,
)),
),
),
SizedBox(
height: 10.0,
),
Container(
margin: EdgeInsets.fromLTRB(75, 0, 75, 0),
height: 50,
padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
child: ElevatedButton(
child: Text('Next'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => customer_name()),
);
},
),
),
],
),
),
),
);
}
}
CodePudding user response：
Change onPrimary: color on ElevatedButton.styleFrom based on condition like
onPrimary: index == 2 ? Colors.white : Colors.black, it is for Clas 03 button, do the same with changing index==classIndex for others two
Full Widget
class property_selection extends StatefulWidget {
const property_selection({Key? key}) : super(key: key);
@override
_property_selectionState createState() => _property_selectionState();
}
int index = -1;
Color enableColor = Colors.red; //your color
Color disableColor = Colors.white; //your color
class _property_selectionState extends State<property_selection> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Center(
child: ListView(
shrinkWrap: true,
children: <Widget>[
Container(
margin: EdgeInsets.fromLTRB(0, 0, 0, 0),
child: Text(
'Select your class',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.red,
fontWeight: FontWeight.w500,
fontSize: 30),
),
),
SizedBox(
height: 15.0,
),
Container(
margin: EdgeInsets.fromLTRB(75, 0, 75, 0),
padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
height: 60.0,
child: ElevatedButton(
onPressed: () {
setState(() {
index = 0;
});
},
child: SizedBox(
width: double.infinity,
child: Text(
'Clas 01',
textAlign: TextAlign.left,
// style: TextStyle(
// color: index == 0 ? Colors.white : Colors.black,
// ),
),
),
style: ElevatedButton.styleFrom(
side: BorderSide(width: 2.5, color: Colors.grey),
primary: index == 0 ? Colors.red : Colors.white,
onPrimary: index == 0 ? Colors.white : Colors.black,
textStyle: const TextStyle(
fontSize: 15,
)),
),
),
SizedBox(
height: 10.0,
),
Container(
margin: EdgeInsets.fromLTRB(75, 0, 75, 0),
padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
height: 60.0,
child: ElevatedButton(
onPressed: () {
setState(() {
index = 1;
});
},
child: SizedBox(
width: double.infinity,
child: Text(
'Clas 02',
textAlign: TextAlign.left,
),
),
style: ElevatedButton.styleFrom(
side: BorderSide(width: 2.5, color: Colors.grey),
primary: index == 1 ? Colors.red : Colors.white,
onPrimary: index == 1? Colors.white : Colors.black,
textStyle: const TextStyle(
fontSize: 15,
)),
),
),
SizedBox(
height: 10.0,
),
Container(
margin: EdgeInsets.fromLTRB(75, 0, 75, 0),
padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
height: 60.0,
child: ElevatedButton(
onPressed: () {
setState(() {
index = 2;
});
},
child: SizedBox(
width: double.infinity,
child: Text(
'Clas 03',
textAlign: TextAlign.left,
),
),
style: ElevatedButton.styleFrom(
side: BorderSide(width: 2.5, color: Colors.grey),
primary: index == 2 ? Colors.red : Colors.white,
onPrimary: index == 2 ? Colors.white : Colors.black,
onSurface: Colors.white,
textStyle: const TextStyle(
fontSize: 15,
)),
),
),
SizedBox(
height: 10.0,
),
Container(
margin: EdgeInsets.fromLTRB(75, 0, 75, 0),
height: 50,
padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
child: ElevatedButton(
child: Text('Next'),
onPressed: () {
// Navigator.push(
// context,
// MaterialPageRoute(builder: (context) => customer_name()),
// );
},
),
),
],
),
),
),
);
}
}