Pu sh нижняя часть экрана в верхней части клавиатуры дрожит, когда TextField или TextFormField сфокусированы

Question

Я хочу добиться макета, в котором только виджет главной кнопки всегда будет оставаться внизу каркаса. Другие виджеты будут размещены в SingleChildScrollView -> Column.

Но когда TextField или TextFormField сфокусирован, клавиатура должна sh выводить на весь экран до нижней части экрана. макет, чтобы кнопка была видна.

Использование SingleChildScrollView сохраняет только TextField или TextFormField над клавиатурой, но не кнопку тоже.

Мой код:

body: SingleChildScrollView(
          physics: BouncingScrollPhysics(),
          child: Container(
            height: screenHeight(context) - kToolbarHeight - 24,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                PlaceHolder(),
                SizedBox(height: 20.0),
                Text('Select Time'),
                SizedBox(height: 10.0),
                PlaceHolder(),
                SizedBox(height: 20.0),
                PlaceHolder(),
                SizedBox(height: 20.0),
                // InputField is a TextFormField
                InputField(
                  controller: _dataController,
                  labelText: 'Enter Data',
                  fieldFocusNode: _dataFocusNode,
                  textInputType: TextInputType.text,
                ),
                SizedBox(height: 20.0),
                CheckboxListTile(),
                SizedBox(height: 20.0),
                PrimaryButton(
                  buttonText: 'Save',
                  onPressed: () {},
                ),
                SizedBox(height: 20.0),
              ],
            ),
          ),
        ),

Вот два макета экрана. Вы можете игнорировать все другие виджеты, кроме TextFormField и Main Button.

Первый экран: Без клавиатуры (TextField или TextFormField не сфокусирован)

Screen Two : With keyboard (TextField or TextFormField is focused)

Экран 2: с клавиатурой (TextField или TextFormField сфокусирован)

Answer 1

Выполните следующие действия:

1. Удалите Container с фиксированной высотой.

2. Добавьте виджет Padding в нижнюю часть страницы и установите для поля bottom значение MediaQuery.of(context).viewInsets.bottom.

3. Добавьте reverse: true к SingleChildScrollView.

4. Добавить resizeToAvoidBottomInset: false к Scaffold.

5. Добавить resizeToAvoidBottomPadding: false к Scaffold.

Полный код : (изменения отмечены комментариями)

return Scaffold(
      resizeToAvoidBottomInset: false, // this is new
      resizeToAvoidBottomPadding: false, // this is new
      body: SingleChildScrollView( 
        reverse: true, // this is new 
        physics: BouncingScrollPhysics(),
        child: Column( // the container is removed
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            PlaceHolder(),
            SizedBox(height: 20.0),
            Text('Select Time'),
            SizedBox(height: 10.0),
            PlaceHolder(),
            SizedBox(height: 20.0),
            PlaceHolder(),
            SizedBox(height: 20.0),
            // InputField is a TextFormField
            InputField(
              controller: _dataController,
              labelText: 'Enter Data',
              fieldFocusNode: _dataFocusNode,
              textInputType: TextInputType.text,
            ),
            SizedBox(height: 20.0),
            CheckboxListTile(),
            SizedBox(height: 20.0),
            PrimaryButton(
              buttonText: 'Save',
              onPressed: null, // changed this since it had a syntax error
            ),
            Padding( // this is new
                padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom)
            ),
          ],
        ),
      ),
    );

Answer 2

Оберните экран SingleChildScrollView