加载按钮

使用 loading_btn 包创建带有很多属性的动画加载按钮。

入门

LoadingBtn 包可以帮助您创建漂亮的按钮加载动画，并带有自定义加载器。LoadingBtn 本质上是一个 ElevatedButton 小部件，这意味着您可以使用普通的参数，并附带一些额外的功能。

演示

用法

带 CircularProgress 小部件的加载按钮

LoadingBtn(
    height: 50,
    borderRadius: 8,
    animate: true,
    color: Colors.green,
    width: MediaQuery.of(context).size.width * 0.45,
    loader: Container(
        padding: const EdgeInsets.all(10),
        width: 40,
        height: 40,
        child: const CircularProgressIndicator(
            valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
        ),
    ),
    child: const Text("Login"),
    onTap: (startLoading, stopLoading, btnState) async {
        if (btnState == ButtonState.idle) {
            startLoading();
            // call your network api
            await Future.delayed(const Duration(seconds: 5));
            stopLoading();
        }
    },
),

带自定义文本的加载按钮

LoadingBtn(
    height: 50,
    borderRadius: 8,
    roundLoadingShape: false,
    color: Colors.blueAccent,
    width: MediaQuery.of(context).size.width * 0.45,
    minWidth: MediaQuery.of(context).size.width * 0.30,
    loader: const Text("Loading..."),
    child: const Text("Login"),
    onTap: (startLoading, stopLoading, btnState) async {
        if (btnState == ButtonState.idle) {
            startLoading();
            // call your network api
            await Future.delayed(const Duration(seconds: 5));
            stopLoading();
        }
    },
),

带自定义加载器的加载按钮

LoadingBtn(
    height: 50,
    borderRadius: 8,
    animate: true,
    color: Colors.deepOrange,
    width: MediaQuery.of(context).size.width * 0.45,
    loader: Container(
      padding: const EdgeInsets.all(10),
      child: const Center(
          child: SpinKitDoubleBounce(
            color: Colors.white,
          ),
      ),
    ),
    child: const Text("Login"),
    onTap: (startLoading, stopLoading, btnState) async {
        if (btnState == ButtonState.idle) {
            startLoading();
            // call your network api
            await Future.delayed(const Duration(seconds: 5));
            stopLoading();
        }
    },
),

属性

  • animate(默认 false)：点击按钮时，它会使用宽度进行动画。
  • roundLoadingShape(默认 true)：在忙碌/加载状态下，它会使用 border radius 创建一个圆形按钮。
  • width：按钮在空闲状态下的宽度。
  • minWidth：按钮在忙碌/加载状态下的宽度。默认值等于高度，以创建完全圆形的加载按钮。
  • borderRadius：按钮的圆角。
  • borderSide：BorderSide，用于为按钮提供边框颜色和宽度。
  • child：按钮在空闲状态下的内容。
  • loader：按钮在忙碌/加载状态下的内容。
  • onTap：(startLoading, stopLoading, btnState) : 点击按钮时调用的函数。
  • duration：动画的持续时间。
  • curve：动画的曲线。
  • reverseCurve：反向动画的曲线。

MIT 许可

版权所有 (c) 2022 Yasin Mohammadi

特此授予任何人获得本软件及相关文档文件（“软件”）副本的权利，以便无限制地处理该软件，包括但不限于使用、复制、修改、合并、发布、分发、再许可和/或销售软件副本的权利，并允许向其提供软件的人这样做，但须遵守以下条件：

以上版权声明和本许可声明应包含在软件的所有副本或实质性部分中。

本软件按“原样”提供，不附带任何形式的担保，无论是明示的还是暗示的，包括但不限于适销性、特定用途的适用性和非侵权的担保。在任何情况下，作者或版权所有者均不对任何索赔、损害或其他责任负责，无论是在合同、侵权或其他方面的诉讼，引起的或与软件的使用或其他交易有关。

GitHub

查看 Github