Flutter加载动画插件floading的使用

发布于 1周前 作者 ionicwang 来自 Flutter

Flutter加载动画插件floading的使用

floading

帮助开发者以最便捷的方式创建加载动画。

轻松创建和管理加载动画，支持全局定制和一次性定制，支持定时消失。

作者：Changyi(fupeng.fp@alibaba-inc.com)

English | 简体中文

喜欢它吗？请给个 Star 🥰 ！

✨ 特性

  • 提供最便捷的方式来控制加载动画的显示/隐藏
  • 支持修改背景颜色
  • 支持定时自动隐藏
  • 支持本地和全局自定义样式

🛠 指南

参数

  /// 显示加载动画
  /// [loading]-自定义加载视图
  /// [duration]-指定毫秒数后自动隐藏。如果为null，则不自动隐藏
  /// [color]-加载时的背景颜色，默认为[Colors.black54]
  /// [closable]-是否可以通过返回键关闭加载
  static show(BuildContext context,
      {Widget loading, int duration, Color color, bool closable = false})


  /// 隐藏加载动画
  /// [context] 有时，开发者可能需要自行传入当前 [context]。
  ///
  /// Hide loading
  /// [context] Sometimes, developers may need to pass in the current [context] by themselves.
  static hide({BuildContext context})

🌈 显示/隐藏

/// 显示
///
/// show 
FLoading.show(context);

/// 隐藏
///
/// hide 
FLoading.hide();

使用 FLoading 实现加载动画的显示和隐藏非常简单。

💎 自定义样式

FLoading 允许开发者自由定义全局加载样式或单次加载样式。

定义全局样式
/// 定义全局加载样式
///
/// Define global loading style
FLoading.init(CupertinoActivityIndicator(), backgroundColor: Colors.black38);

/// 显示
///
/// show
FLoading.show(context);
单次样式配置
FLoading.show(
  context,
  
  /// 通过 loading 配置单次样式
  ///
  /// One-shot style configuration via loading
  loading: Image.asset(
    "assets/loading_gif_2.gif",
    width: 100,
    height: 100,
  ));

🛰 定时隐藏和背景颜色

FLoading.show(
  context,
  loading: Image.asset(
    "assets/loading_gif_1.gif",
    width: 200,
    height: 200,
  ),

  /// 定时隐藏
  ///
  /// Timed hiding
  duration: 3000,

  /// 配置背景样式
  ///
  /// Configure background style
  color: Colors.red[300].withOpacity(0.3),
)

😃 如何使用？

在项目 pubspec.yaml 文件中添加依赖：

🌐 pub 依赖

dependencies:
  floading: ^<version number>

