CODEWITHSUNDEEP
fluttermaterial-uiuiswitch
Ana
Ana

Reputation: 45

How to increase thumb size of a Switch in Flutter

I want the following thumb size to match as per the given image.

inactive switch sample active switch sample

But the switch looks like this in active and inactive mode.

this how my code makes it look

Here's the code:

Switch(
        value: value,
        onChanged: (){},
        trackOutlineWidth: 0,
        trackOutlineColor: value
            ? blue
            : grey,
        activeTrackColor: blue,
        inactiveThumbColor: white,
        inactiveTrackColor: grey,
      ),

What should I add/modify to make it match the design?

Upvotes: 2

Views: 2003

Answers (3)

Bhavesh Vaghasiya
Bhavesh Vaghasiya

Reputation: 119

Please use this code:

Transform.scale(
 scaleX: 0.9,
 scaleY: 0.9,
 child: Switch(
    value: value,
    onChanged: (){},
    trackOutlineColor: value
        ? blue
        : grey,
    activeTrackColor: blue,
    inactiveThumbColor: white,
    inactiveTrackColor: grey,
  ),

Upvotes: 0

Hans Kokx
Hans Kokx

Reputation: 549

I had to solve this same problem. The Flutter folks didn't think we would want to deviate from the Material Design guidelines, I suppose. :) Anyway, here's how I did it:

thumbIcon: MaterialStateProperty.resolveWith<Icon>(
  (Set<MaterialState> states) {
    if (states
        .containsAll([MaterialState.disabled, MaterialState.selected])) {
      return const Icon(Icons.circle, color: Colors.red);
    }

    if (states.contains(MaterialState.disabled)) {
      return const Icon(Icons.circle, color: Colors.blue);
    }

    if (states.contains(MaterialState.selected)) {
      return const Icon(Icons.circle, color: Colors.green);
    }

    return const Icon(Icons.circle, color: Colors.yellow);
  },
),

Upvotes: 4

Ivo
Ivo

Reputation: 23164

Not sure if there is a better way because this feels a bit like a work around but giving it this thumbIcon seems to work:

thumbIcon: MaterialStateProperty.all(const Icon(null)),

Upvotes: 4

Related Questions