Мое текстовое поле скрывается за клавиатурой в BottomNavigationBar, когда я нажимаю, чтобы отредактировать его

Question

Я новичок в трепетании. Я застрял в одном месте и не могу найти точное решение.

У меня есть BottomNavigationBar, в котором у меня есть текстовое поле, которое требует ввода от пользователя. Когда я нажимаю на текстовое поле, клавиатура закрывает всю половину экрана, а текстовое поле прячется за клавиатурой и не может быть видно. Я хочу переместить текстовое поле над клавиатурой для лучшего пользовательского интерфейса.

это код BottomNavigationBar:

Widget build(BuildContext context) {
return Container(
  color: Colors.grey[200],
  height: 70,
  child: Row(
    children: <Widget>[
      SizedBox(
        height: MediaQuery.of(context).viewInsets.bottom,
      ),
      Container(
        width: MediaQuery.of(context).size.width * 0.6,
        color: Colors.transparent,
        margin: EdgeInsets.fromLTRB(40, 0, 0, 0),
        child: TextField(  //this is the TextField
          style: TextStyle(
            fontSize: 30,
            fontFamily: 'Karla',
          ),
          decoration: InputDecoration.collapsed(
            hintText: 'Experimez-vous...',
            hintStyle: TextStyle(color: Colors.black),
          ),
        ),
      ),
    ],
  ),
);

Это основная часть (Scaffold), из которой я его вызываю:

return Scaffold(
  body: Column(
    children: <Widget>[
      CloseButtonScreen(),
      Container(
        color: Colors.transparent,
        child: HeaderContent(),
      ),
      ContainerListItems(),
    ],
  ),
  bottomNavigationBar: BottomNavBar(), //this is where Im calling my BottomNavigationBar from
  floatingActionButton: FloatingActionBtn(),
  floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
  resizeToAvoidBottomPadding: false,
);

снимки экрана:

текстовое поле находится за клавиатурой в нижней навигационной панели

EXPERIMEZ VOUS текстовое поле

Answer 1

После долгих попыток вот как я этого добился. Спасибо всем за участие.

return Scaffold(
  body: GestureDetector(
    onTap: () => {
      FocusScope.of(context).unfocus(),
    },
    child: SingleChildScrollView(
      child: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: Column(
          children: <Widget>[
            CloseButtonScreen(),
            Container(
              color: Colors.transparent,
              child: HeaderContent(),
            ),
            ContainerListItems(),
            Container(
              margin: EdgeInsets.only(top: 90),
              padding: EdgeInsets.only(left: 20),
              color: Colors.transparent,
              width: MediaQuery.of(context).size.width,
              child: TextFormField(
                style: TextStyle(
                  fontSize: 30,
                  fontFamily: 'Karla',
                ),
                decoration: InputDecoration.collapsed(
                  hintText: 'Experimez-vous...',
                  hintStyle: TextStyle(
                    color: Color(0xff2e3039),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    ),
  ),
);

игнорировать виджет GestureDetector (). Да, вы должны обернуть тело в SingleChildScrollView (), я использовал bottomNavigationBar, должен был закончить sh это. Каждый внесший свой вклад в мой вопрос был прав. Я просто должен был соединить кусочки головоломки соответственно.

Мне пришлось удалить файл BottomNavigation и включить код в основное тело контейнера.

Answer 2

Обертывание внутри SingleChildScrollView позволит вашему виджету скользить вверх при появлении клавиатуры.

Scaffold(
  body: SingleChildScrollView(
   child: Column(
      children: <Widget>[
        CloseButtonScreen(),
        Container(
          color: Colors.transparent,
          child: HeaderContent(),
        ),
        ContainerListItems(),
     ],
   ),
 ),
...
);

Answer 3

Просто поместите каждый виджет в ListView и используйте свойство shrinkWrap. Пример кода ниже:

return Scaffold(
  backgroundColor: Colors.white,
  body: new Container(
    child: new ListView(
      shrinkWrap: true,
      padding: EdgeInsets.only(left: 12.0, right: 12.0),
      children: <Widget>[
        widget1,
        SizedBox(height: 20.0),
        widget2,
        SizedBox(height: 20.0),
        widget3,
      ],
    ),
  ),
);    

Answer 4

Поместите все ваши виджеты в виджет SingleChildScrollView.

ОБНОВЛЕНО: Использование стека вместо BottomNavigationBar для отображения текстового поля