how to push all content up when open keyboard

Question

Is it possible to push all content up when open keyboard? (not only textField area, whole page push up)

   showModalBottomSheet(
       context: context,
       builder: (BuildContext context) {
            return BottomSheet();
       },
   isScrollControlled: true);

BottomSheet class

class BottomSheet extends StatefulWidget {
  @override
  _BottomSheetState createState() => _BottomSheetState();
}

class _BottomSheetState extends State<BottomSheet> {

  @override
  Widget build(BuildContext context) {
    return
      SingleChildScrollView(
        padding: EdgeInsets.only(
            bottom: MediaQuery.of(context).viewInsets.bottom),
            child: Container(
                child: Column(
                  children: <Widget>[...

I want to like this push-up,

But Current output is,

score 2 · Answer 1 · answered Jan 04 '22 at 21:31

Simply putting reverse=true inside the SingleChildScrollView will suffice.

Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
      child: SingleChildScrollView(
        reverse: true,
        child: Container(
          ........
          ........

score 1 · Answer 2 · answered Sep 12 '20 at 08:58

1

You can simply give the widget a bottom position of MediaQuery.of(context).viewInsets.bottom if you are using a stack.

In your case, set margin : to MediaQuery.of(context).viewInsets.bottom instead of padding.

answered Sep 12 '20 at 08:58

Kelvin Mboto

361
6
15

score 1 · Answer 3 · answered May 23 '23 at 09:56

In my case I am using the package flutter_screenutil, that now have a useInheritedMediaQuery field. I set it to true, and it is now working.

ScreenUtilInit(
      useInheritedMediaQuery: true,
      designSize: const Size(376, 812),
      builder: (context, child) {
        return const Scaffold(
          resizeToAvoidBottomInset: true,
          body: Column(
            children: [
              Spacer(),
              TextField(),
            ],
          ),
        );
      },
    );

score 0 · Answer 4 · edited Feb 27 '22 at 08:18

Wrap your whole widget inside a container and provide that container padding like this, it will work.

child: Container(
      padding: EdgeInsets.only(
        top: 25.0,
        bottom: MediaQuery.of(context).viewInsets.bottom,
        left: 25.0,
        right: 25.0,
      ),
      child: Form(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            TextFormField(
              decoration: InputDecoration(
                hintText: 'Email',
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10.0),
                ),
              ),
              keyboardType: TextInputType.emailAddress,
              validator: (value) {
                return _isEmailValid(value);
              },
              textInputAction: TextInputAction.next,
              onSaved: (value) {},
              controller: _emailController,
            ),
            SizedBox(height: 10),
            TextFormField(
              obscureText: true,
              decoration: InputDecoration(
                hintText: 'Password',
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10.0),
                ),
              ),
              keyboardType: TextInputType.emailAddress,
              validator: (value) {
                return _isEmailValid(value);
              },
              textInputAction: TextInputAction.done,
              onSaved: (value) {},
              controller: _passwordController,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                TextButton(
                  onPressed: () {},
                  child: const Text('Forgot Password'),
                ),
              ],
            ),
            ElevatedButton(
              style: ElevatedButton.styleFrom(
                side: const BorderSide(width: 1.3, color: Colors.white),
                shadowColor: Colors.white,
              ),
              onPressed: () {},
              child: const Text('Login'),
            ),
            TextButton(
              onPressed: () {},
              child: Text('Not have any Accoung? Sign Up'),
            ),
          ],
        ),
      ),
    ),

score 0 · Answer 5 · edited May 09 '23 at 07:02

you can use this it will scroll content up when you type :

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        ****resizeToAvoidBottomInset: true, // set this to true****
        appBar: AppBar(
          title: Text('Flutter Keyboard Example'),
        ),
        body: SingleChildScrollView( // wrap your content in a SingleChildScrollView widget
          child: Center(
content )))

score -1 · Answer 6 · answered Oct 04 '19 at 17:35

-1

Set resizeToAvoidBottomInset property of the Scaffold as true.

answered Oct 04 '19 at 17:35

Manas Gupta

104
3

1

Can you please share the minimal code so I can reproduce the problem – Manas Gupta Oct 04 '19 at 17:40
full code here https://github.com/bhanuka96/sharecode/blob/master/post.dart – BIS Tech Oct 04 '19 at 17:47
Try setting `maintainBottomViewPadding` of the SafeArea to true and also set `resizeToAvoidBottomInset` to true. – Manas Gupta Oct 04 '19 at 18:33
nothing happening..I think it's impossible to push the whole bottom sheet up – BIS Tech Oct 05 '19 at 02:01
Check this out https://stackoverflow.com/questions/53869078/how-to-move-bottomsheet-along-with-keyboard-which-has-textfieldautofocused-is-t – Manas Gupta Oct 05 '19 at 04:34

score -1 · Answer 7 · answered Aug 15 '20 at 16:59

showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      builder: (BuildContext context) {
        return Container(
          padding: EdgeInsets.only(
            bottom: MediaQuery.of(context).viewInsets.bottom,
          ),
          child: //your code
        );
      }
)

This works for me. Maybe try moving your padding inside the container.

how to push all content up when open keyboard

7 Answers7

Linked