Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter - Change Switch Border Color?

Tags:

flutter

Docs: https://api.flutter.dev/flutter/material/Switch-class.html

How do I change the border Color when the Switch is turned off? In Material 3, when it is on, the border color is the same as the Switch background color, but when it is off, it has a border. How do I change it in Material 3?

enter image description here

Code:

Switch(
                      trackColor: (miniVerbose)
                          ? const MaterialStatePropertyAll(Colors.greenAccent)
                          : const MaterialStatePropertyAll(Colors.orange),
                      value: miniVerbose,
                      onChanged: (value) {
                        setState(() {
                          miniVerbose = value;
                        });
                      },
                    ),
like image 906
Jiehfeng Avatar asked Jul 12 '26 18:07

Jiehfeng


2 Answers

flutter 3.10 add trackOutlineColor for Switch

trackOutlineColor: MaterialStateProperty.resolveWith(
  (final Set<MaterialState> states) {
    if (states.contains(MaterialState.selected)) {
      return null;
    }

    return AppColors.slateGray;
  },
),
like image 140
ArtemKo Avatar answered Jul 15 '26 07:07

ArtemKo


use this code:

theme: ThemeData(
        useMaterial3: true,
      ).copyWith(
        colorScheme:
        Theme.of(context).colorScheme.copyWith(outline: Colors.orange),
      ),

Switch:

Switch(
       value: value,
       activeTrackColor: Colors.orange,
       inactiveTrackColor: Colors.yellow,
       activeColor: Colors.yellow,
       onChanged: (_) => setState(() => value = !value),
     ),

enter image description here

like image 28
Vivek Chib Avatar answered Jul 15 '26 07:07

Vivek Chib