Flutter带加载器的按钮插件tbib_button_with_loader的使用

导入

import 'package:tbib_button_with_loader/tbib_button_with_loader.dart';

如何使用

ButtonWithLoader(
  onPressed: (startLoading, stopLoading, Function(bool isSuccess) isSuccess, state) {
    // 启动加载器
    startLoading?.call();
    
    // 模拟异步操作，例如网络请求
    Future.delayed(const Duration(seconds: 2), () {
      // 停止加载器
      stopLoading?.call();
      
      // 根据操作结果调用回调函数
      isSuccess(true); // 成功
      // isSuccess(false); // 失败
    });
  },
  title: '点击我',
)

完整示例Demo

import 'dart:async';

import 'package:fluent_ui/fluent_ui.dart';
import 'package:flutter/material.dart';
import 'package:tbib_button_with_loader/tbib_button_with_loader.dart';
import 'package:macos_ui/macos_ui.dart' as macos;

void main() {
  runApp(const MainApp());
}

class MainApp extends StatefulWidget {
  const MainApp({super.key});

  [@override](/user/override)
  State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  Function? startLoading;
  Function? stopLoading;
  Function(bool isSuccess)? isSuccess;

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Center(
              child: FluentTheme(
                data: FluentThemeData(),
                child: ButtonWithLoader(
                  onPressed: (startLoading, stopLoading, Function(bool isSuccess) isSuccess, state) {
                    this.startLoading = startLoading;
                    this.stopLoading = stopLoading;
                    this.isSuccess = isSuccess;
                    this.startLoading?.call();
                    
                    Future.delayed(const Duration(seconds: 2), () {
                      this.stopLoading?.call();
                    });
                  },
                  buttonData: const ButtonLoaderData(useFluentUi: true, borderRadius: 10),
                  title: '点击Me fluent os按钮',
                ),
              ),
            ),
            const SizedBox(height: 10),
            Center(
              child: macos.MacosTheme(
                data: macos.MacosThemeData(),
                child: ButtonWithLoader(
                  onPressed: (startLoading, stopLoading, Function(bool isSuccess) isSuccess, state) {
                    this.startLoading = startLoading;
                    this.stopLoading = stopLoading;
                    this.isSuccess = isSuccess;
                    this.startLoading?.call();
                    
                    Future.delayed(const Duration(seconds: 2), () {
                      this.stopLoading?.call();
                    });
                  },
                  buttonData: const ButtonLoaderData(useMacUi: true, borderRadius: 10),
                  title: '点击Me mac os按钮',
                ),
              ),
            ),
            const SizedBox(height: 10),
            Center(
              child: ButtonWithLoader(
                onPressed: (startLoading, stopLoading, Function(bool isSuccess) isSuccess, state) {
                  this.startLoading = startLoading;
                  this.stopLoading = stopLoading;
                  this.isSuccess = isSuccess;
                  this.startLoading?.call();

                  Future.delayed(const Duration(seconds: 2), () {
                    this.isSuccess?.call(true); // 成功
                    // this.isSuccess?.call(false); // 失败
                  });
                },
                title: '成功',
                buttonData: const ButtonLoaderData(borderRadius: 30),
              ),
            ),
            const SizedBox(height: 10),
            Center(
              child: ButtonWithLoader(
                onPressed: (startLoading, stopLoading, Function(bool isSuccess) isSuccess, state) {
                  this.startLoading = startLoading;
                  this.stopLoading = stopLoading;
                  this.isSuccess = isSuccess;
                  this.startLoading?.call();
                  
                  Future.delayed(const Duration(seconds: 2), () {
                    this.isSuccess?.call(false); // 失败
                  });
                },
                title: '错误',
                buttonData: const ButtonLoaderData(
                  buttonLoader: ButtonLoader(
                    customWidgetInError: Icon(Icons.running_with_errors)),
                ),
              ),
            ),
            const SizedBox(height: 10),
          ],
        ),
      ),
    );
  }
}

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

yuanlaile 1楼

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

tbib_button_with_loader 是一个 Flutter 插件，它提供了一个带有加载器的按钮，通常用于在按钮点击后显示加载状态。这个插件可以帮助你在执行异步操作时，给用户提供反馈，表明操作正在进行中。

安装

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

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

然后，运行 flutter pub get 来获取依赖。

使用

在你的 Dart 文件中导入 tbib_button_with_loader：

import 'package:tbib_button_with_loader/tbib_button_with_loader.dart';

接下来，你可以在你的 UI 中使用 TBIBButtonWithLoader 组件。以下是一个简单的示例：

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

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

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

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TBIB Button with Loader'),
      ),
      body: Center(
        child: TBIBButtonWithLoader(
          isLoading: _isLoading,
          onPressed: _simulateAsyncOperation,
          child: Text('Submit'),
        ),
      ),
    );
  }
}

参数说明

isLoading: 一个布尔值，用于控制按钮是否显示加载状态。
onPressed: 当按钮被点击时调用的回调函数。通常用于执行异步操作。
child: 按钮的内容，通常是一个 Text 或 Icon 组件。

自定义

你可以通过传递其他参数来自定义按钮的外观，例如 color、disabledColor、elevation 等。

TBIBButtonWithLoader(
  isLoading: _isLoading,
  onPressed: _simulateAsyncOperation,
  child: Text('Submit'),
  color: Colors.blue,
  disabledColor: Colors.grey,
  elevation: 5.0,
);