我使用底部工具栏(bottom sheet)和列表视图生成器(listview builder)创建了一个应用程序。在底部,有一个文本按钮,当我向上拖动它时,底部工具栏会出现。在该底部工具栏中有一个表单。我用SingleChildScrollView包装了底部工具栏。但是当我点击TextFormField时,键盘会弹出,并且我可以滚动底部工具栏。但是我无法将其向下拖动并关闭底部工具栏。即使我按下手机上的返回箭头以摆脱键盘。
import 'package:flutter/material.dart';
class Home extends StatefulWidget {
const Home({Key key}) : super(key: key);
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
@override
Widget build(BuildContext context) {
var width = MediaQuery.of(context).size.width;
return Scaffold(
resizeToAvoidBottomInset: false,
body: Stack(
children: [
ListView.builder(
itemCount: 1,
itemBuilder: (context, index) {
return Card(
);
}),
Positioned(
bottom: 0,
child: GestureDetector(
onPanEnd: (details) {
if (details.velocity.pixelsPerSecond.dy < 10) {
//Bottom Sheet.................................................................................................................
showModalBottomSheet(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(
top: Radius.circular(25)),
),
backgroundColor: Colors.green,
context: context,
builder: (context) {
return SingleChildScrollView(
child: Container(
padding: EdgeInsets.all(10),
child: Form(
child: Column(
children: [
Icon(Icons.arrow_drop_down),
Text("Drag down to Close"),
Container(
color: Colors.red,
child: Column(
children: [
Row(
children: [
Expanded(
child: TextFormField(
decoration: InputDecoration(
labelText: "Current amount",
),
),
),
],
),
Row(
children: [
Expanded(
child: TextButton(
onPressed: () {},
child: Text("Submit"))),
],
),
],
),
),
],
)),
),
);
});
// Bottom Sheet Ends ......................................................................................................................................................
}
},
child: Container(
color: Colors.blue,
width: width,
padding: EdgeInsets.all(10),
child: Column(
children: [
Icon(Icons.arrow_drop_up),
Text("Drag up to Enter an Account"),
],
),
),
),
)
]),
);
}
}