Flutter圆形加载按钮插件circular_loading_button的使用

Flutter圆形加载按钮插件circular_loading_button的使用

插件介绍

loading_button 是一个用于Flutter的圆形加载按钮插件。它通过native的flutter按钮类型（ElevatedButton, FilledButton, OutlinedButton）实现，因此可以通过你的应用主题进行自定义。

该插件支持通过expandedSize和loadingSize参数来定义按钮在加载和闲置状态下的尺寸。

使用步骤

1. 添加依赖项：

dependencies:
  circular_loading_button: ^1ersion^

1. 导入包：

import 'package:circular_loading_button/loading_button.dart';

1. 简单示例：

// 设置初始按钮状态
LoadingButtonState _currentState = LoadingButtonState.idle;

LoadingButton(
  type: LoadingButtonType.elevated,
  state: _currentState,
  onPressed: () {
    // 改变按钮状态为加载
    setState(() => _currentState = LoadingButtonState.loading);
    
    // 等待3秒后将按钮状态设置为闲置
    Future.delayed(const Duration(seconds: 3), () => setState(() => _currentState = LoadingButtonState.idle));
  },
  child: const Text('Tap me!')
)

参数说明

你可以通过添加expandedSize和loadingSize参数来简单地定义按钮在加载和闲置状态下的大小。

LoadingButton(
  type: LoadingButtonType.elevated,
  state: _currentState,
  expandedSize: const Size(250.0, 80.0),
  loadingSize: const Size(30.0, 30.0),
  onPressed: () {
    // TODO your actions
  },
  child: const Text('Tap me!')
)

贡献指南

所有贡献都是受欢迎的！任何贡献都大大感谢！

示例代码

import 'package:example/provider_theme.dart';
import 'package:example/themes/custom_theme.dart';
import 'package:flutter/material.dart';
import 'package:circular_loading_button/loading_button.dart';
import 'package:circular_loading_button/loading_button_state.dart';
import 'package:provider/provider.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => ThemeProvider(),
      child: Consumer<ThemeProvider>(
          builder: (context, ThemeProvider provider, child) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: provider.currentTheme,
          home: const MyHomePage(title: 'LoadingButton Demo'),
        );
      }),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<LoadingButtonType> types = [
    LoadingButtonType.elevated,
    LoadingButtonType.filled,
    LoadingButtonType.filledTonal,
    LoadingButtonType.outlined
  ];
  List<LoadingButtonState> currentStates = [
    LoadingButtonState.idle,
    LoadingButtonState.idle,
    LoadingButtonState.idle,
    LoadingButtonState.idle
  ];

  int _currentIndex = 0;
  List<ThemeData> themes = [
    CustomTheme.purple,
    CustomTheme.purpleSquared,
    CustomTheme.orange,
    CustomTheme.orangeSquared
  ];

  void _changeState(int index) {
    setState(() {
      currentStates[index] = (currentStates[index] == LoadingButtonState.idle)
          ? LoadingButtonState.loading
          : LoadingButtonState.idle;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    ThemeProvider provider = Provider.of<ThemeProvider>(context, listen: false);

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Center(
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20.0, vertical: 40.0),
            child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
              SegmentedButton<int>(
                showSelectedIcon: false,
                segments: const <ButtonSegment<int>>[
                  ButtonSegment<int>(value: 0, label: Text('Purple')),
                  ButtonSegment<int>(value: 1, label: Text('Purple SQ')),
                  ButtonSegment<int>(value: 2, label: Text('Orange')),
                  ButtonSegment<int>(value: 4, label: Text('Orange SQ')),
                ],
                selected: <int>{_currentIndex},
                onSelectionChanged: (Set<int> newSelection) {
                  setState(() {
                    _currentIndex = newSelection.first;
                  });
                  provider.currentTheme = themes[_currentIndex];
                },
              ),
              ...List.generate(
                types.length,
                (index) => Padding(
                  padding: const EdgeInsets.symmetric(
                      horizontal: 20.0, vertical: 10.0),
                  child: LoadingButton(
                      type: types[index],
                      state: currentStates[index],
                      expandedSize: const Size(250.0, 80.0),
                      loadingSize: const Size(30.0, 30.0),
                      onPressed: () {
                        _changeState(index);
                        Future.delayed(const Duration(seconds: 3),
                            () => _changeState(index));
                      },
                      child: const Text('Tap me!')),
                ),
              ),
            ]),
          ),
        ),
      ),
    );
  }
}