Flutter加载开关控制插件load_switch的使用

插件概述

load_switch 是一个用于Flutter应用程序中实现加载状态和开关效果的插件。它提供了丰富的自定义选项，包括不同的加载动画样式、颜色、形状等。该插件基于 flutter_spinkit 实现了多种炫酷的加载动画，并且可以方便地集成到你的项目中。

版本信息

• 版本：
• 代码大小：
• 发布状态：

使用示例

默认用法

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

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

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

class _MyAppState extends State<MyApp> {
  bool value = false;

  Future<bool> _getFuture() async {
    await Future.delayed(const Duration(seconds: 2));
    return !value;
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Load Switch Example')),
        body: Center(
          child: LoadSwitch(
            value: value,
            future: _getFuture,
            style: SpinStyle.material,
            onChange: (v) {
              value = v;
              print('Value changed to $v');
              setState(() {});
            },
            onTap: (v) {
              print('Tapping while value is $v');
            },
          ),
        ),
      ),
    );
  }
}

自定义用法

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

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

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

class _MyAppState extends State<MyApp> {
  bool value = false;

  Future<bool> _getFuture() async {
    await Future.delayed(const Duration(seconds: 2));
    return !value;
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Custom Load Switch Example')),
        body: Center(
          child: LoadSwitch(
            value: value,
            future: _getFuture,
            style: SpinStyle.material,
            curveIn: Curves.easeInBack,
            curveOut: Curves.easeOutBack,
            animationDuration: const Duration(milliseconds: 500),
            switchDecoration: (value) => BoxDecoration(
              color: value ? Colors.green[100] : Colors.red[100],
              borderRadius: BorderRadius.circular(30),
              shape: BoxShape.rectangle,
              boxShadow: [
                BoxShadow(
                  color: value
                      ? Colors.green.withOpacity(0.2)
                      : Colors.red.withOpacity(0.2),
                  spreadRadius: 5,
                  blurRadius: 7,
                  offset: const Offset(0, 3),
                ),
              ],
            ),
            spinColor: (value) =>
                value ? const Color.fromARGB(255, 41, 232, 31) : const Color.fromARGB(255, 255, 77, 77),
            spinStrokeWidth: 3,
            thumbDecoration: (value) => BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(30),
              shape: BoxShape.rectangle,
              boxShadow: [
                BoxShadow(
                  color: value
                      ? Colors.green.withOpacity(0.2)
                      : Colors.red.withOpacity(0.2),
                  spreadRadius: 5,
                  blurRadius: 7,
                  offset: const Offset(0, 3),
                ),
              ],
            ),
            onChange: (v) {
              value = v;
              print('Value changed to $v');
              setState(() {});
            },
            onTap: (v) {
              print('Tapping while value is $v');
            },
          ),
        ),
      ),
    );
  }
}

加载动画样式

load_switch 内置了多种加载动画样式，以下是部分示例：

样式	效果
material
cupertino
chasingDots
circle
cubeGrid
dancingSquare

更多样式请参考 官方文档 或者 GitHub仓库。

问题与功能建议

如果你发现了bug或者有新的功能需求，请前往 GitHub仓库 提交issue。

通过以上内容，你应该能够快速上手并灵活运用 load_switch 插件来为你的Flutter应用添加精美的加载开关效果。希望这个插件能为你的开发工作带来便利！