Блог

У меня есть макет, кнопка входа в систему находится в нижней части экрана, а TextFormField » ы » — в верхней части экрана. У меня есть проблема, когда я хочу отобразить кнопку над клавиатурой, когда она появится, но у меня возникают трудности с этим. Я хочу чистое решение, а не какой-то хак, но, похоже, не могу его найти. Возможно ли использование floatingActionButton или bottomNavigationBar решение и использование MediaQuery.of(context).viewInsets.bottom ? Вот код и картинки.

У меня есть такой вид экрана:

но когда появляется клавиатура, я не вижу кнопки входа в систему:

Я хотел поместить кнопку прямо под паролем TexFormField после того, как появится клавиатура. Есть ли какое-то простое решение, но все же не взлом для этого? Вот код:

 Scaffold(
            resizeToAvoidBottomInset: false, // <- here I set this to false so my whole widget doesn't resize when the keyboard appears
            backgroundColor: Colors.white,
            body: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Column(
                  children: [
                    SizedBox(
                      height: 48.0,
                    ),
                    Padding(
                      padding: const EdgeInsets.only(left: 24.0, right: 25.0),
                      child: Form(
                        key: _loginFormKey,
                        child: Column(
                          children: [
                            TextFormField(
                              onChanged: (value) {
                                setState(() => email = value);
                              },
                            ),
                            SizedBox(
                              height: 24.0,
                            ),
                            TextFormField(
                              onChanged: (value) {
                                setState(() => password = value);
                              },
                            ),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
                Padding(
                  padding: const EdgeInsets.only(
                      left: 23.0, right: 24, bottom: 64.0),
                  child: SizedBox(
                    width: double.infinity,
                    child: PrimaryButton(
                      buttonText: 'LOG IN',
                    ),
                  ),
                ),
              ],
            ),
          );
 

Заранее спасибо за вашу помощь!

В вашем коде вы должны избегать resizeToAvoidBottomInset: false, что делает вашу кнопку невидимой, и да, я вижу, вам нужно пространство между текстом редактирования и кнопкой, поэтому вы добавляете Colum в качестве родителя. но есть еще один лучший способ добиться этого, и кнопка » да » появится в приведенном ниже коде, как вы и ожидали.

 Scaffold(
      backgroundColor: Colors.white,
      body:

           Stack(
          children: [
            Padding(
              padding: const EdgeInsets.only(left: 24.0, right: 25.0),
              child: Form(
                child: Column(
                  children: [
                    TextFormField(
                      onChanged: (value) {},
                    ),
                    SizedBox(
                      height: 24.0,
                    ),
                    TextFormField(
                      onChanged: (value) {},
                    ),
                  ],
                ),
              ),
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: Padding(
                padding:
                    const EdgeInsets.only(left: 23.0, right: 24, bottom: 64.0),
                child: SizedBox(
                    width: double.infinity,
                    child: ElevatedButton(
                      child: Text("Button"),
                      onPressed: () {},
                    )),
              ),
            ),
          ],
        )
    );
 

Можете ли вы обернуть Singlechildscrollview виджет на колонку тела?