Flutter浮动层管理插件overlay_widget的使用

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

Flutter浮动层管理插件overlay_widget的使用

简介

overlay_widget 是一个用于在 Flutter 中管理浮动层(如 SnackBar、Toast 和自定义浮动按钮)的插件。它允许开发者根据应用的需求自定义这些浮动层。

示例代码

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "App",
      theme: ThemeData(primaryColor: Colors.indigo),
      home: const MyCustomizedOverlay(),    
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Overlay customizados")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            GenericButton(
              name: 'SnackBarShow',
              onTap: () {
                // 显示类似于 SnackBar 的浮动层
                SnackbarAlert.show(
                  context: context, 
                  child: const SnackbarDemo(),
                );
              },
            ),
            GenericButton(
              name: 'ToastShow',
              onTap: () {
                // 显示类似于 Toast 的浮动层
                ToastAlert.show(
                  context: context,
                  child: const Text(
                    'my massage',
                    softWrap:  true,
                    style: TextStyle(fontSize: 17.0, color: Colors.white),
                  ),
                );
              },
            ),
            GenericButton(
              name: 'FloatingWidget',
              onTap: () {
                // 显示类似于 FloatingActionButton 的浮动层
                FloatingWidgetAlert.show(
                  context: context,
                  widget: Container(
                    height: 60,
                    width: 60,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(15),
                      color: Colors.blue[300],
                    ),
                    child: const Icon(Icons.adb, color: Colors.white, size: 35),
                  )
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

class GenericButton extends StatelessWidget {
  const GenericButton({Key? key, required this.onTap, required this.name}) : super(key: key);
  
  final void Function() onTap;
  final String name;

  @override
  Widget build(BuildContext context) {
      return GestureDetector(
        onTap: onTap,
        child: Container(
          alignment: Alignment.center,
          color: Theme.of(context).primaryColor,
          margin: const EdgeInsets.only(top: 40),
          height: 50,
          width: 300,
          child: Text(
            name,
            style: const TextStyle(color: Colors.white, fontSize: 20),
          ),
        ),
      );
  }
}

详细说明

SnackBar 类型的浮动层

SnackbarAlert.show(
  context: context, 
  child: const SnackbarDemo(),
);

上述代码展示了如何显示一个类似于 SnackBar 的浮动层。SnackbarDemo 是要显示的子组件。

Toast 类型的浮动层

ToastAlert.show(
  context: context,
  child: const Text(
    'my massage',
    softWrap:  true,
    style: TextStyle(fontSize: 17.0, color: Colors.white),
  ),
);

上述代码展示了如何显示一个类似于 Toast 的浮动层。这里显示了一个简单的文本消息。

自定义浮动层

FloatingWidgetAlert.show(
  context: context,
  widget: Container(
    height: 60,
    width: 60,
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(15),
      color: Colors.blue[300],
    ),
    child: const Icon(Icons.adb, color: Colors.white, size: 35),
  )
);

更多关于Flutter浮动层管理插件overlay_widget的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter浮动层管理插件overlay_widget的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,关于在Flutter中使用overlay_widget插件来管理浮动层(Overlay),下面是一个示例代码案例。overlay_widget插件允许你轻松地在Flutter应用中显示和管理浮动层,比如对话框、加载指示器等。虽然Flutter自带的Overlay类也可以实现类似功能,但overlay_widget插件提供了更简洁的API。

首先,确保你已经在pubspec.yaml文件中添加了overlay_widget依赖:

dependencies:
  flutter:
    sdk: flutter
  overlay_widget: ^0.3.0  # 请检查最新版本号

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

以下是一个完整的示例,展示如何使用overlay_widget插件来显示一个简单的浮动层:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Overlay Widget Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                onPressed: () => showOverlay(context),
                child: Text('Show Overlay'),
              ),
            ],
          ),
        ),
      ),
    );
  }

  void showOverlay(BuildContext context) {
    OverlayWidget.of(context).show(
      OverlayEntryBuilder(
        builder: (context) => Positioned(
          width: 200,
          height: 100,
          child: Material(
            color: Colors.black54,
            child: Center(
              child: Text(
                'This is an overlay!',
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

在这个示例中,我们做了以下几件事:

  1. 添加依赖:在pubspec.yaml文件中添加了overlay_widget依赖。
  2. 创建主应用:在MyApp类中,我们创建了一个简单的Flutter应用,包含一个按钮。
  3. 显示浮动层:在按钮的onPressed回调中,我们调用OverlayWidget.of(context).show方法来显示一个浮动层。OverlayEntryBuilder是一个构建器,它接受一个函数,该函数返回一个Widget,这个Widget将被用作浮动层的内容。在这个例子中,我们创建了一个居中的文本浮动层。

这个示例展示了如何使用overlay_widget插件来显示一个简单的浮动层。你可以根据需要自定义浮动层的内容和样式。如果你需要管理多个浮动层(比如堆叠显示),overlay_widget插件也提供了相应的API来隐藏或移除特定的浮动层。

回到顶部