Flutter开关切换动画插件rolling_switch的使用

rolling_switch 是一个为Flutter应用程序提供的全自定义滚动开关小部件。它源自于lite_rolling_switch库，具有吸引人的动画效果，并允许您自定义颜色、图标、自定义小部件和其他外观内容。您可以像管理经典材料设计的开关小部件一样管理此小部件的状态。

快速开始

在您的项目中导入此库：

dependencies:
  rolling_switch: ^latest_version

请将 ^latest_version 替换为实际的最新版本号。

基本实现

使用图标构造函数

以下是创建带有图标的 RollingSwitch 小部件的基本用法：

RollingSwitch.icon(
  onChanged: (bool state) {
    print('turned ${(state) ? 'on' : 'off'}');
  },
  rollingInfoRight: const RollingIconInfo(
    icon: Icons.flag,
    text: Text('Flag'),
  ),
  rollingInfoLeft: const RollingIconInfo(
    icon: Icons.check,
    backgroundColor: Colors.grey,
    text: Text('Check'),
  ),
),

更多可能性

• 创建自定义小部件

const RollingWidgetInfo(icon: FlutterLogo())

• 更改左右滑动时的背景颜色

RollingSwitch.icon(    
  rollingInfoRight: const RollingIconInfo(
    backgroundColor: Colors.green,
  ),
  rollingInfoLeft: const RollingIconInfo(
    backgroundColor: Colors.grey,
  ),
)

• 更改圆形指示器的颜色

RollingSwitch.icon(
  ...
  circularColor: Colors.blue, // 设置圆形指示器的颜色
)

• 创建自定义文本指示器

RollingSwitch.icon(    
  rollingInfoRight: const RollingIconInfo(
    text: Text('Flag'),
  ),
  rollingInfoLeft: const RollingIconInfo(
    text: Text('Stack'),
  ),
)

• 启用拖拽切换

RollingSwitch.icon(
  ...
  enableDrag: true
)

预览

完整示例代码

以下是一个完整的示例，展示了如何在一个简单的Flutter应用程序中使用 RollingSwitch：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Rolling Switch Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Rolling Switch Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _switchValue = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RollingSwitch.icon(
              value: _switchValue,
              onChanged: (bool state) {
                setState(() {
                  _switchValue = state;
                });
                print('turned ${(state) ? 'on' : 'off'}');
              },
              rollingInfoRight: const RollingIconInfo(
                icon: Icons.flag,
                text: Text('Flag'),
              ),
              rollingInfoLeft: const RollingIconInfo(
                icon: Icons.check,
                backgroundColor: Colors.grey,
                text: Text('Check'),
              ),
            ),
            SizedBox(height: 20),
            RollingSwitch.widget(
              value: _switchValue,
              onChanged: (bool state) {
                setState(() {
                  _switchValue = state;
                });
                print('turned ${(state) ? 'on' : 'off'}');
              },
              rollingInfoRight: RollingWidgetInfo(
                icon: FlutterLogo(),
                text: Text('Flutter'),
              ),
              rollingInfoLeft: RollingWidgetInfo(
                icon: FlutterLogo(
                  style: FlutterLogoStyle.stacked,
                ),
                backgroundColor: Colors.grey,
                text: Text('Stacked'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

这个示例代码展示了如何在Flutter应用程序中使用 RollingSwitch 插件来创建带有图标和自定义小部件的开关，并处理其状态变化。希望这对您有所帮助！