Flutter覆盖层进度指示插件overlay_progress_indicator的使用

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

Flutter覆盖层进度指示插件overlay_progress_indicator的使用

特性

  • 可以更改背景颜色。
  • 可以添加自定义小部件。

使用自定义小部件

下图展示了如何使用自定义小部件来显示进度指示器：

自定义小部件

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: TestScreen(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            // 显示覆盖层进度指示器，并设置背景颜色和自定义内容
            OverlayProgressIndicator.show(
              context: context,
              backgroundColor: Colors.black45,
              child: Container(
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(20.0),
                ),
                padding: const EdgeInsets.all(30.0),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  mainAxisSize: MainAxisSize.min,
                  children: const [
                    CircularProgressIndicator(), // 显示圆形加载指示器
                    SizedBox(
                      height: 10,
                    ),
                    Text(
                      'Loading', // 显示文本“Loading”
                    ),
                  ],
                ),
              ),
            );

            // 模拟一个耗时操作，例如网络请求
            Future.delayed(const Duration(seconds: 2), () {
              // 隐藏覆盖层进度指示器
              OverlayProgressIndicator.hide();
            });
          },
          child: const Text('Start'), // 显示按钮文本“Start”
        ),
      ),
    );
  }
}

使用默认加载器

下图展示了如何使用默认加载器来显示进度指示器：

默认加载器

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: TestScreen(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            // 显示覆盖层进度指示器，并设置背景颜色
            OverlayProgressIndicator.show(
              context: context,
              backgroundColor: Colors.black45,
            );

            // 模拟一个耗时操作，例如网络请求
            Future.delayed(const Duration(seconds: 2), () {
              // 隐藏覆盖层进度指示器
              OverlayProgressIndicator.hide();
            });
          },
          child: const Text('Start'), // 显示按钮文本“Start”
        ),
      ),
    );
  }
}

更多关于Flutter覆盖层进度指示插件overlay_progress_indicator的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter覆盖层进度指示插件overlay_progress_indicator的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter应用中使用overlay_progress_indicator插件来显示覆盖层进度指示器的示例代码。

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

dependencies:
  flutter:
    sdk: flutter
  overlay_progress_indicator: ^0.4.0  # 请检查最新版本号

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

接下来，你可以在你的Flutter应用中如下使用OverlayProgressIndicator：

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

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

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

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

class _MyHomePageState extends State<MyHomePage> with OverlayProgressIndicatorMixin {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Overlay Progress Indicator Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            // 显示进度指示器
            showOverlayProgressIndicator(context, progress: 0.0);

            // 模拟一个异步操作，例如网络请求
            await Future.delayed(Duration(seconds: 3));

            // 更新进度（可选）
            updateOverlayProgressIndicator(context, progress: 0.5);

            // 再等待一段时间以模拟完成
            await Future.delayed(Duration(seconds: 2));

            // 隐藏进度指示器
            hideOverlayProgressIndicator(context);
          },
          child: Text('Show Progress'),
        ),
      ),
    );
  }
}

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

  1. 引入必要的包。
  2. 创建一个基本的Flutter应用。
  3. 在MyHomePage类中混合了OverlayProgressIndicatorMixin，这是overlay_progress_indicator插件提供的，用于控制覆盖层进度指示器的显示和隐藏。
  4. 在按钮点击事件中，使用showOverlayProgressIndicator显示进度指示器，并使用hideOverlayProgressIndicator隐藏它。期间，可以使用updateOverlayProgressIndicator更新进度（如果需要）。

请注意，updateOverlayProgressIndicator方法是可选的，你可以根据实际需求决定是否更新进度。

运行这个示例应用，当你点击按钮时，会看到一个覆盖在整个应用上的进度指示器，并在3秒后更新进度，再过2秒后隐藏。

回到顶部