【Flutter App】底部弹窗

1,077 阅读1分钟

在App里面,个人资料编辑和底部弹窗基本上是必有的,在使用getX框架时,看到文档里提到了自带的Get.bottomSheet,使用了一下发现相对还是比较好用的。 效果显示:

image.png

在点击头像后出现底部弹窗,点击其余位置后调用Get.back()返回。

附代码:

GestureDetector(
  onTap: () => Get.bottomSheet(
      Container(
        decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(10), topRight: Radius.circular(10))),
        child: Wrap(
          children: <Widget>[
            ListTile(
                title:Center(child:Text('更换头像')),
                onTap: () {}
            ),
            Divider(indent: 20, // 分割线左侧间距
              endIndent: 20,color: Colors.grey[800],),
            ListTile(
                title:Center(child:Text('查看大图')),
              onTap: () {},
            ),
            Divider(indent: 20, // 分割线左侧间距
              endIndent: 20),
            ListTile(
              title:Center(child:Text('取消')),
              onTap: () => Get.back(),
            ),
          ],
        ),
      )
  ),