CODEWITHSUNDEEP
flutterdart
Dhipin M K
Dhipin M K

Reputation: 3

How to customize the thumb size of a Switch widget in Flutter?

I'm trying to customize the size of the thumb in a Switch widget in Flutter to match a specific design. I currently use the following code for a basic switch:

Switch(
    value: isswitched,
    onChanged: (value) {
        setState(() {
            isswitched = value;
        });
    },
)

I want to adjust the size of the switch thumb like this:

enter image description here

The default Switch widget does not provide direct customization for the thumb size.

Is there a way to modify the thumb size of the Switch widget directly, or would I need to use a different approach or create a custom widget to achieve this effect?

I am looking for a way to modify only the thumb size of the Switch widget without affecting other aspects of its appearance. I have tried using Transform.scale to resize the entire switch, but this approach scales the whole widget rather than just the thumb.

Upvotes: 0

Views: 68

Answers (1)

Ildeberto Vasconcelos
Ildeberto Vasconcelos

Reputation: 1060

I see you want to achieve Swicth design in Material Design 2

Material 2 Switch

wrap your switch with Theme Widget

Theme(
  data: ThemeData(
    useMaterial3: false,
  ),
  child: Switch(
    value: isswitched,
    onChanged: (value) {
      setState(() {
        isswitched = value;
      });
    },
  ),
)

ThemeData(useMaterial3: false) ensures that Material 2 is used.

you can learn more about it Here,the Material documentation or in this Flutter demo

Upvotes: 0

Related Questions