Flutter加载提示插件flutter_overlay_loader的使用

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

Flutter加载提示插件flutter_overlay_loader的使用

插件简介

flutter_overlay_loader 是一个简单的Flutter包，用于在获取远程数据或执行任何长时间运行的异步任务时管理加载提示。它易于使用，只需几行代码即可显示加载提示。

Build Passing Pub Version Pub Likes Pub Points Pub Popularity

安装

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

dependencies:
  flutter_overlay_loader: ^2.0.0

导入

在 Dart 文件中导入包：

import 'package:flutter_overlay_loader/flutter_overlay_loader.dart';

使用方法

显示加载提示

当开始网络请求或其他长时间运行的任务时，调用以下代码显示加载提示：

Loader.show(context, progressIndicator: LinearProgressIndicator());

隐藏加载提示

任务完成后，调用以下代码隐藏加载提示：

Loader.hide();

自定义加载提示

你可以根据需要自定义加载提示的外观和行为：

Loader.show(context,
  isSafeAreaOverlay: false,
  isBottomBarOverlay: false,
  overlayFromBottom: 80,
  overlayColor: Colors.black26,
  progressIndicator: CircularProgressIndicator(backgroundColor: Colors.red),
  themeData: Theme.of(context)
    .copyWith(colorScheme: ColorScheme.fromSwatch().copyWith(secondary: Colors.green))
);

检查加载提示是否显示

你可以使用 Loader.isShown 属性来检查加载提示是否正在显示：

WillPopScope(
  child: //TODO , 
  onWillPop: () async => !Loader.isShown
)

在 dispose 方法中隐藏加载提示

确保在组件销毁时隐藏加载提示：

@override
void dispose() {
  Loader.hide();

  super.dispose();
}

示例代码

以下是一个完整的示例代码，展示了如何使用 flutter_overlay_loader 插件：

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

void main() => runApp(MyApp());

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, this.title = "Loader"}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  @override
  void dispose() {
    Loader.hide();
    print("Called dispose");

    super.dispose();
  }

  void _onItemTapped(int index) {}

  @override
  Widget build(BuildContext context) {
    final bottomPadding = MediaQuery.of(context).viewInsets.bottom;

    print("bottomPadding $bottomPadding");
    return WillPopScope(
      child: Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
          toolbarHeight: 100,
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.end,
            children: <Widget>[
              Text(
                'Loading...',
              ),
              ElevatedButton(
                  child: Text("Show Loader 1"),
                  onPressed: () {
                    print("Loader is being shown before ${Loader.isShown}");

                    ///Show default loader here
                    Loader.show(context,
                        progressIndicator: LinearProgressIndicator());

                    print("Loader is being shown after ${Loader.isShown}");

                    ///loader hide after 10 seconds
                    Future.delayed(Duration(seconds: 10), () {
                      Loader.hide();
                      print("Loader is being shown after hide ${Loader.isShown}");
                    });
                  }),
              ElevatedButton(
                  child: Text("Show Loader 2"),
                  onPressed: () {
                    print("Loader is being shown before ${Loader.isShown}");

                    ///Show loader 2 here
                    Loader.show(context,
                        isSafeAreaOverlay: false,
                        isBottomBarOverlay: false,
                        overlayFromBottom: 80,
                        overlayColor: Colors.black26,
                        progressIndicator: CircularProgressIndicator(
                          backgroundColor: Colors.red,
                        ),
                        themeData: Theme.of(context)
                            .copyWith(colorScheme: ColorScheme.fromSwatch().copyWith(secondary: Colors.green)));

                    print("Loader is being shown after ${Loader.isShown}");

                    ///loader hide after 3 seconds
                    Future.delayed(Duration(seconds: 3), () {
                      Loader.hide();

                      print("Loader is being shown after hide ${Loader.isShown}");
                    });
                  }),
              ElevatedButton(
                  child: Text("Show Loader 3"),
                  onPressed: () {
                    ///Show loader 3 here
                    Loader.show(context,
                        isAppbarOverlay: false,
                        overlayFromTop: 100,
                        progressIndicator: CircularProgressIndicator(),
                        themeData: Theme.of(context)
                            .copyWith(colorScheme: ColorScheme.fromSwatch().copyWith(secondary: Colors.black38)),
                        overlayColor: Color(0x99E8EAF6));

                    ///loader hide after 3 seconds
                    Future.delayed(Duration(seconds: 3), () {
                      Loader.hide();
                    });
                  }),
              ElevatedButton(
                  child: Text("Show Loader 4"),
                  onPressed: () {
                    ///Show loader 4 here
                    Loader.show(context,
                        isSafeAreaOverlay: false,
                        progressIndicator: CircularProgressIndicator(),
                        isBottomBarOverlay: false,
                        overlayFromBottom: 80,
                        themeData: Theme.of(context)
                            .copyWith(colorScheme: ColorScheme.fromSwatch().copyWith(secondary: Colors.black38)),
                        overlayColor: Color(0x99E8EAF6));

                    ///loader hide after 3 seconds
                    Future.delayed(Duration(seconds: 3), () {
                      Loader.hide();
                    });
                  }),
            ],
          ),
        ),
        bottomNavigationBar: BottomNavigationBar(
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.business),
              label: 'Business',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.school),
              label: 'School',
            ),
          ],
          currentIndex: 0,
          selectedItemColor: Colors.amber[800],
          onTap: _onItemTapped,
          iconSize: 50,
        ),
      ),
      onWillPop: () async => !Loader.isShown,
    );
  }
}

通过以上步骤和示例代码，你可以轻松地在Flutter应用中集成并使用 flutter_overlay_loader 插件来管理加载提示。希望这些信息对你有所帮助！


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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何在Flutter项目中使用flutter_overlay_loader插件来实现加载提示的示例代码。这个插件允许你在应用中显示一个全屏的加载指示器。

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

dependencies:
  flutter:
    sdk: flutter
  flutter_overlay_loader: ^3.0.1  # 请检查最新版本号

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

接下来，你可以在你的Flutter应用中配置和使用flutter_overlay_loader。以下是一个完整的示例：

import 'package:flutter/material.dart';
import 'package:flutter_overlay_loader/flutter_overlay_loader.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> {
  final FlutterOverlayLoader _flutterOverlayLoader = FlutterOverlayLoader();

  @override
  void initState() {
    super.initState();
    // Initialize the loader
    _flutterOverlayLoader.init(context);
  }

  @override
  void dispose() {
    // Dispose the loader when the widget is disposed
    _flutterOverlayLoader.dispose();
    super.dispose();
  }

  void _showLoader() {
    // Show the loader with default settings
    _flutterOverlayLoader.show();

    // Simulate a network request or some long-running task
    Future.delayed(Duration(seconds: 3), () {
      // Hide the loader after 3 seconds
      _flutterOverlayLoader.hide();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Overlay Loader Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _showLoader,
          child: Text('Show Loader'),
        ),
      ),
    );
  }
}

在这个示例中：

  1. 在pubspec.yaml中添加了flutter_overlay_loader依赖。
  2. 创建了一个简单的Flutter应用，其中包含一个按钮。
  3. 在_MyHomePageState类中初始化了FlutterOverlayLoader实例。
  4. 在按钮点击事件_showLoader中调用了_flutterOverlayLoader.show()来显示加载提示，并在3秒后调用_flutterOverlayLoader.hide()来隐藏加载提示。

这个示例展示了如何使用flutter_overlay_loader来显示和隐藏加载提示。你可以根据需要自定义加载提示的样式和行为，flutter_overlay_loader提供了丰富的配置选项。

回到顶部