Is there a way to increase the height of track in Flutter switch?

Question

I want to make my switch look like this:

But i haven't found a way to increase the size of track. Is there any?

if you compromise drag behaviour we can make this with stack. including drag behavior will take some extra work. — Md. Yeasin Sheikh, Aug 03 '21 at 16:43

score 1 · Answer 1 · answered Aug 03 '21 at 15:43

1

It looks like you want to use a CupertinoSwitch.

Cupertino switches are the iOS style switches where the track is larger than the node.

answered Aug 03 '21 at 15:43

Damian A.

41
3

But as i understood, there is no way to change color of the thumb. – Zimme Aug 03 '21 at 16:01
@Zimme you can change `activeColor` and `trackColor` and `thumbColor` in class constructor – DJafari Aug 03 '21 at 16:19
Unfortunately you can only change inactive/active track color with Cupertino switches. However, according to the top answer of [this post](https://stackoverflow.com/questions/52568958/flutter-increase-height-and-width-of-switch), you can alter the size of the regular Switch by wrapping it in a Transorm.scale widget. The track won't be larger than the node, but you have more color customization options that route. – Damian A. Aug 03 '21 at 16:23

score 1 · Answer 2 · answered Aug 03 '21 at 16:49

To increase the height of track we have to use constraints and FittedBox.

check this

Container(
          // color: Colors.cyanAccent,
          constraints: BoxConstraints(
            minHeight: 170,
            maxHeight: 170,
            minWidth: 200,
            maxWidth: 200,
          ),
          child: FittedBox(
            child: CupertinoSwitch(
              value: _on,
              onChanged: (value) {
                setState(() {
                  _on = value;
                });
                print(value);
              },
            ),
          ),
        ),

Is there a way to increase the height of track in Flutter switch?

2 Answers2