flutter_easyloading如何使用

在Flutter项目中集成了flutter_easyloading插件，但使用时遇到几个问题：1）如何自定义加载动画和文字样式？2）加载框显示时如何禁用用户交互？3）全局初始化后，如何在特定页面覆盖默认配置？4）调用dismiss()方法时偶尔报错"EasyLoading is not show"，该如何处理？希望能提供完整的示例代码说明基本用法和异常情况处理。

2 回复

在Flutter项目中，通过pubspec.yaml添加依赖，然后导入包。使用EasyLoading.show()显示加载动画，EasyLoading.dismiss()关闭。可自定义样式、文本和持续时间。

更多关于flutter_easyloading如何使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


Flutter EasyLoading 是一个轻量级的加载指示器和 Toast 组件库，使用简单且功能丰富。以下是基本使用方法：

1. 安装依赖

在 pubspec.yaml 中添加：

dependencies:
  flutter_easyloading: ^3.0.5

2. 基本配置

在 main.dart 中配置：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
      builder: EasyLoading.init(), // 关键配置
    );
  }
}

3. 基本使用

// 显示加载指示器
EasyLoading.show();

// 显示带文字的加载
EasyLoading.show(status: '加载中...');

// 显示成功提示
EasyLoading.showSuccess('操作成功！');

// 显示错误提示
EasyLoading.showError('操作失败！');

// 显示信息提示
EasyLoading.showInfo('这是提示信息');

// 显示进度条
EasyLoading.showProgress(0.5, status: '上传中...');

// 隐藏加载
EasyLoading.dismiss();

4. 自定义配置

EasyLoading.init(
  loadingStyle: LoadingStyle.dark,
  indicatorType: EasyLoadingIndicatorType.fadingCircle,
  maskType: EasyLoadingMaskType.black,
);

5. 常用配置选项

  • indicatorType: 加载图标类型
  • loadingStyle: 亮色/暗色主题
  • maskType: 背景遮罩类型
  • dismissOnTap: 点击是否关闭

使用示例

void fetchData() async {
  EasyLoading.show(status: '加载数据...');
  try {
    await api.getData();
    EasyLoading.showSuccess('加载成功！');
  } catch (e) {
    EasyLoading.showError('加载失败：$e');
  }
}

这样就能在 Flutter 应用中方便地使用加载提示功能了。

回到顶部