Flutter状态显示插件flutter_status_overlay的使用

Flutter状态显示插件flutter_status_overlay的使用

Flutter状态显示插件flutter_status_overlay是一个可定制且易于使用的包，用于在Flutter应用程序中显示状态消息和通知。它提供了一种优雅的方式来展示成功和错误消息，并带有平滑的动画覆盖层。

特性

  • 显示临时的覆盖消息，包括成功和错误状态
  • 可自定义外观，包括颜色和文本样式
  • 调整显示持续时间
  • 平滑的滑入和滑出动画
  • 轻松集成到任何Flutter应用中
  • 通过点击屏幕外区域可以取消显示

截图与演示

此演示展示了Flutter状态显示插件的主要功能：

  • 首先，显示两个状态消息：

    1. 成功消息
    2. 错误消息 两者均在设定的时间后（例如本示例中的5秒）自动关闭

  • 接下来，再显示两个状态消息：

    1. 另一个成功消息
    2. 另一个错误消息 这些消息可以通过点击屏幕上的任意位置来取消

此演示说明了Flutter状态显示插件的灵活性，允许同时支持定时和用户手动取消的状态消息。

安装

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

dependencies:
  flutter_status_overlay: ^0.0.1

然后运行：

$ flutter pub get

使用

在Dart代码中导入该包：

import 'package:flutter_status_overlay/flutter_status_overlay.dart';

要显示一个状态消息，使用StatusOverlay.show()方法：

StatusOverlay.show(
  context,
  title: 'Success',
  message: 'Operation completed successfully!',
  type: StatusType.success,
  duration: const Duration(seconds: 3),
);

要显示一个错误消息：

StatusOverlay.show(
  context,
  title: 'Error',
  message: 'An error occurred during the operation.',
  type: StatusType.error,
  duration: const Duration(seconds: 3),
);

参数

StatusOverlay.show()方法接受以下参数：

  • context: 构建上下文（必需）
  • title: 状态消息的标题（必需）
  • message: 状态消息的内容（必需）
  • type: 状态类型（StatusType.success 或 StatusType.error）（必需）
  • duration: 消息显示的持续时间（可选，默认为5秒）

示例

以下是如何在你的应用中使用Flutter状态显示插件的一个简单示例：

import 'package:flutter_status_overlay/flutter_status_overlay.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 MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('StatusOverlay Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                child: const Text('显示成功状态'),
                onPressed: () {
                  StatusOverlay.show(
                    context,
                    title: 'Success',
                    message: '这是成功消息',
                    type: StatusType.success,
                    duration: const Duration(seconds: 3),
                  );
                },
              ),
              const SizedBox(height: 20),
              ElevatedButton(
                child: const Text('显示错误状态'),
                onPressed: () {
                  StatusOverlay.show(
                    context,
                    title: 'Error',
                    message: '这是错误消息',
                    type: StatusType.error,
                    duration: const Duration(seconds: 3),
                  );
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter状态显示插件flutter_status_overlay的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


flutter_status_overlay 是一个用于在 Flutter 应用中显示加载状态、错误状态或其他状态信息的插件。它可以帮助你在应用中轻松地显示覆盖层，以指示当前的操作状态，例如加载中、成功、错误等。

安装

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

dependencies:
  flutter:
    sdk: flutter
  flutter_status_overlay: ^0.1.0

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

基本用法

flutter_status_overlay 提供了一个 StatusOverlay 小部件，你可以将其包裹在你的 UI 组件上，以便在需要时显示状态覆盖层。

以下是一个简单的示例，展示如何使用 flutter_status_overlay：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: StatusOverlayExample(),
    );
  }
}

class StatusOverlayExample extends StatefulWidget {
  @override
  _StatusOverlayExampleState createState() => _StatusOverlayExampleState();
}

class _StatusOverlayExampleState extends State<StatusOverlayExample> {
  bool _isLoading = false;
  bool _isError = false;

  void _startLoading() {
    setState(() {
      _isLoading = true;
      _isError = false;
    });

    // Simulate a network call
    Future.delayed(Duration(seconds: 2), () {
      setState(() {
        _isLoading = false;
        _isError = true;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Status Overlay Example'),
      ),
      body: StatusOverlay(
        isLoading: _isLoading,
        isError: _isError,
        errorText: 'An error occurred!',
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('Press the button to start loading'),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: _startLoading,
                child: Text('Start Loading'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

参数说明

  • isLoading: 布尔值，表示是否显示加载状态。
  • isError: 布尔值，表示是否显示错误状态。
  • errorText: 字符串，显示在错误状态下的文本。
  • child: 包裹在状态覆盖层下的子组件。

自定义

你可以通过自定义 StatusOverlay 的样式来适应你的应用需求。例如，你可以通过传递 loadingWidget 和 errorWidget 参数来替换默认的加载和错误组件。

StatusOverlay(
  isLoading: _isLoading,
  isError: _isError,
  errorText: 'An error occurred!',
  loadingWidget: CircularProgressIndicator(),
  errorWidget: Icon(Icons.error, color: Colors.red, size: 50),
  child: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text('Press the button to start loading'),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: _startLoading,
          child: Text('Start Loading'),
        ),
      ],
    ),
  ),
)
回到顶部