Flutter加载按钮插件icon_loading_button的使用

Flutter加载按钮插件icon_loading_button的使用

IconLoadingButton 是一个 Flutter 包，它深受 rounded_loading_button 的启发，并在设计上进行了改进，增加了图标支持。

安装

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
    icon_loading_button: ^1.0.0

使用

导入

首先，在你的 Dart 文件中导入 IconLoadingButton 包：

import 'package:icon_loading_button/icon_loading_button.dart';

简单实现

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

import 'package:flutter/material.dart';
import 'package:icon_loading_button/icon_loading_button.dart';
import 'package:phosphor_flutter/phosphor_flutter.dart';
import 'package:google_fonts/google_fonts.dart';

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

class MyApp extends StatelessWidget {
  MyApp({Key? key}) : super(key: key);

  final IconButtonController _btnController1 = IconButtonController();
  final IconButtonController _btnController2 = IconButtonController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        brightness: Brightness.light,
      ),
      home: SafeArea(
        child: Scaffold(
          body: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Center(
                child: IconLoadingButton(
                  color: Colors.white,
                  iconColor: const Color(0xff0066ff),
                  valueColor: const Color(0xff0066ff),
                  errorColor: const Color(0xffe0333c),
                  successColor: const Color(0xff58B09C),
                  child: Text(
                    'Login with Google',
                    style: GoogleFonts.openSans().copyWith(
                      fontWeight: FontWeight.w500,
                      color: const Color(0xff0066ff),
                    ),
                  ),
                  iconData: PhosphorIcons.googleLogo,
                  onPressed: () {
                    Future.delayed(const Duration(seconds: 1), () {
                      _btnController1.success();
                    });
                  },
                  successIcon: PhosphorIcons.check,
                  controller: _btnController1,
                ),
              ),
              Center(
                child: IconLoadingButton(
                  color: const Color(0xff0066ff),
                  iconColor: Colors.white,
                  valueColor: const Color(0xff0066ff),
                  errorColor: const Color(0xffe0333c),
                  successColor: const Color(0xff58B09C),
                  child: Text(
                    'Login with Google',
                    style: GoogleFonts.openSans().copyWith(
                      fontWeight: FontWeight.w500,
                      color: Colors.white,
                    ),
                  ),
                  iconData: PhosphorIcons.googleLogo,
                  onPressed: () {
                    Future.delayed(const Duration(seconds: 1), () {
                      _btnController2.error();
                      Future.delayed(const Duration(seconds: 1), () {
                        _btnController2.reset();
                      });
                    });
                  },
                  successIcon: PhosphorIcons.check,
                  controller: _btnController2,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


icon_loading_button 是一个 Flutter 插件，用于在按钮上显示加载动画。这个插件通常用于在异步操作（如网络请求）期间显示加载状态，以提供更好的用户体验。

安装插件

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

dependencies:
  flutter:
    sdk: flutter
  icon_loading_button: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装插件。

使用 IconLoadingButton

IconLoadingButton 是一个带有加载动画的按钮，你可以在按钮上显示一个图标，并在加载时显示一个旋转的加载动画。

以下是一个简单的示例，展示如何使用 IconLoadingButton：

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

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

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

    // 模拟网络请求
    await Future.delayed(Duration(seconds: 2));

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('IconLoadingButton Example'),
      ),
      body: Center(
        child: IconLoadingButton(
          isLoading: _isLoading,
          iconData: Icons.send,
          onPressed: _simulateNetworkRequest,
        ),
      ),
    );
  }
}

void main() => runApp(MaterialApp(
  home: MyHomePage(),
));

参数说明

  • isLoading: 布尔值，用于控制按钮是否显示加载动画。
  • iconData: 按钮上显示的图标。
  • onPressed: 按钮点击时触发的回调函数。通常在这里执行异步操作。
  • color: 按钮的颜色。
  • iconSize: 图标的大小。
  • loadingIndicatorColor: 加载动画的颜色。
  • loadingIndicatorSize: 加载动画的大小。

自定义样式

你可以根据需要自定义按钮的样式。例如，修改按钮的颜色、图标大小、加载动画的颜色等。

IconLoadingButton(
  isLoading: _isLoading,
  iconData: Icons.send,
  onPressed: _simulateNetworkRequest,
  color: Colors.blue,
  iconSize: 30.0,
  loadingIndicatorColor: Colors.white,
  loadingIndicatorSize: 20.0,
),
回到顶部