Flutter - Change Switch Border Color?

Jiehfeng
April 23, 2023
303 views
2 votes
3 Answers

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?

Code:

Switch(
                      trackColor: (miniVerbose)
                          ? const MaterialStatePropertyAll(Colors.greenAccent)
                          : const MaterialStatePropertyAll(Colors.orange),
                      value: miniVerbose,
                      onChanged: (value) {
                        setState(() {
                          miniVerbose = value;
                        });
                      },
                    ),

Tags: flutter

Answers

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),
     ),

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

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

Please signup or login to give your own answer.

Click here to cancel reply.

Flutter – Change Switch Border Color?

Answers