Flutter BottomSheet底部彈窗效果

BottomSheet是一個從屏幕底部滑起的列表（以顯示更多的內容）。你能夠調用showBottomSheet()或showModalBottomSheet彈出

import 'package:flutter/material.dart'; import 'dart:async'; class BottomSheetDemo extends StatefulWidget { @override _BottomSheetDemoState createState() => _BottomSheetDemoState(); } class _BottomSheetDemoState extends State<BottomSheetDemo> { final _bottomSheetScaffoldKey = GlobalKey<ScaffoldState>(); _openBottomSheet() { _bottomSheetScaffoldKey .currentState .showBottomSheet((BuildContext context) { return BottomAppBar( child: Container( height: 90.0, width: double.infinity, padding: EdgeInsets.all(16.0), child: Row( children: <Widget>[ Icon(Icons.pause_circle_outline), SizedBox(width: 16.0,), Text('01:30 / 03:30'), Expanded( child: Text('從頭再來-劉歡', textAlign: TextAlign.right,), ), ], ), ), ); }); } Future _openModalBottomSheet() async { final option = await showModalBottomSheet( context: context, builder: (BuildContext context) { return Container( height: 200.0, child: Column( children: <Widget>[ ListTile( title: Text('拍照',textAlign: TextAlign.center), onTap: () { Navigator.pop(context, '拍照'); }, ), ListTile( title: Text('從相冊選擇',textAlign: TextAlign.center), onTap: () { Navigator.pop(context, '從相冊選擇'); }, ), ListTile( title: Text('取消',textAlign: TextAlign.center), onTap: () { Navigator.pop(context, '取消'); }, ), ], ), ); } ); print(option); } @override Widget build(BuildContext context) { return Scaffold( key: _bottomSheetScaffoldKey, appBar: AppBar( title: Text('BottomSheetDemo'), elevation: 0.0, ), body: Container( padding: EdgeInsets.all(16.0), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ FlatButton( child: Text('Open BottomSheet'), onPressed: _openBottomSheet, ), FlatButton( child: Text('Modal BottomSheet'), onPressed: _openModalBottomSheet, ), ] ), ], ), ), ); } }

 

效果：

文檔：https://api.flutter.dev/flutter/material/BottomSheet-class.html