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

Question

我用的是flutter的Widget Switch()，我想给边框加颜色但是我做不到。 有人可以帮助我。 我刚开始使用颤振。

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

Answer 1

这是您要找的吗？μ

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

完整源代码：

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

Answer 2

不能基于 Flutter 的默认按钮更改 Switch 按钮的边框。但是，您可以使用一个流行的包名称 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;
        });
    },
)