How to customize the switch button in a Flutter application

Question

In my application, I want the switch is used to toggle a setting between on/off which is true/false respectively. When I went to build it, it turned out that Flutter provides a default switch, but it is not what I want. I want to customize it accordingly to my UI.

This is the Flutter switch button:

Enter image description here

Here is what I want:

Enter image description here

How can I make it possible for my UI?

Try this: https://medium.com/@felixblaschke/custom-animated-control-elements-with-flutter-8c0d352d7136 — Maadhav Sharma, Oct 19 '19 at 12:21
you can watch this tutorial here :https://www.youtube.com/watch?v=TYNbMnaEnmA — Taleb Ibrahim, Nov 17 '20 at 13:10
No need to use any package for this. This is available on Flutter SDK when enabling Material 3 with `useMaterial3: true` from ThemeData — Huy Nguyen, Dec 31 '22 at 17:44

score 48 · Answer 1 · edited Nov 21 '22 at 22:35

48

Set

bool _switchValue = true;

in your screen.dart file:

 CupertinoSwitch(
              value: _switchValue,
              onChanged: (value) {
                setState(() {
                  _switchValue = value;
                });
              },
            ),

edited Nov 21 '22 at 22:35

Peter Mortensen

30,738
21
105
131

answered Mar 12 '20 at 12:40

makri aymen abderraouf

744
5
13

Please explain why and how your solution works. Maybe add a reference or link a documentation and please properly format your posts. However, im not sure your answer solves OP question. He asked about the design, not value-switching. – bam Mar 12 '20 at 13:19
they want design like switchbutton on ios and CupertinoSwitch solve what they want and i set "bool _switchValue=true;" to just know is the var the contain the state of switchbutton – makri aymen abderraouf Mar 12 '20 at 22:09
How do you make the circluar button to be bigger thatn the strip? – Sisir Nov 19 '21 at 17:21
use Switch widget, CupertinoSwitch is using the switch of ios devices , but if you wanna the normal switch use the switch of Matrial design – makri aymen abderraouf Nov 22 '21 at 18:37

score 24 · Answer 2 · edited Nov 21 '22 at 22:30

You can use package https://pub.dev/packages/custom_switch or fork it and modify it to your needs.

Full code

import 'package:custom_switch/custom_switch.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.deepOrange
      ),
      home: HomeScreen(),
    );
  }
}


class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {

  bool status = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Switch Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            CustomSwitch(
              activeColor: Colors.pinkAccent,
              value: status,
              onChanged: (value) {
                print("VALUE : $value");
                setState(() {
                  status = value;
                });
              },
            ),
            SizedBox(height: 12.0,),
            Text('Value : $status', style: TextStyle(
              color: Colors.black,
              fontSize: 20.0
            ),)
          ],
        ),
      ),
    );
  }
}

How can i remove the On and Off tags? – Andrei Marin Dec 21 '20 at 17:42 — Andrei Marin, Dec 21 '20 at 17:42
@AndreiMarin comment "value:status". – Christopher Nolan Mar 15 '21 at 09:51 — Christopher Nolan, Mar 15 '21 at 09:51

score 24 · Answer 3 · edited Dec 14 '22 at 18:45

Create a custom switch class

class CustomSwitch extends StatefulWidget {
  final bool value;
  final ValueChanged<bool> onChanged;

  CustomSwitch({Key? key, required this.value, required this.onChanged})
      : super(key: key);

  @override
  _CustomSwitchState createState() => _CustomSwitchState();
}

