i used to fix the hidden Bottomsheet using the isScrollControlled: true
, along with padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom)
, to fix this issue, but lately i started using the ScreenUtilInit for a responsive content; but now the bottomSheet is not shown on the top of the keyboard if a wrap my app with the ScreenUtilInit widget! everythings works fine without it.
anybody could give me a suggestion? (how to avoid this, or a better solution for responsive content) and thanks in advance.
this is my code:
void main() {
runApp(
ScreenUtilInit(
designSize: Size(375, 812),
builder: (context, child) => MyApp(),
),
);
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: true,
floatingActionButton: FloatingActionButton(
onPressed: () {
showModalBottomSheet(
isScrollControlled: true,
context: context,
builder: (BuildContext context) {
return Container(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
TextField(
autofocus: true,
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Enter a search term'),
),
SizedBox(height: 5.0),
TextField(
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Enter a search term'),
),
],
),
);
},
);
},
child: Icon(Icons.add),
),
appBar: AppBar(
title: Text('Scrollable Sheet Example'),
),
body: Container(
child: Center(
child: Text('Main Content'),
),
),
);
}
}
i fixed this by adding the useInheritedMediaQuery: true,
like so:
void main() {
runApp(
ScreenUtilInit(
designSize: Size(375, 812),
useInheritedMediaQuery: true,
builder: (context, child) => MyApp(),
),
);
}
thanks to this answer here