Flutter How to make 3 buttons only radio selectable? - flutter

Question

I have created a row of 3 buttons and each of them will change the color independently when clicked, each button works independently which means you could make all buttons clicked, but what i want to achieve is that i can only make one button clicked at one time, which means if i click button 2 after clicking button1, button2 will change the state to clicked, and button1 will change the state to unclicked, just like radio buttons. How can this can be done?
Below is the code of the buttons
class _MyHomePageBodyState extends State<MyHomePageBody> {
#override
Widget build(BuildContext context) {
return Container(
child: Row(
children: [
Dis(),
SizedBox(width:5),
Price(),
SizedBox(width:5),
New(),
],
),
);
}
}
class Gcolor {
static Color background1 = Colors.white;
static Color font1 = Colors.blue;
static Color background2 = Colors.white;
static Color font2 = Colors.blue;
static Color background3 = Colors.white;
static Color font3 = Colors.blue;
static int times2=0;
static int times3=0;
static var pressed =true;
}
class Dis extends StatefulWidget {
const Dis({Key? key,}) : super(key: key);
#override
State<Dis> createState() => _DisState();
}
class _DisState extends State<Dis> {
var clicked=false;
#override
Widget build(BuildContext context) {
return Expanded(
child: ElevatedButton(
style: ButtonStyle(
side:MaterialStateProperty.all(BorderSide(color: Colors.blue),),
backgroundColor: MaterialStateProperty.all(Gcolor.background1),
foregroundColor: MaterialStateProperty.all(Gcolor.font1),
),
onPressed: (){
setState((){
clicked=!clicked;
if(clicked){
Gcolor.background1=Colors.blue;
Gcolor.font1=Colors.white;
}
else{
Gcolor.background1=Colors.white;
Gcolor.font1=Colors.blue;
}
});
},
child: Row(
children: [
Text("距離 "),
Icon(Icons.add_location_outlined,
size: 20,),
],
)
),
);
}
}
class Price extends StatefulWidget {
const Price({Key? key}) : super(key: key);
#override
State<Price> createState() => _PriceState();
}
class _PriceState extends State<Price> {
#override
Widget build(BuildContext context) {
return Expanded(
child: ElevatedButton(
style: ButtonStyle(
side:MaterialStateProperty.all(BorderSide(color: Colors.blue),),
backgroundColor: MaterialStateProperty.all(Gcolor.background2),
foregroundColor: MaterialStateProperty.all(Gcolor.font2),
),
onPressed: (){
setState((){
if(Gcolor.pressed){
Gcolor.times2++;
if(Gcolor.times2%3==1){
Gcolor.background2=Colors.blue;
Gcolor.font2=Colors.white;
}
else if(Gcolor.times2%3==2){
Gcolor.background2=Colors.blue;
Gcolor.font2=Colors.white;
}
else if(Gcolor.times2%3==0){
Gcolor.background2=Colors.white;
Gcolor.font2=Colors.blue;
}
}
});
},
child: Row(
children: [
Text("價格"),
Icon(Icons.attach_money_outlined,
size: 15,),
if(Gcolor.times2%3==1 )
Icon(Icons.arrow_downward,size: 15,color: Colors.yellow,),
if(Gcolor.times2%3==2 )
Icon(Icons.arrow_upward,size: 15,color: Colors.yellow,)
],
)
),
);
}
}
class New extends StatefulWidget {
const New({Key? key}) : super(key: key);
#override
State<New> createState() => _NewState();
}
class _NewState extends State<New> {
#override
Widget build(BuildContext context) {
return Expanded(
child: ElevatedButton(
style: ButtonStyle(
side:MaterialStateProperty.all(BorderSide(color: Colors.blue),),
backgroundColor: MaterialStateProperty.all(Gcolor.background3),
foregroundColor: MaterialStateProperty.all(Gcolor.font3),
),
onPressed: (){
setState((){
Gcolor.times3++;
if(Gcolor.times3%3==1){
Gcolor.background3=Colors.blue;
Gcolor.font3=Colors.white;
}
else if(Gcolor.times3%3==2){
Gcolor.background3=Colors.blue;
Gcolor.font3=Colors.white;
}
else if(Gcolor.times3%3==0){
Gcolor.background3=Colors.white;
Gcolor.font3=Colors.blue;
}
});
},
child: Row(
children: [
Text("最新"),
Icon(Icons.access_time,
size:15 ,),
if(Gcolor.times3%3==1 )
Icon(Icons.arrow_downward,size: 15,color: Colors.yellow,),
if(Gcolor.times3%3==2 )
Icon(Icons.arrow_upward,size: 15,color: Colors.yellow,)
],
)
),
);
}
}

Answer 1