class _CustomSwitchState extends State<CustomSwitch>
    with SingleTickerProviderStateMixin {
  Animation? _circleAnimation;
  AnimationController? _animationController;

  @override
  void initState() {
    super.initState();
    _animationController =
        AnimationController(vsync: this, duration: Duration(milliseconds: 60));
    _circleAnimation = AlignmentTween(
            begin: widget.value ? Alignment.centerRight : Alignment.centerLeft,
            end: widget.value ? Alignment.centerLeft : Alignment.centerRight)
        .animate(CurvedAnimation(
            parent: _animationController!, curve: Curves.linear));
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animationController!,
      builder: (context, child) {
        return GestureDetector(
          onTap: () {
            if (_animationController!.isCompleted) {
              _animationController!.reverse();
            } else {
              _animationController!.forward();
            }
            widget.value == false
                ? widget.onChanged(true)
                : widget.onChanged(false);
          },
          child: Container(
            width: 45.0,
            height: 28.0,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(24.0),
              color: _circleAnimation!.value == Alignment.centerLeft
                  ? Colors.grey
                  : Colors.blue,
            ),
            child: Padding(
              padding: const EdgeInsets.only(
                  top: 2.0, bottom: 2.0, right: 2.0, left: 2.0),
              child: Container(
                alignment:
                    widget.value ? ((Directionality.of(context) == TextDirection.rtl) ? Alignment.centerRight : Alignment.centerLeft ) : ((Directionality.of(context) == TextDirection.rtl) ? Alignment.centerLeft : Alignment.centerRight),
                child: Container(
                  width: 20.0,
                  height: 20.0,
                  decoration: BoxDecoration(
                      shape: BoxShape.circle, color: Colors.white),
                ),
              ),
            ),
          ),
        );
      },
    );
  }
}

Call this class as widget and use the value parameter to set the state of the switch

bool _enable = false;

CustomSwitch(
   value: _enable,
   onChanged: (bool val){
      setState(() {
         _enable = val;
      });
   },
),

It's not working proper.It's giving alway false value when change switch.First ,You should be test it . — Nikhil Vadoliya, Apr 24 '20 at 08:20
It doesn't look like Animation animates something here. `_circleAnimation.value == Alignment.centerLeft ? AppColors.grey2 : AppColors.primary4` it doesn't make sense at all. — Kyrylo Zapylaiev, Apr 13 '21 at 14:51
It works but you have to edit the small circle Alignment to `alignment:_circleAnimation.value,` — Patrick Waweru, Jun 27 '21 at 11:16

score 10 · Answer 4 · edited Nov 21 '22 at 22:36

10

For a custom switch, I used this package: https://pub.dev/packages/flutter_switch

You can customize the height and width of the switch, the border radius of the switch, the colors, the toggle size, etc.

Install:

dependencies:
     flutter_switch: ^0.0.2

Import:

import 'package:flutter_switch/flutter_switch.dart';

Sample Usage:

FlutterSwitch(
     height: 20.0,
     width: 40.0,
     padding: 4.0,
     toggleSize: 15.0,
     borderRadius: 10.0,
     activeColor: lets_cyan,
     value: isToggled,
     onToggle: (value) {
          setState(() {
                isToggled = value;
          });
     },
),

edited Nov 21 '22 at 22:36

Peter Mortensen

30,738
21
105
131

answered May 09 '20 at 15:32

Nickr

216
4
8

Hi, [Links to external resources are encouraged, but please add context around the link so your fellow users will have some idea what it is and why it’s there. Always quote the most relevant part of an important link, in case the target site is unreachable or goes permanently offline.](https://stackoverflow.com/help/how-to-answer) – manuel_b May 09 '20 at 16:07
Nick, it is good that you (and other) contributes some helpful stuffs, But you should carefully test it.Widget won't updates when I change the value by setState. Look at CupertinoSwitch for example. Thanks – A.Y. Jul 30 '20 at 15:07

score 3 · Answer 5 · edited Nov 21 '22 at 22:32

You can achieve such a design using this package:

This usage is from their README file:

import 'package:custom_switch_button/custom_switch_button.dart';

bool isChecked = false;

return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Custom Switch Button example app'),
        ),
        body: GestureDetector(
          onTap: () {
            setState(() {
              isChecked = !isChecked;
            });
          },
          child: Center(
            child: CustomSwitchButton(
              backgroundColor: Colors.blueGrey,
              unCheckedColor: Colors.white,
              animationDuration: Duration(milliseconds: 400),
              checkedColor: Colors.lightGreen,
              checked: isChecked,
            ),
          ),
        ),
      ),
    );

Final result:

How to customize the switch button in a Flutter application

5 Answers5

Full code

Linked

Related