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

Flutter – Change Switch Border Color?

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

3

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    just updated Vivek code and wrap switch with Theme widget for single button, below is updated code-

    Theme(
      data: ThemeData(
        useMaterial3: true,
      ).copyWith(
        colorScheme: Theme.of(context).colorScheme.copyWith(outline: Colors.orange),
      ),
      child: Switch(
        value: value,
        activeTrackColor: Colors.orange,
        inactiveTrackColor: Colors.yellow,
        activeColor: Colors.yellow,
        onChanged: (_) => setState(() => value = !value),
      ),
    );
    Login or Signup to reply.
  3. 0 
    what about this alternative: 

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(20.0),
    border: Border.all(
      color: isSwitchedOn ? Colors.greenAccent : Colors.grey,
      width: 2.0,
    ),
  ),
  child: Switch(
    value: isSwitchedOn,
    onChanged: (value) {
      setState(() {
        isSwitchedOn = value;
      });
    },
  ),
),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search