Flutter中如何自定义开关让圆圈相对变小？答案

【问题标题】：How do I customize the switch to make the circle relatively smaller in Flutter?Flutter中如何自定义开关让圆圈相对变小？
【发布时间】：2019-09-23 02:40:05
【问题描述】：

这是必需的开关 Required/expected switch

我正在使用 Flutter 的 Switch 小部件来执行此操作，但我无法更接近所需的开关。使用 Transform 来增加交换机的大小但会增加整个交换机的大小。关于如何匹配给定图像的任何想法？这就是我所在的位置： Where I am at

【问题讨论】：

标签： flutter dart switch-statement

【解决方案1】：

Switch 小部件使用自适应模式，如果你查看源代码，你会发现这样的东西：

  @override
  Widget build(BuildContext context) {
    switch (widget._switchType) {
      case _SwitchType.material:
        return buildMaterialSwitch(context);

      case _SwitchType.adaptive: {
        final ThemeData theme = Theme.of(context);
        assert(theme.platform != null);
        switch (theme.platform) {
          case TargetPlatform.android:
          case TargetPlatform.fuchsia:
            return buildMaterialSwitch(context);
          case TargetPlatform.iOS:
            return buildCupertinoSwitch(context);
        }
      }
    }
    assert(false);
    return null;
  }
}

它将使用buildMaterialSwitch 方法用于Android 和buildCupertinoSwitch 用于iOS。

检查buildCupertinoSwitch 方法：

  Widget buildCupertinoSwitch(BuildContext context) {
    final Size size = getSwitchSize(Theme.of(context));
    return Container(
      width: size.width,  // Same size as the Material switch.
      height: size.height,
      alignment: Alignment.center,
      child: CupertinoSwitch(
        dragStartBehavior: widget.dragStartBehavior,
        value: widget.value,
        onChanged: widget.onChanged,
        activeColor: widget.activeColor,
      ),
    );
  }

这是关键，那你必须使用CupertinoSwitch 小部件:)，只是不要忘记添加导入：

import 'package:flutter/cupertino.dart';

【讨论】：