如何在Flutter中实现各Android定制系统的原生Switch组件？

原生Android系统与MIUI、三星One UI等定制系统的Switch样式存在差异，若要在Flutter中实现完全适配各安卓定制系统的原生Switch效果，不能直接使用Flutter自带的Switch组件（其样式为跨平台统一的自定义样式），需通过嵌入Android原生Switch控件的方式实现，具体步骤如下：

一、Android原生端封装Switch控件 #

1. 创建原生Switch视图类 #

在Flutter项目的android/app/src/main/kotlin/[你的包名]/目录下，新建NativeSwitchView.kt文件，实现原生Switch的创建与状态回调逻辑：

package com.yourpackage.name

import android.content.Context
import android.widget.Switch
import io.flutter.plugin.common.BinaryMessenger
import io.flutter.plugin.common.MethodCall
import io.flutter.plugin.common.MethodChannel
import io.flutter.plugin.platform.PlatformView

class NativeSwitchView(
    context: Context,
    messenger: BinaryMessenger,
    id: Int,
    args: Map<String, Any>?
) : PlatformView, MethodChannel.MethodCallHandler {

    private val switchView: Switch = Switch(context)
    private val channel: MethodChannel = MethodChannel(messenger, "native_switch_$id")

    init {
        channel.setMethodCallHandler(this)
        // 设置初始选中状态
        val initialValue = args?.get("initialValue") as? Boolean ?: false
        switchView.isChecked = initialValue
        // 监听Switch状态变化，回调给Flutter
        switchView.setOnCheckedChangeListener { _, isChecked ->
            channel.invokeMethod("onSwitchChanged", isChecked)
        }
    }

    override fun getView() = switchView

    override fun dispose() {
        channel.setMethodCallHandler(null)
    }

    override fun onMethodCall(call: MethodCall, result: MethodChannel.Result) {
        when (call.method) {
            "setChecked" -> {
                val isChecked = call.arguments as Boolean
                switchView.isChecked = isChecked
                result.success(null)
            }
            else -> result.notImplemented()
        }
    }
}

2. 创建视图工厂类 #

同目录下新建NativeSwitchViewFactory.kt，用于创建上述原生Switch视图实例：

package com.yourpackage.name

import android.content.Context
import io.flutter.plugin.common.BinaryMessenger
import io.flutter.plugin.common.StandardMessageCodec
import io.flutter.plugin.platform.PlatformView
import io.flutter.plugin.platform.PlatformViewFactory

class NativeSwitchViewFactory(private val messenger: BinaryMessenger) : PlatformViewFactory(StandardMessageCodec.INSTANCE) {
    override fun create(context: Context, id: Int, args: Any?): PlatformView {
        return NativeSwitchView(context, messenger, id, args as? Map<String, Any>)
    }
}

3. 注册平台视图 #

修改MainActivity.kt，在Flutter引擎中注册原生Switch视图：

package com.yourpackage.name

import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine

class MainActivity : FlutterActivity() {
    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        // 注册原生Switch视图
        flutterEngine.platformViewsController.registry.registerViewFactory(
            "native_switch",
            NativeSwitchViewFactory(flutterEngine.dartExecutor.binaryMessenger)
        )
    }
}

二、Flutter端调用原生Switch #

1. 封装NativeSwitch组件 #

创建native_switch.dart文件，封装Flutter侧的调用逻辑，处理状态同步：

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

class NativeSwitch extends StatefulWidget {
  final bool value;
  final ValueChanged<bool>? onChanged;

  const NativeSwitch({super.key, required this.value, this.onChanged});

  @override
  State<NativeSwitch> createState() => _NativeSwitchState();
}

class _NativeSwitchState extends State<NativeSwitch> {
  late MethodChannel _channel;

  @override
  void initState() {
    super.initState();
    // 初始化MethodChannel，每个组件实例使用唯一ID区分
    final viewId = hashCode;
    _channel = MethodChannel('native_switch_$viewId');
    // 监听原生端的状态回调
    _channel.setMethodCallHandler((call) async {
      if (call.method == 'onSwitchChanged') {
        final isChecked = call.arguments as bool;
        widget.onChanged?.call(isChecked);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return AndroidView(
      viewType: 'native_switch', // 与原生端注册的视图类型一致
      creationParams: {'initialValue': widget.value},
      creationParamsCodec: const StandardMessageCodec(),
    );
  }

  @override
  void didUpdateWidget(covariant NativeSwitch oldWidget) {
    super.didUpdateWidget(oldWidget);
    // 当Flutter侧状态变化时，同步到原生端
    if (oldWidget.value != widget.value) {
      _channel.invokeMethod('setChecked', widget.value);
    }
  }
}

2. 使用NativeSwitch组件 #

在页面中直接使用封装好的NativeSwitch，即可获得当前安卓系统的原生Switch样式：

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool _isEnabled = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("原生Switch示例")),
      body: Center(
        child: NativeSwitch(
          value: _isEnabled,
          onChanged: (value) {
            setState(() {
              _isEnabled = value;
            });
          },
        ),
      ),
    );
  }
}

注意事项 #

• 该方式直接调用Android系统原生Switch控件，会自动适配当前系统（MIUI、三星One UI、华为鸿蒙OS安卓兼容层等）的原生样式，无需额外处理样式适配。
• 若需支持iOS平台，可通过类似逻辑封装iOS原生UISwitch，并在Flutter侧通过Platform.isAndroid/Platform.isIOS判断平台，分别加载对应原生组件。

内容的提问来源于stack exchange，提问作者Myzel394