键盘关闭 Flutter 中的 Modal BottomSheet

Question

When I want to write some text in Textfield, the Keyboard closes my modal bottom sheet. I can't understand, why this is happening. I try to used this line of code:

padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom)

But in output I get textfield, which stretches.

I spent a lot of time to solve this problem and I really want to close this issue.

This is full code

import 'package:flutter/material.dart';
class NutritionScreen extends StatefulWidget {
  @override
  _NutritionScreenState createState() => _NutritionScreenState();
}

class _NutritionScreenState extends State<NutritionScreen> {
  double height = 500.0;
  void _modalBottomSheetMenu(){
    showModalBottomSheet(
        context: context,
        builder: (builder){
          return new Container(
            height: height,
            color: Colors.transparent, //could change this to Color(0xFF737373),
            //so you don't have to change MaterialApp canvasColor
            child: new Container(
                decoration: new BoxDecoration(
                    color: Colors.white,
                    borderRadius: new BorderRadius.only(
                        topLeft: const Radius.circular(10.0),
                        topRight: const Radius.circular(10.0))),
                child: SingleChildScrollView(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisSize: MainAxisSize.max,
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: <Widget>[
                    Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text(
                          "Питание",
                          textAlign: TextAlign.center,
                          style: TextStyle(color: Colors.black, fontSize: 26.0),
                        )),
                    Padding(
                        padding: EdgeInsets.only(
                            bottom: 8.0,
                            top: 8.0,
                            right: 8.0,
                            left: 8.0
                        ),
                        child: TextField(
                          maxLines: 1,
                          textDirection: TextDirection.ltr,
//                        controller: customcintroller,
                        style: TextStyle(
                          color: Colors.lightGreen[400],
                          fontSize: 18.5),
                        decoration: InputDecoration(
                          contentPadding: EdgeInsets.only(bottom: 4.0),
                          labelText: "Возраст",
                          alignLabelWithHint: false,
                      ),
                          keyboardType: TextInputType.phone,
                          textInputAction: TextInputAction.done,
                    )),
                    Padding(
                        padding: EdgeInsets.only(
                            bottom: 8.0,
                            top: 8.0,
                            right: 8.0,
                            left: 8.0
                        ),
                        child: TextField(
                          maxLines: 1,
                          textDirection: TextDirection.ltr,
//                        controller: customcintroller,
                          style: TextStyle(
                              color: Colors.lightGreen[400],
                              fontSize: 18.5),
                          decoration: InputDecoration(
                            contentPadding: EdgeInsets.only(bottom: 4.0),
                            labelText: "Рост",
                            alignLabelWithHint: false,
                          ),
                          keyboardType: TextInputType.phone,
                          textInputAction: TextInputAction.done,
                        )),
                    Padding(
                        padding: EdgeInsets.only(
                            bottom: MediaQuery.of(context).viewInsets.bottom,
                            top: 8.0,
                            right: 8.0,
                            left: 8.0
                        ),
                        child: TextField(
                          maxLines: 1,
                          textDirection: TextDirection.ltr,
//                        controller: customcintroller,
                          style: TextStyle(
                              color: Colors.lightGreen[400],
                              fontSize: 18.5),
                          decoration: InputDecoration(
                            contentPadding: EdgeInsets.only(bottom: 4.0),
                            labelText: "Вес",
                            alignLabelWithHint: false,
                          ),
                          keyboardType: TextInputType.phone,
                          textInputAction: TextInputAction.done,
                        )),
                    Padding(
                        padding: EdgeInsets.only(
                            bottom: MediaQuery.of(context).viewInsets.bottom,
                            top: 8.0,
                            right: 8.0,
                            left: 8.0
                        ),
                        child: TextField(
                          maxLines: 1,
                          textDirection: TextDirection.ltr,
//                        controller: customcintroller,
                          style: TextStyle(
                              color: Colors.lightGreen[400],
                              fontSize: 18.5),
                          decoration: InputDecoration(
                            contentPadding: EdgeInsets.only(bottom: 4.0),
                            labelText: "Целевой вес",
                            alignLabelWithHint: false,
                          ),
                          keyboardType: TextInputType.phone,
                          textInputAction: TextInputAction.done,
                        )),
                  ],
                )),
          ));
        }
    );
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      resizeToAvoidBottomInset: false,
      backgroundColor: Color(0xff2b2b2b),
      appBar: AppBar(
        backgroundColor: Colors.lightGreen[400],
        title: Text(
          'Питание',
          style: new TextStyle(
            color: Colors.white
          ),),
        leading: IconButton(
          icon:Icon(Icons.arrow_back),
          color: Colors.white ,
          onPressed:() => Navigator.of(context).pop(),
        ),
      ),
      body: Container(
        alignment: Alignment.center,
        margin: const EdgeInsets.only(bottom: 45.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              Padding(
                  padding: const EdgeInsets.only(bottom: 200.0),
                  child: Text(
                    "Нажми на кнопку, чтобы добавить правильный рацион питания.",
                    textAlign: TextAlign.center,
                    style: TextStyle(color: Colors.white, fontSize: 20.0),
                  )),
              FloatingActionButton(
                heroTag: "tag3",
                backgroundColor: Color(0xffFF7070),
                child: Icon(Icons.add, color: Colors.white),
                onPressed: () {
                  _modalBottomSheetMenu();
                }),
            ],
          ),
      ),
    );
  }
}

