flutter pub add overlay_container基于插件公开信息、社区数据与项目使用情况整理的选型参考。
OverlayContainer 是一个 Flutter 小部件，它将其子组件渲染在原始小部件层次结构之外，使元素能够独立于其父布局进行定位。这特别适用于创建覆盖层、工具提示或浮动 UI 组件，这些组件需要显示在其他小部件之上，而不受其容器边界限制。它利用 Flutter 的 Overlay 机制实现此行为，提供了一种简洁高效的方式来管理分层 UI 元素。该包轻量且设计简单，非常适合希望在复杂布局中精确控制小部件定位的开发者。
以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。
A flutter widget which renders its child outside the original widget hierarchy.
This demo is present as an example here. You can also checkout the examples folder.
The child passed to this widget is rendered outside the widget hierarchy as an overlay to the exisiting widget tree. As a result this widget is highly suitable for building custom dropdown options, autocomplete suggestions, dialogs, etc. Think of it as widget placed absolutely and having a positive z-index over the rest of the widget tree. It is actually a friendly wrapper over the Flutter's Overlay and OverlayEntry APIs.
If you've ever used react, this tries to do what React Portal does, in a way.
import 'package:flutter/material.dart';
import 'package:overlay_container/overlay_container.dart';
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Overlay Container Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
// Need to maintain a "show" state either locally or inside
// a bloc.
bool _dropdownShown = false;
void _toggleDropdown() {
setState(() {
_dropdownShown = !_dropdownShown;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Overlay Container Demo Page'),
),
body: Padding(
padding: const EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
RaisedButton(
onPressed: _toggleDropdown,
child: Column(
children: <Widget>[
Text("Dropdown button"),
],
),
),
// By default the overlay (since this is a Column) will
// be added right below the raised button
// but outside the widget tree.
// We can change that by supplying a "position".
OverlayContainer(
show: _dropdownShown,
// Let's position this overlay to the right of the button.
position: OverlayContainerPosition(
// Left position.
150,
// Bottom position.
45,
),
// The content inside the overlay.
child: Container(
height: 70,
padding: const EdgeInsets.all(20),
margin: const EdgeInsets.only(top: 5),
decoration: BoxDecoration(
color: Colors.white,
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.grey[300],
blurRadius: 3,
spreadRadius: 6,
)
],
),
child: Text("I render outside the \nwidget hierarchy."),
),
),
],
),
),
);
}
}
A more elaborate example is found here.
暂无相关数据。