flutterdartcustomization

How to use old Flutter switch design?


I'm currently on the latest version of Flutter and Dart, but in my project, I want to use the old design of Flutter switches.

Current switch:

Current Flutter Switch Design

Old switch:

Old Flutter Switch Design

I tried using almost every attribute provided by Switch class in Flutter but couldn't get it back to the old design.

I've also searched pub.dev for relevant package but found none which can do this.


Solution

  • The new switch is following material 3 design, you can disable it for the whole app in MaterialApp's themeData.

    return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
            useMaterial3: false, //here
          );
    

    Or if you still want to use the old design of the switch but want to keep the material 3 design for the app. try the following approach:

    Theme(
              data: ThemeData(useMaterial3: false),
              child: Switch(
                value: value,
                onChanged: (newValue) {},
                activeColor: Colors.green,
                inactiveThumbColor: Colors.red,
                activeTrackColor: Colors.lightGreen,
                inactiveTrackColor: Colors.grey,
              ),
            ),