flutter pub add scrollable_panel基于插件公开信息、社区数据与项目使用情况整理的选型参考。
一个 Flutter 包，可实现底部面板的拖动打开和滚动，模仿 Google 地图应用中‘附近地点’面板的行为。它提供流畅的拖动展开交互，并支持在展开的面板内滚动内容。非常适合以紧凑、互动的形式显示详细信息或列表。该包兼容 Android、iOS、Web、macOS、Windows 和 Linux 平台。
以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。
drag to expand and then can scroll contents. similar "Nearby spots" panel on google map app.
https://pub.dev/packages/scrollable_panel
| Properties | Data Type | Description |
|---|---|---|
| builder | ScrollableWidgetBuilder | builder for inner panel view. ScrollableWidgetBuilder type define in draggable_scrollable_sheet.dart. provide PanelScrollController that extends ScrollController. |
| controller | PanelController | control panel from some interaction like button. |
| defaultPanelState | PanelState | set default panel state. (default value PanelState.open) |
| defaultPanelSize | double | set default panel height factor (default value 0.25) |
| minPanelSize | double | set minimum panel height factor. (default value 0) |
| maxPanelSize | double | set maximum panel height factor. (default value 1.0) |
| onOpen | VoidCallback | if non-null, this callback is called when panel state become open |
| onClose | VoidCallback | if non-null, this callback is called when panel state become close |
| onExpand | VoidCallback | if non-null, this callback is called when panel state become expand |
| Action | Data Type | Description |
|---|---|---|
| open | void | open panel. panel animate to defaultPanelSize. |
| expand | void | expand panel. panel animate to maxPanelSize. |
| close | void | close panel. panel animate to minPanelSize. |
| animateTo | double | animate panel to value height. |
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
PanelController _panelController = PanelController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('scrollable panel'),
),
body: Stack(
children: <Widget>[
InkWell(
onTap: () {
_panelController.toDefault();
},
child: _FirstView(),
),
ScrollablePanel(
controller: _panelController,
builder: (context, controller) {
return SingleChildScrollView(
controller: controller,
child: _SecondView(),
);
},
),
],
),
);
}
}
List<double> anchor property to use multi snapping point.暂无相关数据。