Question 370904 in Flutter Question posted in
The official Flutter documentation can be found here.

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.

Tags:

3

Answers


  1. 0

    The new switch design is due to Android updating its switch style. If you want
    your switch to look like the old UI you should create a custom styled switch and make it look however you want.

    e.g.

    Switch(
  value: isSwitchOn,
  onChanged: (newValue) {
    setState(() {
      isSwitchOn = newValue;
    });
  },
  activeColor: Colors.green,
  inactiveThumbColor: Colors.red,
  activeTrackColor: Colors.lightGreen,
  inactiveTrackColor: Colors.grey,
)
    Login or Signup to reply.
  2. 0

    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,
          ),
        ),
    Login or Signup to reply.
  3. 0

    By default Material3 design is applied to Theme as well as Widgets:

    So to use Switch or any other widget with old theme you can wrap your widget with Theme and in data property set data: ThemeData(useMaterial3: false)

    by setting useMateria3: false old theme will be used

    Theme(
      data: ThemeData(useMaterial3: false),
      child: Switch(
        value: isSwitchOn,
        onChanged: (newValue) {
          setState(() {
            isSwitchOn = newValue;
          });
        },
        activeColor: Colors.green,
        activeTrackColor: Colors.lightGreen,
        inactiveTrackColor: Colors.grey,
      ),
    )
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search