Answer 1

You don't need to wrap each filed with padding widget - simply wrap your primary Container with padding widget with-

padding: EdgeInsets.only(
             bottom: MediaQuery.of(context).viewInsets.bottom)

.

Updated Code:

class NutritionScreen extends StatefulWidget {
  @override
  _NutritionScreenState createState() => _NutritionScreenState();
}

class _NutritionScreenState extends State<NutritionScreen> {
  double height = 500.0;
  void _modalBottomSheetMenu() {
    showModalBottomSheet(
        context: context,
        builder: (builder) {
          return Padding(
            padding: EdgeInsets.only(
                bottom: MediaQuery.of(context).viewInsets.bottom),
            child: new Container(
                height: height,
                color: Colors
                    .transparent, //could change this to Color(0xFF737373),
                //so you don't have to change MaterialApp canvasColor
                child: new Container(
                  decoration: new BoxDecoration(
                      color: Colors.white,
                      borderRadius: new BorderRadius.only(
                          topLeft: const Radius.circular(10.0),
                          topRight: const Radius.circular(10.0))),
                  child: SingleChildScrollView(
                      child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisSize: MainAxisSize.max,
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: <Widget>[
                      Text(
                        "Питание",
                        textAlign: TextAlign.center,
                        style:
                            TextStyle(color: Colors.black, fontSize: 26.0),
                      ),
                      TextField(
                        maxLines: 1,
                        textDirection: TextDirection.ltr,
//                        controller: customcintroller,
                        style: TextStyle(
                            color: Colors.lightGreen[400], fontSize: 18.5),
                        decoration: InputDecoration(
                          contentPadding: EdgeInsets.only(bottom: 4.0),
                          labelText: "Возраст",
                          alignLabelWithHint: false,
                        ),
                        keyboardType: TextInputType.phone,
                        textInputAction: TextInputAction.done,
                      ),
                      TextField(
                        maxLines: 1,
                        textDirection: TextDirection.ltr,
//                        controller: customcintroller,
                        style: TextStyle(
                            color: Colors.lightGreen[400], fontSize: 18.5),
                        decoration: InputDecoration(
                          contentPadding: EdgeInsets.only(bottom: 4.0),
                          labelText: "Рост",
                          alignLabelWithHint: false,
                        ),
                        keyboardType: TextInputType.phone,
                        textInputAction: TextInputAction.done,
                      ),
                      TextField(
                        maxLines: 1,
                        textDirection: TextDirection.ltr,
//                        controller: customcintroller,
                        style: TextStyle(
                            color: Colors.lightGreen[400], fontSize: 18.5),
                        decoration: InputDecoration(
                          contentPadding: EdgeInsets.only(bottom: 4.0),
                          labelText: "Вес",
                          alignLabelWithHint: false,
                        ),
                        keyboardType: TextInputType.phone,
                        textInputAction: TextInputAction.done,
                      ),
                      TextField(
                        maxLines: 1,
                        textDirection: TextDirection.ltr,
//                        controller: customcintroller,
                        style: TextStyle(
                            color: Colors.lightGreen[400], fontSize: 18.5),
                        decoration: InputDecoration(
                          contentPadding: EdgeInsets.only(bottom: 4.0),
                          labelText: "Целевой вес",
                          alignLabelWithHint: false,
                        ),
                        keyboardType: TextInputType.phone,
                        textInputAction: TextInputAction.done,
                      ),
                    ],
                  )),
                )),
          );
        });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      resizeToAvoidBottomInset: false,
      backgroundColor: Color(0xff2b2b2b),
      appBar: AppBar(
        backgroundColor: Colors.lightGreen[400],
        title: Text(
          'Питание',
          style: new TextStyle(color: Colors.white),
        ),
        leading: IconButton(
          icon: Icon(Icons.arrow_back),
          color: Colors.white,
          onPressed: () => Navigator.of(context).pop(),
        ),
      ),
      body: Container(
        alignment: Alignment.center,
        margin: const EdgeInsets.only(bottom: 45.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            Padding(
                padding: const EdgeInsets.only(bottom: 200.0),
                child: Text(
                  "Нажми на кнопку, чтобы добавить правильный рацион питания.",
                  textAlign: TextAlign.center,
                  style: TextStyle(color: Colors.white, fontSize: 20.0),
                )),
            FloatingActionButton(
                heroTag: "tag3",
                backgroundColor: Color(0xffFF7070),
                child: Icon(Icons.add, color: Colors.white),
                onPressed: () {
                  _modalBottomSheetMenu();
                }),
          ],
        ),
      ),
    );
  }
}

Answer 2

Modal Bottom Sheet which sticks to top of keyboard

MBS: Modal Bottom Sheet

In Container use margin for keyboard space and use padding for content. This reduce height of MBS by keyboard height and stick MBS to top of keyboards (This can seen when keyboard opening or closing).

• isScrollControlled: true for allow to change heigth of MBS
• margin for giving empty space for keyboard with MediaQuery
• padding optionel content padding

showModalBottomSheet(
 isScrollControlled: true,
 builder: (BuildContext context) {
    return Container(
        margin: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom), // Keyboard margin
        padding: const EdgeInsets.all(20) // Content padding
        child: ... // You wiget tree
    );
  },
);