实现代码:
import 'package:flutter/material.dart';
import 'dart:async';
// 有状态widget
class BottomSheetDemo extends StatefulWidget {
@override
_BottomSheetDemoState createState() => _BottomSheetDemoState();
}
// 状态变化
class _BottomSheetDemoState extends State<BottomSheetDemo> {
final _bottomSheetScaffoldKey = GlobalKey<ScaffoldState>();
// 打开BottomSheet
_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('Fix you - Coldplay', textAlign: TextAlign.right,),
),
],
),
),
);
});
}
// 异步 模态 bottomsheet
Future _openModalBottomSheet() async {
final option = await showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return Container(
height: 200.0,
child: Column(
children: <Widget>[
ListTile(
title: Text('Option A'),
onTap: () {
Navigator.pop(context, 'A');
},
),
ListTile(
title: Text('Option B'),
onTap: () {
Navigator.pop(context, 'B');
},
),
ListTile(
title: Text('Option C'),
onTap: () {
Navigator.pop(context, 'C');
},
),
],
),
);
}
);
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,
),
]
),
],
),
),
);
}
}