fluttermaterial-uiuiswitch

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?


Solution

  • 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);
      },
    ),