I have updated your code to manage it to radio button. For price and new classes, I don't find any proper selection there. So just put it in initstate and you can change color based on selection.
Button classes:
class Dis extends StatefulWidget {
Dis({required this.isSelected, required this.onClicked, Key? key,}) : super(key: key);
Function() onClicked;
bool isSelected;
#override
State<Dis> createState() => _DisState();
}
class _DisState extends State<Dis> {
#override
Widget build(BuildContext context) {
return Expanded(
child: ElevatedButton(
style: ButtonStyle(
side:MaterialStateProperty.all(BorderSide(color: Colors.blue),),
backgroundColor: MaterialStateProperty.all(widget.isSelected ? Colors.blue : Colors.white),
foregroundColor: MaterialStateProperty.all(widget.isSelected ? Colors.white : Colors.blue),
),
onPressed: (){
widget.onClicked();
},
child: Row(
children: [
Text("距離 "),
Icon(Icons.add_location_outlined,
size: 20,),
],
)
),
);
}
}
class Price extends StatefulWidget {
Price({required this.isSelected, required this.onClicked,Key? key}) : super(key: key);
Function() onClicked;
bool isSelected;
#override
State<Price> createState() => _PriceState();
}
class _PriceState extends State<Price> {
#override
void initState() {
super.initState();
if(widget.isSelected){
Gcolor.times2++;
if(Gcolor.times2%3==1){
Gcolor.background2=Colors.blue;
Gcolor.font2=Colors.white;
}
else if(Gcolor.times2%3==2){
Gcolor.background2=Colors.blue;
Gcolor.font2=Colors.white;
}
else if(Gcolor.times2%3==0){
Gcolor.background2=Colors.white;
Gcolor.font2=Colors.blue;
}
}
}
#override
Widget build(BuildContext context) {
return Expanded(
child: ElevatedButton(
style: ButtonStyle(
side:MaterialStateProperty.all(BorderSide(color: Colors.blue),),
backgroundColor: MaterialStateProperty.all(Gcolor.background2),
foregroundColor: MaterialStateProperty.all(Gcolor.font2),
),
onPressed: (){
widget.onClicked();
},
child: Row(
children: [
Text("價格"),
Icon(Icons.attach_money_outlined,
size: 15,),
if(Gcolor.times2%3==1 )
Icon(Icons.arrow_downward,size: 15,color: Colors.yellow,),
if(Gcolor.times2%3==2 )
Icon(Icons.arrow_upward,size: 15,color: Colors.yellow,)
],
)
),
);
}
}
class New extends StatefulWidget {
New({required this.isSelected, required this.onClicked,Key? key}) : super(key: key);
Function() onClicked;
bool isSelected;
#override
State<New> createState() => _NewState();
}
class _NewState extends State<New> {
#override
void initState() {
super.initState();
Gcolor.times3++;
if(Gcolor.times3%3==1){
Gcolor.background3=Colors.blue;
Gcolor.font3=Colors.white;
}
else if(Gcolor.times3%3==2){
Gcolor.background3=Colors.blue;
Gcolor.font3=Colors.white;
}
else if(Gcolor.times3%3==0){
Gcolor.background3=Colors.white;
Gcolor.font3=Colors.blue;
}
}
#override
Widget build(BuildContext context) {
return Expanded(
child: ElevatedButton(
style: ButtonStyle(
side:MaterialStateProperty.all(BorderSide(color: Colors.blue),),
backgroundColor: MaterialStateProperty.all(Gcolor.background3),
foregroundColor: MaterialStateProperty.all(Gcolor.font3),
),
onPressed: (){
widget.onClicked();
},
child: Row(
children: [
Text("最新"),
Icon(Icons.access_time,
size:15 ,),
if(Gcolor.times3%3==1 )
Icon(Icons.arrow_downward,size: 15,color: Colors.yellow,),
if(Gcolor.times3%3==2 )
Icon(Icons.arrow_upward,size: 15,color: Colors.yellow,)
],
)
),
);
}
}
class Gcolor {
static Color background1 = Colors.white;
static Color font1 = Colors.blue;
static Color background2 = Colors.white;
static Color font2 = Colors.blue;
static Color background3 = Colors.white;
static Color font3 = Colors.blue;
static int times2=0;
static int times3=0;
static var pressed =true;
}
Row:
Row(
children: [
Dis(isSelected: _selectedIndex == 0, onClicked: (){
setState((){
_selectedIndex = 0;
});
}),
SizedBox(width:5),
Price(isSelected: _selectedIndex == 1, onClicked: (){
setState((){
_selectedIndex = 1;
});
}),
SizedBox(width:5),
New(isSelected: _selectedIndex == 2, onClicked: (){
setState((){
_selectedIndex = 2;
});
}),
],
)
Please let me know if this don't work for you.