Search code examples
flutterdartkeyboardresponsivebottom-sheet

ScreenUtilInit and bottomsheet - Keyboard hiding bottomSheet textfield


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'),
        ),
      ),
    );
  }
}

Solution

  • 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