Flutter加载动画按钮插件spinner_button的使用

Flutter加载动画按钮插件spinner_button的使用

简介

spinner_button 是一个简单的按钮插件，它可以被转换为圆形按钮，并且能够显示进度指示器。

如何使用

以下是一个简单的使用示例：

import 'package:flutter/material.dart';
import 'package:spinner_button/spinner_button.dart'; // 导入spinner_button插件

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Spinner Button 示例'),
        ),
        body: Center(
          child: Container(
            width: 200,
            height: 60,
            child: SpinnerButton(
              borderRadius: BorderRadius.all(Radius.circular(8)), // 设置圆角
              strokeWidth: 2, // 设置边框宽度
              child: Text(
                "开始",
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 24,
                ),
              ),
              onPressed: (AnimationController controller) {
                if (controller.isCompleted) {
                  controller.reverse(); // 如果动画完成，则反转动画
                } else {
                  controller.forward(); // 否则，播放动画
                }
              },
            ),
          ),
        ),
      ),
    );
  }
}

示例代码

以下是完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Spinner Button 示例'),
        ),
        body: Center(
          child: Container(
            width: 200,
            height: 60,
            child: SpinnerButton(
              borderRadius: BorderRadius.all(Radius.circular(8)), // 设置圆角
              strokeWidth: 2, // 设置边框宽度
              child: Text(
                "开始",
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 24,
                ),
              ),
              onPressed: (AnimationController controller) {
                if (controller.isCompleted) {
                  controller.reverse(); // 如果动画完成，则反转动画
                } else {
                  controller.forward(); // 否则，播放动画
                }
              },
            ),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter加载动画按钮插件spinner_button的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter加载动画按钮插件spinner_button的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


spinner_button 是一个用于在Flutter中创建带有加载动画的按钮的插件。它允许你在按钮上显示一个加载指示器（通常是旋转的圆圈），当按钮被按下时，加载指示器会显示，直到某些异步操作完成。

安装 spinner_button

首先，你需要在 pubspec.yaml 文件中添加 spinner_button 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  spinner_button: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来安装依赖。

使用 spinner_button

下面是一个简单的示例，展示了如何使用 spinner_button 来创建一个带有加载动画的按钮。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Spinner Button Example'),
        ),
        body: Center(
          child: SpinnerButtonExample(),
        ),
      ),
    );
  }
}

class SpinnerButtonExample extends StatefulWidget {
  @override
  _SpinnerButtonExampleState createState() => _SpinnerButtonExampleState();
}

class _SpinnerButtonExampleState extends State<SpinnerButtonExample> {
  bool _isLoading = false;

  Future<void> _simulateAsyncOperation() async {
    setState(() {
      _isLoading = true;
    });

    // 模拟一个异步操作
    await Future.delayed(Duration(seconds: 3));

    setState(() {
      _isLoading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return SpinnerButton(
      isLoading: _isLoading,
      onPressed: _simulateAsyncOperation,
      child: Text('Submit'),
    );
  }
}

解释

  1. SpinnerButton Widget: SpinnerButton 是主要的组件，它接受一个 isLoading 参数来确定是否显示加载动画，以及一个 onPressed 回调函数，当按钮被按下时触发。

  2. isLoading: 这个布尔值决定了按钮是否处于加载状态。当 isLoading 为 true 时，按钮会显示加载指示器。

  3. onPressed: 这是一个回调函数，当用户按下按钮时会被调用。通常在这里执行一些异步操作，并在操作完成后将 isLoading 设置为 false。

  4. child: 这是按钮的文本或其他内容，通常是一个 Text 或 Icon 组件。

自定义

spinner_button 还提供了一些自定义选项，比如你可以自定义加载指示器的颜色、大小等。你可以通过 SpinnerButton 的其他参数来实现这些自定义。

SpinnerButton(
  isLoading: _isLoading,
  onPressed: _simulateAsyncOperation,
  child: Text('Submit'),
  spinnerColor: Colors.white,
  spinnerSize: 20.0,
  buttonWidth: 150.0,
  buttonHeight: 50.0,
  // 其他自定义参数
);
回到顶部