I'm trying to make the toggle button in the picture below, but I couldn't add a border. Can you help me with this? Also, I couldn't understand whether the button in this image is switch or cupertino. I will be glad if you inform me about this.

My Simple Code;

CupertinoSwitch(
              value: true,
              onChanged: (value) {},
              activeColor: CupertinoColors.white,
              thumbColor: CupertinoColors.activeOrange,
            ),

CodePudding user response：

From iOS 14 the default look changed to not having the border.

The conversation can be found

With usage of CupertinoSwitch you can achieve it this way:

           Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20.0),
                color: _value
                    ? CupertinoColors.activeOrange
                    : CupertinoColors.activeOrange,
              ),
              child: CupertinoSwitch(
                value: _value,
                activeColor: CupertinoColors.white,
                trackColor: CupertinoColors.white,
                thumbColor: CupertinoColors.activeOrange,
                onChanged: (v) => setState(() {
                  _value = v;
                }),
              ),
            ),

But you asking this kind of question makes me think that you don't want native iOS styling, so consider if you want have more freedom over styling consider moving to MaterialApp (even if iOS is your target)

CodePudding user response：

You have to create your own custom switch class to be able to achieve what you want.

Create a custom_switch class like below:

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

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

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

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

  @override
  void initState() {
    super.initState();
    _animationController =
        AnimationController(vsync: this, duration: const Duration(milliseconds: 30));
  }

  @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: 60.0,
            height: 30.0,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(24.0),
              border: Border.all(color: Colors.orange, width: 2),
            ),
            child: Padding(
              padding: const EdgeInsets.only(
                  top: 2.0, bottom: 2.0, right: 2.0, left: 2.0),
              child: Container(
                alignment:
                widget.value ? Alignment.centerRight : Alignment.centerLeft,
                child: Container(
                  width: 25.0,
                  height: 25.0,
                  decoration: const BoxDecoration(
                      shape: BoxShape.circle, color: Colors.orange),
                ),
              ),
            ),
          ),
        );
      },
    );
  }
}

Then call your custom_switch class as follows:

bool _toggle = false;

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

Edit the custom_switch class to suit your own need.

CodePudding user response：

This code snippet will work what you want. Let me know when you find better solution. Thanks!

                          Container(
                            decoration: BoxDecoration(
                                border: Border.all(color: CupertinoColors.activeOrange, width: 2),
                                borderRadius: BorderRadius.all(Radius.circular(20))
                            ),
                            child: SizedBox(
                              width: 51,
                              height: 31,
                              child: CupertinoSwitch(
                                value: true,
                                trackColor: Colors.transparent,
                                onChanged: (value) {},
                                activeColor: Colors.transparent,
                                thumbColor: CupertinoColors.activeOrange,
                              ),
                            ),
                          )