I need selectable buttoon in flutter - flutter

Question

what i get_____whai i wantbut when i use ToggleButttons i cant change its shape(i need rounded), and cant put more distance beetwen buttons. Toggle button is list in which put icons. But how i can make selectabe(only one of thr buuton) without toggle like in exaple or with toglleButoon
class MyToggleButtonsState extends State<MyToggleButtons> {
List<bool> iSselected = List.generate(4,(index)=> false);
List<IconData> icon = [MyFlutterApp.mobile,Icons.computer,Icons.monitor_heart,Icons.collections_bookmark_sharp ];
#override
Widget build(BuildContext context) {
return ToggleButtons(
selectedColor: Colors.white,
renderBorder: false,
isSelected: iSselected,
fillColor: Colors.orange,
onPressed: (int newIndex) {
setState(() {
for(int index = 0; index < iSselected.length; index++){
if(index == newIndex){
iSselected[index] = true;
} else{
iSselected[index] = false;
}
}
});
},
children: [
CustomIcon(
radius: BorderRadius.circular(32.0),
isSelected: iSselected[0],
icon: const Icon(MyFlutterApp.mobile),
),
CustomIcon(
radius: BorderRadius.circular(32.0),
isSelected: iSselected[1],
icon: const Icon(Icons.computer)
),
CustomIcon(
radius: BorderRadius.circular(32.0),
isSelected: iSselected[2],
icon: const Icon(Icons.monitor_heart)
),
CustomIcon(
radius: BorderRadius.circular(32.0),
isSelected: iSselected[3],
icon: const Icon(Icons.collections_bookmark_sharp)
)
]
);[What i want][1][What i can][1]
}
}
Thank you very much

Answer 1

You can achieve this by doing the following!
class CustomPageWithToggle extends StatefulWidget {
const CustomPageWithToggle({Key? key}) : super(key: key);
#override
State<CustomPageWithToggle> createState() => _CustomPageWithToggleState();
}
class _CustomPageWithToggleState extends State<CustomPageWithToggle> {
List<bool> isSelected = List.generate(5, (index) => false);
List<IconData> icons = [Icons.phone_android, Icons.computer, Icons.monitor_heart, Icons.menu_book, Icons.fastfood];
List<String> texts = ['Phones', 'Computers', 'Health', 'Books', 'Food'];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Example'),
),
backgroundColor: const Color.fromARGB(255, 218, 218, 218),
body: Column(
children: [
const SizedBox(
height: 10,
),
CustomToggle(
icons: icons,
texts: texts,
setStateFunction: setState,
isSelected: isSelected,
),
// Put Your Content Here
],
),
);
}
}
class CustomToggle extends StatelessWidget {
final List<IconData> icons;
final List<String> texts;
final Function setStateFunction;
final List<bool> isSelected;
const CustomToggle({
Key? key,
required this.icons,
required this.texts,
required this.setStateFunction,
required this.isSelected,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return SingleChildScrollView(
// You should use this widget: SingleChildScrollView if your ToggleButtons are too long and overflow the screen.
// This makes it scrollable. If yours will not overflow, you can remove this widget.
scrollDirection: Axis.horizontal,
child: ToggleButtons(
isSelected: isSelected,
onPressed: (index) {
setStateFunction(() {
for (int i = 0; i < isSelected.length; i++) {
if (i == index) {
isSelected[i] = true;
} else {
isSelected[i] = false;
}
}
});
},
renderBorder: false,
fillColor: Colors.transparent,
splashColor: Colors.orange,
// Include other design properties if needed.
children: List<Widget>.generate(icons.length, (index) {
return CustomButton(
text: texts[index],
icondata: icons[index],
isSelected: isSelected[index],
);
}),
),
);
}
}
class CustomButton extends StatelessWidget {
final String text;
final IconData icondata;
final bool isSelected;
const CustomButton({
Key? key,
required this.text,
required this.icondata,
this.isSelected = false,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Column(
children: [
Container(
width: 70,
height: 70,
margin: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
decoration: BoxDecoration(
color: isSelected ? Colors.orange : Colors.white,
shape: BoxShape.circle,
),
child: Icon(
icondata,
color: isSelected ? Colors.white : Colors.grey,
),
),
const SizedBox(height: 10),
Text(
text,
style: TextStyle(
color: isSelected ? Colors.orange : Colors.grey,
),
),
],
);
}
}
Explanation:
Using the ToggleButtons widget is the right choice for this. But as you said, using the properties of ToggleButtons can't create the button design you want. Therefore you have to provide your own custom button to the ToggleButtons child propaties.
Also, one important change I made to your code is, your code has the state controlled in the MyToggleButtons. But, mine is controlled at the Parent Widget(CustomPageWithToggle) not the CustomToggle. Yours will also work for your Toggle button but, the widget outside(parent widget, etc) can't access the isSelected list (Which probably you may want to use outside the toggle button). Notice with my code that any widget inside CustomPageWithToggle can access the isSelected variable.
Result:
If you don't understand or have questions leave a comment and I'll answer!