Bottom sheet covered by keyboard - flutter

Question

friends!
I create FAB bottom sheet and want to make it to be "search" text field. But, when i push the FAB, it turns out, that keyboard appears and lays on the bottom sheet, so I can't see what I really type. Wanting to push bottom sheet up by using solutions recommended here:
Scaffold( resizeToAvoidBottomPadding: false, body: ...)
or
new Scaffold(
body: SingleChildScrollView(child: //your existing body...)
But, it doesn't work. Here is the result:
Bottom Sheet Appears
Keyboard covers the sheet
and here is my code:
return Scaffold(
resizeToAvoidBottomPadding: false,
appBar: new AppBar(
elevation: 0.1,
backgroundColor: Colors.lightBlue,
title: Text('WOW!'),
actions: <Widget>[
new IconButton(
icon: Icon(
Icons.shopping_cart,
color: Colors.white,
),
onPressed: () => Navigator.push(
context, MaterialPageRoute(builder: (context) => new cart())),
)
],
),
floatingActionButton: new FloatingActionButton(
child: const Icon(Icons.search),
backgroundColor: Colors.lightBlue,
onPressed: () => modal.mainBottomSheet(context)),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
bottomNavigationBar: new BottomAppBar(
color: Colors.white,
),
And here is the modal, that the code routes to:
class Modal {mainBottomSheet(BuildContext context) {
showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return Container(
color: Colors.white,
padding: EdgeInsets.symmetric(horizontal: 30),
height: 400,
child: SingleChildScrollView(
child: Column(children: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(vertical: 12.0),
child: Row(
children: <Widget>[
Icon(Icons.search),
Text(' SEARCH'),
],
),
),
Divider(
height: 8.0,
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Row(children: <Widget>[
Expanded(child: Text('Keyword')),
Expanded(
child: TextField(
decoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(vertical: 10.0),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5))),
style: TextStyle(),
),
),],),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Row(children: <Widget>[
Expanded(child: Text('Category')),
Expanded(
child: TextField(
decoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(vertical: 10.0),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5))),
style: TextStyle(),
),
),],),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Row(children: <Widget>[
Expanded(child: Text('Based')),
Expanded(
child: TextField(
decoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(vertical: 10.0),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5))),
style: TextStyle(),
),
),],),
),
Divider(
height: 0.0,
),
ButtonBar(
alignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
width: 125,
child: RaisedButton(
color: Colors.redAccent,
child: Text(
'Cancel',
style: TextStyle(color: Colors.white),
),
onPressed: () {},
),
),
Container(
width: 125,
child: RaisedButton(
color: Colors.lightBlue,
child: Text(
'Find Now!',
style: TextStyle(color: Colors.white),
),
onPressed: () {},
),
),
],
),
]),
));
});
}
}
Has anybody found solutions to solve it?
Thanks!

Answer 1

Please use the following code
showModalBottomSheet(
context: context,
isScrollControlled: true,
builder: (BuildContext context) {
return SingleChildScrollView(
child: Container(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom),
child: PlaceYourChildWidget(),
));
});

Answer 2

add resizeToAvoidBottomInset: true, to your scaffold widget ,
add isScrollControlled: true to your showModalBottomSheet method ,
and wrap all your widgets inside a Padding our animated Padding and set padding to:
padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom)
return Scaffold(
resizeToAvoidBottomInset: true,
backgroundColor: Color(0xFFFCFCFC),
appBar: AppBar()
....
showModalBottomSheet(
backgroundColor: Colors.transparent,
context: context,
isScrollControlled: true,
builder: (context) {
return AnimatedPadding(
duration: Duration(milliseconds: 150),
curve: Curves.easeOut,
padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
child: Container(
...

Answer 3

use isScrollControlled: true, in showModalBottomSheet

Answer 4

import 'dart:async';
import 'dart:ui';
import 'package:flutter/foundation.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bootstrap/flutter_bootstrap.dart';
/*
TextEditingController txtname = TextEditingController();
showModalBottomSheet(
context: context,
isScrollControlled: true,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
),
),
builder: (context) => SingleChildScrollView(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).padding.bottom),
child: new AddItem(
tektk: 'Category',
tektd: 'Add',
txtname: txtname,
ismultik:false,
onPressed: () {}),
),
);
*/
class AddItem extends StatelessWidget {
const AddItem(
{Key? key,
required this.ismultik,
required this.tektd,
required this.tektk,
required this.txtname,
required this.onPressed})
: super(key: key);
final bool ismultik;
final String tektk;
final String tektd;
final VoidCallback? onPressed;
final TextEditingController txtname;
#override
Widget build(BuildContext context) {
final MediaQueryData mediaQueryData = MediaQuery.of(context);
bootstrapGridParameters(gutterSize: 10);
return Padding(
padding: mediaQueryData.viewInsets,
child: Container(
padding: EdgeInsets.only(bottom: 90.0, left: 10.0, right: 10.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
ListTile(
trailing: SizedBox.fromSize(
size: Size(35, 35),
child: ClipOval(
child: Material(
color: Colors.indigo,
child: InkWell(
splashColor: Colors.white,
onTap: () {
Navigator.pop(context);
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.close, color: Colors.white),
],
),
),
),
),
),
),
BootstrapRow(height: 0, children: [
BootstrapCol(
sizes: 'col-md-12',
child: TextField(
style: TextStyle(color: Colors.black),
decoration: new InputDecoration(
border: new OutlineInputBorder(
borderSide: new BorderSide(color: Colors.white)),
labelText: tektk,
),
keyboardType: ismultik == true
? TextInputType.multiline
: TextInputType.text,
maxLines: null,
minLines: 1,
controller: txtname,
),
),
BootstrapCol(
sizes: 'col-md-12',
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.green, // background
onPrimary: Colors.white, // foreground
),
onPressed: onPressed,
child: Text(tektd)),
),
]),
],
),
),
);
}
}