颤振中的向上滑动视图

还有 sliding_up_panel 您可以使用flutt库来实现谷歌/苹果地图使用的相同类型的设计。

Draggable (和 DragTarget )不用于您所称的 slide-up view

向上滑动视图 ,来自android world,用于底部对齐的情态动词。 拖动 是使用拖放传输数据;滴

在颤振中,底部模态相当简单:

首先,确保你的树上有a Scaffold 。因为它将把所有东西放在一起。

然后,打电话 showBottomSheet 或 showModalBottomSheet 无论你喜欢什么内容。内容现在将自动显示在屏幕底部。

就这样,你的工作完成了!现在可以选择添加自定义关闭事件。为此,你只需打电话 Navigator.pop(context) 。 但模态和非模态的底页都可以使用常见的手势即时关闭。如后退按钮、导航栏后退、外点击。

完整示例:

class MyExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(title: new Text('Example')),
        body: new Center(
          child: new Builder(builder: (context) {
            return new Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                new RaisedButton(
                  onPressed: () => modal(context),
                  child: new Text("modal"),
                ),
                new RaisedButton(
                  onPressed: () => showSlideupView(context),
                  child: new Text("non modal"),
                ),
              ],
            );
          }),
        ),
      ),
    );
  }

  void showSlideupView(BuildContext context) {
    showBottomSheet(
        context: context,
        builder: (context) {
          return new Container(
            child: new GestureDetector(
              onTap: () => Navigator.pop(context),
              child: new Text("Click me to close this non-modal bottom sheet"),
            ),
          );
        });
  }

  modal(BuildContext context) {
    showModalBottomSheet(
        context: context,
        builder: (context) {
          return new Container(
            child: new Text("This is a modal bottom sheet !"),
          );
        });
  }
}

现在您可以使用 Sliding Up Panel 插件可以做到这一点,太棒了。

要添加此插件并以您想要的方式使用它,请执行以下操作:- SlidingUpPanel

导入的建议:- 一个可拖动的颤振小部件,使实现SlidingUpPanel变得更加容易

另一种选择:从文档 https://api.flutter.dev/flutter/material/showModalBottomSheet.html

Widget build(BuildContext context) {
  return Center(
    child: ElevatedButton(
      child: const Text('showModalBottomSheet'),
      onPressed: () {
        showModalBottomSheet<void>(
          context: context,
          builder: (BuildContext context) {
            return Container(
              height: 200,
              color: Colors.amber,
              child: Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    const Text('Modal BottomSheet'),
                    ElevatedButton(
                      child: const Text('Close BottomSheet'),
                      onPressed: () => Navigator.pop(context),
                    )
                  ],
                ),
              ),
            );
          },
        );
      },
    ),
  );
}