如何为开关的边缘添加颜色答案

【问题标题】：How to add color to the edge of a switch如何为开关的边缘添加颜色
【发布时间】：2021-06-09 19:49:45
【问题描述】：

我用的是flutter的Widget Switch()，想给边框加颜色但是不行。有人可以帮助我。我是使用颤振的新手。

更新帖子。我想为那个开关的边框添加颜色

【问题讨论】：

标签： flutter flutter-layout flutter-dependencies flutter-animation flutter-test

【解决方案1】：

这就是你要找的吗？µ

您可以通过将Switch 与border 放在Container 中来实现此目的：

完整源代码：

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: HomePage(),
    ),
  );
}

class HomePage extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final checked = useState(false);
    return Scaffold(
      body: Center(
        child: Container(
          padding: EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0),
          decoration: BoxDecoration(
            border: Border.all(
                color: checked.value ? Colors.green : Colors.red, width: 2.0),
            borderRadius: BorderRadius.circular(4.0),
          ),
          child: Switch(
              value: checked.value,
              onChanged: (_) => checked.value = !checked.value),
        ),
      ),
    );
  }
}

【讨论】：

嗨，更新帖子。我想为那个开关的边框添加颜色
对不起，我真的不明白你的意思。而且您添加的图像太小（22x12 像素），无法添加任何有用的信息。

【解决方案2】：

Switch 按钮的边框不能基于 Flutter 的默认按钮进行更改。但是，有一个流行的包名称 flutter_switch，您可以使用它来创建具有自定义边框颜色的 Switch 按钮。您可以将其用作：

FlutterSwitch(
    value: isSwitchOn,
    activeSwitchBorder: Border.all(color: Colors.green),
    inactiveSwitchBorder: Border.all(color: Colors.red),
    activeColor: Colors.yellow,
    onToggle: (value) {
        setState(() {
           isSwitchOn = value;
        });
    },
)

【讨论】：