I wanted to create a page in my app using the Flutter where people can select from the options that I created using text buttons. The current result of my code is given below in the image. But I want to make it like that - after selecting one text button the background color of the button and the text color will be changed to something else. And unless the Next button is not selected, it will remain colored in that way. Is this possible using flutter? If it is, can you please help me with how to do it?
Added Text buttons in Flutter-example
My Code -
class property_selection extends StatefulWidget {
const property_selection({Key? key}) : super(key: key);
@override
_property_selectionState createState() => _property_selectionState();
}
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: TextButton(
onPressed: () {},
child: SizedBox(
width: double.infinity,
child: Text(
'Class 01',
textAlign: TextAlign.left,
),
),
style: ButtonStyle(
side: MaterialStateProperty.all(
BorderSide(width: 2, color: Colors.grey),
),
backgroundColor: MaterialStateProperty.all(Colors.white),
foregroundColor: MaterialStateProperty.all(Colors.black),
padding: MaterialStateProperty.all(
EdgeInsets.symmetric(vertical: 10, horizontal: 50)),
textStyle: MaterialStateProperty.all(
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: TextButton(
onPressed: () {},
child: SizedBox(
width: double.infinity,
child: Text(
'Class 02',
textAlign: TextAlign.left,
),
),
style: ButtonStyle(
side: MaterialStateProperty.all(
BorderSide(width: 2, color: Colors.grey),
),
foregroundColor: MaterialStateProperty.all(Colors.black),
padding: MaterialStateProperty.all(
EdgeInsets.symmetric(vertical: 10, horizontal: 50)),
textStyle: MaterialStateProperty.all(
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: TextButton(
onPressed: () {},
child: SizedBox(
width: double.infinity,
child: Text(
'Clas 03',
textAlign: TextAlign.left,
),
),
style: ButtonStyle(
side: MaterialStateProperty.all(
BorderSide(width: 2, color: Colors.grey),
),
foregroundColor: MaterialStateProperty.all(Colors.black),
padding: MaterialStateProperty.all(
EdgeInsets.symmetric(vertical: 10, horizontal: 50)),
textStyle: MaterialStateProperty.all(
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：
int index = -1
Color enableColor = //your color
Color disableColor = //your color
onPressed: () {
//onPressed for button 1
setState((){
index = 0;
});
},
onPressed: () {
//onPressed for button 2
setState((){
index = 1;
});
},
onPressed: () {
//onPressed for button 3
setState((){
index = 2;
});
},
now set color in your widget
color: index == 0 ? enableColor : disableColor //this is for 1 button color
color: index == 1 ? enableColor : disableColor //this is for 2 button color
color: index == 2 ? enableColor : disableColor //this is for 3 button color