How to make Single Selectable custom button in Flutter - flutter

Question

I am new in Flutter Development, I am practicing on an app of Airline Booking where user have to select a cabin of Airplane through tapping a button. So, I don't know the type of mentioned buttons and background functions, could anyone like to help me?
import 'package:flutter/material.dart';
class MyToogleButtons extends StatefulWidget {
const MyToogleButtons({Key? key}) : super(key: key);
#override
State<MyToogleButtons> createState() => _MyToogleButtonsState();
}
class _MyToogleButtonsState extends State<MyToogleButtons> {
List<bool> isSelected = [true, false, false];
#override
Widget build(BuildContext context) {
return ToggleButtons(
fillColor: Theme.of(context).primaryColor,
borderColor: Theme.of(context).primaryColor,
direction: Axis.horizontal,
isSelected: isSelected,
children: [
Container(
padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 6),
decoration: BoxDecoration(
color: Colors.transparent,
border: Border.all(
color: Theme.of(context).primaryColor,
)),
child: Text(
"Economy",
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 32.0,
),
),
),
Text(
"Economy",
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 12.0,
),
),
Text(
"Economy",
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 12.0,
),
),
],
);
}
}

Answer 1

You can call onPressed method on ToggleButtons and use like
isSelected: isSelected,
onPressed: (index) {
for (int i = 0; i < isSelected.length; i++) {
isSelected[i] = i == index;
}
setState(() {});
},
Full widget
class MyToogleButtons extends StatefulWidget {
const MyToogleButtons({Key? key}) : super(key: key);
#override
State<MyToogleButtons> createState() => _MyToogleButtonsState();
}
class _MyToogleButtonsState extends State<MyToogleButtons> {
List<bool> isSelected = [true, false, false];
#override
Widget build(BuildContext context) {
return ToggleButtons(
fillColor: Theme.of(context).primaryColor,
borderColor: Theme.of(context).primaryColor,
direction: Axis.horizontal,
isSelected: isSelected,
onPressed: (index) {
for (int i = 0; i < isSelected.length; i++) {
isSelected[i] = i == index;
}
setState(() {});
},
children: [
Container(
padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 6),
decoration: BoxDecoration(
color: Colors.transparent,
border: Border.all(
color: Theme.of(context).primaryColor,
)),
child: Text(
"Economy",
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 32.0,
),
),
),
Text(
"Economy",
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 12.0,
),
),
Text(
"Economy",
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 12.0,
),
),
],
);
}
}