⚠️ 注意，前往 [pub] (https://pub.dev/packages/floading) 获取最新版本号。

🖥 Git 依赖

dependencies:
  floading:
    git:
      url: 'git@github.com:Fliggy-Mobile/floading.git'
      ref: '<Branch number or tag number>'

⚠️ 注意，参考 [FLoading] (https://github.com/Fliggy-Mobile/floading) 官方项目获取分支号或标签。

💡 许可证

Copyright 2020-present Fliggy Android Team &lt;alitrip_android@list.alibaba-inc.com&gt;.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at following link.

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

Like it? Please cast your Star 🥰 ！

如何运行示例项目？

  1. 克隆 项目到本地
  2. 进入项目 example 目录并运行以下命令
flutter create .
  1. 在 example 中运行示例
import 'dart:async';

import 'package:fbutton/fbutton.dart';
import 'package:fcommon/fcommon.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:floading/floading.dart';
import 'package:flutter/rendering.dart';

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

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  void initState() {
    super.initState();
    FLoading.init(CupertinoActivityIndicator(), backgroundColor: Colors.black38);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Builder(builder: (context) {
        return Scaffold(
          backgroundColor: mainBackgroundColor,
          appBar: AppBar(
            backgroundColor: mainBackgroundColor,
            title: const Text(
              'FLoading',
              style: TextStyle(color: mainTextTitleColor),
            ),
            centerTitle: true,
          ),
          body: SingleChildScrollView(
            child: Container(
              alignment: Alignment.center,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  buildTitle("基础 FLoading"),
                  buildMiddleMargin(),
                  buildMiddleMargin(),
                  buildMiddleMargin(),

                  /// 基础 FLoading
                  FButton(
                    text: "点击显示 FLoading",
                    style: TextStyle(color: mainTextTitleColor),
                    color: mainBackgroundColor,
                    padding: EdgeInsets.all(12.0),
                    onPressed: () {
                      FLoading.show(context, duration: 2000);
                    },
                    isSupportNeumorphism: true,
                  ),

                  buildMiddleMargin(),
                  buildMiddleMargin(),
                  buildMiddleMargin(),
                  buildTitle("自定义 FLoading"),
                  buildMiddleMargin(),
                  buildMiddleMargin(),
                  buildMiddleMargin(),

                  /// 自定义 FLoading
                  FButton(
                    text: "点击显示 FLoading",
                    style: TextStyle(color: mainTextTitleColor),
                    color: mainBackgroundColor,
                    padding: EdgeInsets.all(12.0),
                    onPressed: () {
                      FLoading.show(context,
                          loading: Image.asset(
                            "assets/loading_gif_2.gif",
                            width: 100,
                            height: 100,
                          ),
                          duration: 5000);
                    },
                    isSupportNeumorphism: true,
                  ),

                  buildMiddleMargin(),
                  buildMiddleMargin(),
                  buildMiddleMargin(),
                  buildTitle("背景颜色"),
                  buildMiddleMargin(),
                  buildMiddleMargin(),
                  buildMiddleMargin(),

                  FButton(
                    text: "点击显示 FLoading",
                    style: TextStyle(color: mainTextTitleColor),
                    color: mainBackgroundColor,
                    padding: EdgeInsets.all(12.0),
                    onPressed: () {
                      FLoading.show(
                        context,
                        loading: Image.asset(
                          "assets/loading_gif_1.gif",
                          width: 200,
                          height: 200,
                        ),
                        duration: 3000,
                        color: Colors.red[300].withOpacity(0.3),
                      );

                      Timer(Duration(milliseconds: 800), (){
                            FLoading.hide(context: context);
                      });
                    },
                    isSupportNeumorphism: true,
                  ),

                  buildBiggestMargin(),
                  buildBiggestMargin(),
                ],
              ),
            ),
          ),
        );
      }),
    );
  }
}

更多关于Flutter加载动画插件floading的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter加载动画插件floading的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用floading加载动画插件的示例代码。floading是一个流行的Flutter包，提供了多种加载动画效果。

步骤 1: 添加依赖

首先，你需要在pubspec.yaml文件中添加floading依赖：

dependencies:
  flutter:
    sdk: flutter
  floading: ^最新版本号  # 请替换为最新版本号

然后运行flutter pub get来获取依赖。

步骤 2: 导入包

在你的Dart文件中导入floading包：

import 'package:floading/floading.dart';

步骤 3: 使用加载动画

以下是一个简单的示例，展示了如何在Flutter应用中使用floading提供的加载动画：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool isLoading = false;

  void _startLoading() {
    setState(() {
      isLoading = true;
    });

    // 模拟加载过程
    Future.delayed(Duration(seconds: 3), () {
      setState(() {
        isLoading = false;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Floading 示例'),
      ),
      body: Center(
        child: isLoading
            ? Floading(
                size: 50.0,
                type: FloadingType.ballPulseSync, // 可以更换为其他类型，如 FloadingType.cubeGrid
                color: Colors.blue,
              )
            : ElevatedButton(
                onPressed: _startLoading,
                child: Text('开始加载'),
              ),
      ),
    );
  }
}

解释

  1. 添加依赖：在pubspec.yaml中添加floading依赖。
  2. 导入包：在需要使用floading的Dart文件中导入该包。
  3. 使用加载动画：
    • 创建一个StatefulWidget，并在其状态类中定义一个isLoading布尔变量来控制加载动画的显示。
    • 使用ElevatedButton来触发加载过程，当点击按钮时，将isLoading设置为true，并在3秒后将其重置为false。
    • 根据isLoading的值来决定是显示加载动画还是显示按钮。

你可以根据需要更改Floading的属性，如size、type和color，以及触发加载动画的时机和条件。floading包提供了多种加载动画类型，你可以在floading的pub.dev页面上查看所有可用的动画类型。

回到顶部