Flutter自定义开关组件插件custom_switch_lib的使用

custom_switch_lib 是一个用于在 Flutter 中创建自定义开关组件的插件。它允许开发者轻松地自定义开关的颜色、大小和行为。

使用步骤

以下是使用 custom_switch_lib 插件的基本步骤和示例代码。

1. 添加依赖

首先，在项目的 pubspec.yaml 文件中添加 custom_switch_lib 依赖：

dependencies:
  custom_switch_lib: ^1.0.0

然后运行以下命令以安装依赖：

flutter pub get

2. 创建自定义开关组件

接下来，使用 CustomSwitch 组件来创建一个自定义开关。以下是一个完整的示例代码：

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

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool isActiveValue = false; // 开关状态
  bool isEnable = true; // 开关是否可用

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Custom Switch Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 自定义开关组件
              CustomSwitch(
                activeColor: Colors.blue, // 开启时的颜色
                inactiveColor: Colors.grey, // 关闭时的颜色
                value: isActiveValue, // 当前开关状态
                width: 90, // 开关宽度
                height: 40, // 开关高度
                circleWidth: 42, // 圆圈宽度
                circleHeight: 42, // 圆圈高度
                circleRadius: 42, // 圆圈半径
                enabled: isEnable, // 是否启用
                onChanged: (bool val) {
                  setState(() {
                    isActiveValue = val; // 更新开关状态
                    isEnable = !val; // 切换启用状态
                  });
                },
              ),
              SizedBox(height: 20),
              // 显示当前开关状态
              Text(
                isActiveValue ? '开关已开启' : '开关已关闭',
                style: TextStyle(fontSize: 18),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

3. 运行应用

将上述代码保存到 lib/main.dart 文件中，并运行应用：

flutter run