Flutter EasyLoading 使用指南及最佳实践

最新推荐文章于 2024-08-15 09:20:37 发布

杭战昀Grain

最新推荐文章于 2024-08-15 09:20:37 发布

阅读量998

点赞数 16

本文链接：https://blog.csdn.net/gitblog_00465/article/details/141049012

版权

Flutter EasyLoading 使用指南及最佳实践

flutter_easyloading项目地址:https://gitcode.com/gh_mirrors/flu/flutter_easyloading

1. 项目介绍

Flutter EasyLoading 插件概述

Flutter EasyLoading 是一款用于 Flutter 应用中的轻量级 Loading 和 Toast 提示组件。该组件旨在简化全球范围内 Toast 或 Loading 效果的呈现过程,无需关心上下文(Context),即可轻松调用并具有极高的自定义能力。

特点

纯粹 Flutter 实现: 不依赖任何原生插件。
多种效果预设: 内置超过23种 Loading 动画样式以及自定义进度条展示功能。
全面设备支持: 跨平台兼容 iOS、Android 和 Web 平台。

开源地址

访问 GitHub 获取最新版本和贡献代码。

2. 快速启动

添加依赖

在你的 pubspec.yaml 文件中添加以下依赖项:

dependencies:
  flutter_easyloading: ^3.0.5

执行 flutter pub get 命令更新依赖包.

示例代码

创建一个新的 Flutter 项目并导入插件:

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter EasyLoading Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: Text('EasyLoading Test')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                onPressed: () {
                  _showLoading();
                },
                child: Text('Show Loading'),
              ),
              ElevatedButton(
                onPressed: () {
                  _showToast();
                },
                child: Text('Show Toast'),
              ),
            ],
          ),
        ),
      ),
      builder: EasyLoading.init(),
    );
  }

  void _showLoading() async {
    EasyLoading.show(status: '加载中...');
    await Future.delayed(Duration(seconds: 2));
    EasyLoading.dismiss();
  }

  void _showToast() {
    EasyLoading.showToast('这是一个简单的 Toast');
  }
}

运行项目,尝试点击按钮观察 EasyLoading 的效果显示.

3. 应用案例和最佳实践

自定义样式

可以通过设置 EasyLoadingIndicatorType, EasyLoadingStyle 等属性来自定义 Loading 样式：

EasyLoading.show(
  status: '正在处理...',
  indicatorType: EasyLoadingIndicatorType.circleDot,
  maskColor: Colors.grey.withOpacity(.5),
);

多用途使用场景

例如,在数据加载时显示 Loading 或者网络请求失败时显示错误信息：

void fetchData() async {
  try {
    EasyLoading.show(status: '获取数据中...');
    await NetworkService.fetchData();
    EasyLoading.dismiss();
  } catch (e) {
    EasyLoading.showError(e.toString());
  }
}