Flutter品牌Logo加载动画插件brand_logo_loading的使用

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

Flutter品牌Logo加载动画插件brand_logo_loading的使用

在应用中添加品牌Logo作为加载条，并通过各种可定制的选项和精美的动画效果来增强用户体验。

开始使用

这是一个Flutter包，您可以轻松将其导入项目中，以创建自定义的加载条。

1. 添加依赖

首先，在pubspec.yaml文件中添加该包的依赖：

dependencies:
  brand_logo_loading: ^版本号

然后运行flutter packages get以获取新的依赖项。

2. 实现示例

以下是一个简单的示例，展示了如何使用brand_logo_loading插件。

示例代码

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

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

class MyApp extends StatelessWidget {
  // 这个widget是您的应用的根组件。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: '品牌Logo加载',
      theme: ThemeData(
        primaryColor: Colors.blue
      ),
      home: MainWidget(),
    );
  }
}

class MainWidget extends StatelessWidget {

  /// 显示单个动画对话框
  _showSingleAnimationDialog(BuildContext context) {
    BrandLogoLoading.balance(
        context: context,
        animationType: Curves.fastOutSlowIn, // 动画曲线
        logo: 'assets/logo.png', // 加载时显示的logo路径
        logoBackdropColor: Colors.transparent, // 背景色
        durationInMilliSeconds: 900, // 动画持续时间（毫秒）
    );
  }

  /// 隐藏加载
  _hideLoading(BuildContext context) {
    BrandLogoLoading.dismissLoading(context: context); // 关闭加载
  }

  [@override](/user/override)
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: Text('品牌Logo加载'),
        ),
        body: InkWell(
          onTap: () => _showSingleAnimationDialog(
            context,
          ),
          child: Padding(
            padding: const EdgeInsets.only(left: 16, top: 16, bottom: 16),
            child: Text(
              '提交',
              style: TextStyle(
                fontSize: 24,
              ),
            ),
          ),
        ),
      );
}

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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用brand_logo_loading插件来加载品牌Logo动画的示例代码。

首先，确保你已经在pubspec.yaml文件中添加了brand_logo_loading依赖：

dependencies:
  flutter:
    sdk: flutter
  brand_logo_loading: ^最新版本号  # 替换为实际的最新版本号

然后，运行flutter pub get来安装依赖。

接下来，你可以在你的Flutter项目中使用BrandLogoLoading组件。下面是一个完整的示例代码，展示了如何使用这个插件来显示一个加载动画。

import 'package:flutter/material.dart';
import 'package:brand_logo_loading/brand_logo_loading.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 = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Brand Logo Loading Example'),
      ),
      body: Center(
        child: isLoading
            ? BrandLogoLoading(
                logo: 'assets/your_logo.png', // 替换为你的Logo图片路径
                logoWidth: 100, // Logo宽度
                logoHeight: 100, // Logo高度
                animationDuration: Duration(seconds: 1), // 动画持续时间
                color: Colors.blue, // 动画颜色
              )
            : Text('Loading Complete!'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 模拟加载完成
          setState(() {
            isLoading = !isLoading;
          });
        },
        tooltip: 'Toggle Loading',
        child: Icon(isLoading ? Icons.stop : Icons.play_arrow),
      ),
    );
  }
}

在这个示例中，我们做了以下几件事：

  1. 导入插件：在文件顶部导入了brand_logo_loading插件。
  2. 创建主应用：定义了一个MyApp类，它是整个Flutter应用的入口。
  3. 创建主页：定义了一个MyHomePage类，它是一个有状态组件，用于控制加载动画的显示和隐藏。
  4. 使用BrandLogoLoading组件：在主页的Center组件中，根据isLoading状态显示加载动画或加载完成后的文本。
  5. 添加浮动按钮：在屏幕底部添加了一个浮动按钮，用于切换加载状态。

注意：

  • 你需要将assets/your_logo.png替换为你实际Logo图片的路径。
  • 确保你的Logo图片已经被添加到项目的assets目录中，并且在pubspec.yaml文件中正确声明。
flutter:
  assets:
    - assets/your_logo.png

希望这个示例能够帮助你理解如何在Flutter项目中使用brand_logo_loading插件来显示品牌Logo加载动画。

回到顶部