Select-DeSelect Buttons in Flutter - flutter

Question

I want to create below tab like rounded buttons named Vehicle & Key in flutter which is selectable and de-selectable. I can use Tab but its part of scaffold. Is there any other way to achieve as below?

Answer 1

You can use the toggle_switch 2.0.1 (https://pub.dev/packages/toggle_switch) package which is in Flutter favorite program.
Its simple to use : -
ToggleSwitch(
minWidth: 200.0,
minHeight: 55.0,
cornerRadius: 35.0,
activeBgColors: const [
[Color.fromARGB(255, 52, 26, 94)],
[Color.fromARGB(255, 52, 26, 94)]
],
borderColor: const [Color.fromARGB(255, 154, 207, 251)],
borderWidth: 0.7,
inactiveBgColor: Colors.white,
inactiveFgColor: const Color.fromARGB(255, 52, 26, 94),
initialLabelIndex: 0,
totalSwitches: 2,
labels: const ['Vechile', 'Key'],
radiusStyle: true,
onToggle: (index) {},
),
Complete Code : -
import 'package:flutter/material.dart';
import 'package:toggle_switch/toggle_switch.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
static const String _title = 'Flutter Code Sample';
#override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
title: _title,
home: ToggleSwitchButton(),
);
}
}
class ToggleSwitchButton extends StatefulWidget {
const ToggleSwitchButton({Key? key}) : super(key: key);
#override
_ToggleSwitchButtonState createState() => _ToggleSwitchButtonState();
}
class _ToggleSwitchButtonState extends State<ToggleSwitchButton> {
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Center(
child: ToggleSwitch(
minWidth: 200.0,
minHeight: 55.0,
cornerRadius: 35.0,
activeBgColors: const [
[Color.fromARGB(255, 52, 26, 94)],
[Color.fromARGB(255, 52, 26, 94)]
],
borderColor: const [Color.fromARGB(255, 154, 207, 251)],
borderWidth: 0.7,
inactiveBgColor: Colors.white,
inactiveFgColor: const Color.fromARGB(255, 52, 26, 94),
initialLabelIndex: 0,
totalSwitches: 2,
labels: const ['Vechile', 'Key'],
radiusStyle: true,
onToggle: (index) {},
),
)),
);
}
}
Output : -

Answer 2

You can create two widgets simultaneously and then provide them a flag for visibility :
Column(
children: [
Row(
children: [
ElevatedButton(
onPressed: (() => flag=true),
child: Text("Vehicle"),),
ElevatedButton(
onPressed: (() => flag=false),
child: Text("Vehicle"),),
]),
flag ? Child1 : Child2,
],
),
This can help you create two buttons which onPressing will change your flag which in turn will change the content you are providing on the screen.