Question 77588 in Flutter Question posted in
The official Flutter documentation can be found here.

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?

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search