loading_transition_button

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个可自定义的过渡按钮，适用于 Flutter，可简化加载过程的动画。它允许开发者使用直观的配置，在正常、加载和成功等状态之间创建流畅且视觉上吸引人的过渡效果。该包支持自定义动画、颜色、图标和文本更改，非常适合在异步操作期间增强用户反馈。只需最少的设置，即可无缝集成到任何 Flutter 应用中，以改善表单提交或数据获取等操作的用户体验。

适合场景

表单提交带加载状态
身份验证流程进度
数据获取指示器
支付处理UI
引导步骤完成

主要特点

可自定义的动画过渡
支持多种按钮状态
可配置的颜色和图标
轻松集成异步操作
响应式设计兼容性

适合对象

寻求流畅加载动画的开发者
需要明确用户反馈的应用程序
具有交互式按钮的UI密集型应用
使用状态管理模式的项目
注重用户体验一致性的团队

使用建议

需要手动处理异步逻辑
有限的平台特定自定义
无内置错误状态支持
复杂布局可能需要额外的样式
依赖外部动画库以实现高级效果

原始 README

以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。

Loading Transition button

A Customizable transition button for Flutter

Getting Started

To use this package, add loading_transition_button as a dependency in your pubspec.yaml file.

dependencies:
 ...
 loading_transition_button: ^0.0.1

How to use

In your project add the following import:

import  'package:loading_transition_button/loading_transition_button.dart';

In order to use this widget you have to use a LoadingButtonController to handler the different states.

final _controller = LoadingButtonController();

This widget starts a loading animation once it's tapped or by using the controller. You can the launcher to init an error animation or stop the loading animation.

LoadingButton(
    color: Colors.blue,
    onSubmit: () => print('onSubmit'),
    controller: _controller,
    errorColor: Colors.red,
    transitionDuration: Duration(seconds: 1),
    child: Text(
    'Hit me!',
    style: Theme.of(context)
        .textTheme
        .bodyText1!
        .copyWith(color: Colors.white),
    ),
),

To support the transition to a different page to have to call the moveToScreen method

_controller.moveToScreen(
    context: context,
    page: SearchPage(),
    stopAnimation: true,
    navigationCallback: (route) =>
        Navigator.of(context).push(route),
),

navigationCallback will send you a new route that you can use for different navigation method like push or replace.

搜索插件、代码仓与 APP 分类

安装插件