Переверните TextField, скрытое клавиатурой, попробуйте много решений, но не работает - PullRequest
Новая
       54

Переверните TextField, скрытое клавиатурой, попробуйте много решений, но не работает

0 голосов
/ 17 января 2020

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

signup.dart 

import 'package:flutter/material.dart';
import 'package:yfobs/utilities/desc.dart';

class SignUpPage extends StatefulWidget {
  static String tag = 'SignUpPage';
  @override
  _SignUpPageState createState() => _SignUpPageState();
}

class _SignUpPageState extends State<SignUpPage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomPadding: false,
      body: Container(
        width: double.infinity,
        decoration: BoxDecoration(
            gradient: LinearGradient(begin: Alignment.topCenter, colors: [
          Color(0xFF832685),
          Color(0xFFC81379),
        ])),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            SizedBox(
              height: 80,
            ),
            Padding(
              padding: EdgeInsets.only(top: 0, bottom: 20, left: 20, right: 20),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    "SignUp",
                    style: TextStyle(color: Colors.white, fontSize: 28),
                  ),
                  SizedBox(
                    height: 10,
                  ),
                  Text(
                    "",
                    style: TextStyle(color: Colors.white, fontSize: 14),
                  ),
                ],
              ),
            ),
            SizedBox(
              height: 20,
            ),
            Expanded(
              child: Container(
                decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(60),
                        topRight: Radius.circular(60))),
                child: Padding(
                  padding:
                      EdgeInsets.only(top: 20, bottom: 0, right: 20, left: 20),
                  child: Column(
                    children: <Widget>[
                      Container(
                        height: MediaQuery.of(context).size.height / 1.5,
                        width: MediaQuery.of(context).size.width,
                        padding: EdgeInsets.only(top: 60),
                        child: Column(
                          children: <Widget>[
                            Container(
                              width: MediaQuery.of(context).size.width / 1.2,
                              height: 45,
                              padding: EdgeInsets.only(
                                  top: 0, left: 16, right: 16, bottom: 0),
                              decoration: BoxDecoration(
                                  borderRadius:
                                      BorderRadius.all(Radius.circular(50)),
                                  color: Colors.white,
                                  boxShadow: [
                                    BoxShadow(
                                        color: Colors.black12, blurRadius: 5)
                                  ]),
                              child: TextField(
                                decoration: InputDecoration(
                                  border: InputBorder.none,
                                  icon: Icon(
                                    Icons.person,
                                    color: Colors.grey,
                                  ),
                                  hintText: 'Full Name',
                                ),
                              ),
                            ),

                            Container(
                              width: MediaQuery.of(context).size.width / 1.2,
                              height: 45,
                              padding: EdgeInsets.only(
                                  top: 0, left: 16, right: 16, bottom: 0),
                              margin: EdgeInsets.only(top: 16),
                              decoration: BoxDecoration(
                                  borderRadius:
                                      BorderRadius.all(Radius.circular(50)),
                                  color: Colors.white,
                                  boxShadow: [
                                    BoxShadow(
                                        color: Colors.black12, blurRadius: 5)
                                  ]),
                              child: TextField(
                                decoration: InputDecoration(
                                  border: InputBorder.none,
                                  icon: Icon(
                                    Icons.email,
                                    color: Colors.grey,
                                  ),
                                  hintText: 'Email',
                                ),
                              ),
                            ),

                            Container(
                              width: MediaQuery.of(context).size.width / 1.2,
                              height: 45,
                              padding: EdgeInsets.only(
                                  top: 0, left: 16, right: 16, bottom: 0),
                              margin: EdgeInsets.only(top: 16),
                              decoration: BoxDecoration(
                                  borderRadius:
                                      BorderRadius.all(Radius.circular(50)),
                                  color: Colors.white,
                                  boxShadow: [
                                    BoxShadow(
                                        color: Colors.black12, blurRadius: 5)
                                  ]),
                              child: TextField(
                                decoration: InputDecoration(
                                  border: InputBorder.none,
                                  icon: Icon(
                                    Icons.call,
                                    color: Colors.grey,
                                  ),
                                  hintText: 'Mobile Number',
                                ),
                              ),
                            ),

                            Container(
                              width: MediaQuery.of(context).size.width / 1.2,
                              height: 45,
                              padding: EdgeInsets.only(
                                  top: 0, left: 16, right: 16, bottom: 0),
                              margin: EdgeInsets.only(top: 16),
                              decoration: BoxDecoration(
                                  borderRadius:
                                      BorderRadius.all(Radius.circular(50)),
                                  color: Colors.white,
                                  boxShadow: [
                                    BoxShadow(
                                        color: Colors.black12, blurRadius: 5)
                                  ]),
                              child: TextField(
                                decoration: InputDecoration(
                                  border: InputBorder.none,
                                  icon: Icon(
                                    Icons.vpn_key,
                                    color: Colors.grey,
                                  ),
                                  hintText: 'Password',
                                ),
                                obscureText: true,
                              ),
                            ),
                            Spacer(),

                            Container(
                              padding: EdgeInsets.all(16),
                              width: double.infinity,
                              child: RaisedButton(
                                elevation: 5.0,
                                padding: EdgeInsets.all(12),
                                shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(30),
                                ),
                                color: Color(0xFFC81379),
                                child: Text(
                                  'Sign Up'.toUpperCase(),
                                  style: TextStyle(
                                      color: Colors.white,
                                      fontWeight: FontWeight.bold),
                                ),
                                onPressed: () {
                                  //Navigator.of(context).pushNamed('HomePage');
                                },
                              ),
                            ),

                            Align(
                              alignment: Alignment.center,
                              child: Column(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: <Widget>[
                                    new FlatButton(
                                      child: Padding(
                                        padding: const EdgeInsets.only(
                                            top: 0, right: 16, left: 16),
                                        child: new Text(
                                          Desc.alreadyUser,
                                          style: TextStyle(color: Colors.grey),
                                        ),
                                      ),
                                      onPressed: () {
                                        Navigator.of(context)
                                            .pushNamed('SignInPage');
                                      },
                                      color: Colors.white,
                                      highlightColor: Colors.transparent,
                                    ),
                                  ]),
                            )
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

enter image description here

я пытаюсь с этим решением :

TextFormField скрыто клавиатурой - Flutter

Flutter / Dart Прокрутка текстового поля над клавиатурой

в текстовом поле страницы флаттера, скрытом клавиатурой

TextField скрывается, когда клавиатура появляется в

Клавиатура флаттера скрывает текстовое поле

Флаттер TextFormField скрытый клавиатурой

Когда я выбираю текстовое поле, клавиатура перемещается по нему

Ответы [ 3 ]

1 голос
/ 17 января 2020

Привет! Я исправил вашу проблему с помощью виджета Expanded Просто оберните ваш child content виджетом Expanded. и удалите лишний столбец, который нам не нужен, попробуйте мой код ниже и дайте мне знать, работает он или нет 

import 'package:flutter/material.dart';
import 'package:yfobs/utilities/desc.dart';


    class SignUpPage extends StatefulWidget {
      static String tag = 'SignUpPage';
      @override
      _SignUpPageState createState() => _SignUpPageState();
    }

    class _SignUpPageState extends State<SignUpPage> {

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          resizeToAvoidBottomPadding: false,
          resizeToAvoidBottomInset: true,
          body: Container(
            width: double.infinity,
            decoration: BoxDecoration(
                gradient: LinearGradient(begin: Alignment.topCenter, colors: [
                  Color(0xFF832685),
                  Color(0xFFC81379),
                ])),
            child: Column(
              children: <Widget>[
                Expanded(
                  child: signUpCardUI(context),
                ),
              ],
            )
          ),
        );
      }
    }

    Widget signUpCardUI(BuildContext context){
      return SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            SizedBox(
              height: 80,
            ),
            Padding(
              padding: const EdgeInsets.only(left:20.0),
              child: Text(
                "SignUp",
                style: TextStyle(color: Colors.white, fontSize: 28),
              ),
            ),
            SizedBox(
              height: 30,
            ),
            Card(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(50.0),
              ),
              child: Padding(
                padding:
                EdgeInsets.only(bottom: 0, right: 20, left: 20),
                child: Column(
                  children: <Widget>[
                    Container(
                      height: MediaQuery.of(context).size.height / 1.5,
                      width: MediaQuery.of(context).size.width,
                      padding: EdgeInsets.only(top: 60),
                      child: Column(
                        children: <Widget>[
                          Container(
                            width: MediaQuery.of(context).size.width / 1.2,
                            height: 40,
                            padding: EdgeInsets.only(
                                top: 0, left: 16, right: 16, bottom: 0),
                            decoration: BoxDecoration(
                                borderRadius:
                                BorderRadius.all(Radius.circular(50)),
                                color: Colors.white,
                                boxShadow: [
                                  BoxShadow(
                                      color: Colors.black12, blurRadius: 5)
                                ]),
                            child: TextField(
                              decoration: InputDecoration(
                                border: InputBorder.none,
                                icon: Icon(
                                  Icons.person,
                                  color: Colors.grey,
                                ),
                                hintText: 'Full Name',
                              ),
                            ),
                          ),

                          Container(
                            width: MediaQuery.of(context).size.width / 1.2,
                            height: 40,
                            padding: EdgeInsets.only(
                                top: 0, left: 16, right: 16, bottom: 0),
                            margin: EdgeInsets.only(top: 16),
                            decoration: BoxDecoration(
                                borderRadius:
                                BorderRadius.all(Radius.circular(50)),
                                color: Colors.white,
                                boxShadow: [
                                  BoxShadow(
                                      color: Colors.black12, blurRadius: 5)
                                ]),
                            child: TextField(
                              decoration: InputDecoration(
                                border: InputBorder.none,
                                icon: Icon(
                                  Icons.email,
                                  color: Colors.grey,
                                ),
                                hintText: 'Email',
                              ),
                            ),
                          ),

                          Container(
                            width: MediaQuery.of(context).size.width / 1.2,
                            height: 40,
                            padding: EdgeInsets.only(
                                top: 0, left: 16, right: 16, bottom: 0),
                            margin: EdgeInsets.only(top: 16),
                            decoration: BoxDecoration(
                                borderRadius:
                                BorderRadius.all(Radius.circular(50)),
                                color: Colors.white,
                                boxShadow: [
                                  BoxShadow(
                                      color: Colors.black12, blurRadius: 5)
                                ]),
                            child: TextField(
                              decoration: InputDecoration(
                                border: InputBorder.none,
                                icon: Icon(
                                  Icons.call,
                                  color: Colors.grey,
                                ),
                                hintText: 'Mobile Number',
                              ),
                            ),
                          ),

                          Container(
                            width: MediaQuery.of(context).size.width / 1.2,
                            height: 40,
                            padding: EdgeInsets.only(
                                top: 0, left: 16, right: 16, bottom: 0),
                            margin: EdgeInsets.only(top: 16),
                            decoration: BoxDecoration(
                                borderRadius:
                                BorderRadius.all(Radius.circular(50)),
                                color: Colors.white,
                                boxShadow: [
                                  BoxShadow(
                                      color: Colors.black12, blurRadius: 5)
                                ]),
                            child: TextField(
                              decoration: InputDecoration(
                                border: InputBorder.none,
                                icon: Icon(
                                  Icons.vpn_key,
                                  color: Colors.grey,
                                ),
                                hintText: 'Password',
                              ),
                              obscureText: true,
                            ),
                          ),
                          Spacer(),

                          Container(
                            padding: EdgeInsets.all(10),
                            width: double.infinity,
                            child: RaisedButton(
                              elevation: 5.0,
                              padding: EdgeInsets.all(12),
                              shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(30),
                              ),
                              color: Color(0xFFC81379),
                              child: Text(
                                'Sign Up'.toUpperCase(),
                                style: TextStyle(
                                    color: Colors.white,
                                    fontWeight: FontWeight.bold),
                              ),
                              onPressed: () {
                                //Navigator.of(context).pushNamed('HomePage');
                              },
                            ),
                          ),

                          Align(
                            alignment: Alignment.center,
                            child: Column(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: <Widget>[
                                  new FlatButton(
                                    child: Padding(
                                      padding: const EdgeInsets.only(
                                          top: 0, right: 16, left: 16),
                                      child: new Text(
                                         Desc.alreadyUser,
                                        style: TextStyle(color: Colors.grey),
                                      ),
                                    ),
                                    onPressed: () {
                                      Navigator.of(context)
                                          .pushNamed('SignInPage');
                                    },
                                    color: Colors.white,
                                    highlightColor: Colors.transparent,
                                  ),
                                ]),
                          )
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      );
    }

Happy Coding:)

0 голосов
/ 17 января 2020

Вы пытались использовать виджет формы? добавить дочерний элемент как SingleChildScrollView, который может иметь текстовое поле.

0 голосов
/ 17 января 2020

Можете ли вы обернуть тело вашего Scaffold с SingleChildScrollView и обернуть ваш контейнер ConstrainedBox

Вот вывод, который я получаю https://prnt.sc/qozsvc

Клавиатура будет по-прежнему находиться над текстовыми полями, но с помощью SingleChildScrollView экран будет прокручиваться, поэтому вы сможете прокрутить вниз и снова увидеть текстовые поля.

Это решение работает для меня. 

Scaffold(
  body: SingleChildScrollView(
    child: ConstrainedBox(
      constraints: BoxConstraints(maxHeight: MediaQuery.of(context).size.height),
      child: Container(
        .
        .
        .
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...