我已经创建了一个带有底部表和列表视图构建器的应用程序。在底部,当我向上拖动时,有一个文本按钮,底部表必须出现。那个底页有一个表格。我用 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"),
],
),
),
),
)
]),
);
}
}