打开键盘时如何将所有内容向上推

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,

Answer 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.

Answer 2

Simply putting reverse=true inside the SingleChildScrollView will suffice.

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

Answer 3

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'),
            ),
          ],
        ),
      ),
    ),

Answer 4

Set resizeToAvoidBottomInset property of the Scaffold as true.

Answer 5

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.