CODEWITHSUNDEEP
flutterdarttabsradio-button
Jaimin Modi
Jaimin Modi

Reputation: 1667

Select-DeSelect Buttons in Flutter

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?

Upvotes: 1

Views: 493

Answers (2)

Ramji
Ramji

Reputation: 183

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 : -

enter image description here

Upvotes: 1

Risheek Mittal
Risheek Mittal

Reputation: 1109

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.

Upvotes: 1

Related Questions