Флаттер: - Как прокрутить сцену, не сжимая экран в режиме стека? (Прокрутите весь экран при появлении клавиатуры)

Question

Описание
Я создаю экран входа в систему, в котором я использовал виджет Stack. В настоящее время все работает нормально, но только одна проблема заключается в сокращении представления. Когда я использую resizeToAvoidBottomPadding: false внутри Scaffold, уменьшение экрана исчезает, но возникает другая проблема, связанная с тем, что прокрутка всего экрана не работает, проверьте строки кода ниже

 class _LoginScreen extends State<LoginScreen> {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build

        return Scaffold(
            resizeToAvoidBottomPadding: false,
            body:  Stack(
              children: <Widget>[
                Container(
                  height: double.infinity,
                  width: double.infinity,
                  child: Column(
                    children: <Widget>[
                      Expanded(
                        flex: 4,
                        child: Column(
                          children: <Widget>[
                            Expanded(
                              flex: 9,
                              child: Container(
                                color: Colors.blue,
                                child: Align(
                                  alignment: Alignment.centerLeft,
                                  child: RotatedBox(
                                    quarterTurns: 3,
                                    child: Container(
                                      child: Padding(
                                        padding: EdgeInsets.all(5),
                                        child: Text(
                                          "Login !!",
                                          style: TextStyle(
                                            fontSize: 30.0,
                                            color: Colors.white),
                                        ),
                                      ),
                                    ),
                                  ),
                                )),
                            ),
                            Expanded(
                              flex: 1,
                              child: Container(
                                color: Colors.white,
                              ),
                            )
                          ],
                        )),
                      Expanded(
                        flex: 6,
                        child: Container(
                          color: Colors.white,
                        ),
                      )
                    ],
                  ),
                ),
                Padding(
                  padding: EdgeInsets.only(left: 20.0, right: 20.0),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      new Image(
                        image: new AssetImage("images/logo.png"),
                        color: null,
                        height: 100.0,
                        width: 100.0,
                        fit: BoxFit.scaleDown,
                        alignment: Alignment.center,
                      ),
                      SizedBox(
                        height: 20.0,
                      ),
                      TextField(
                        keyboardType: TextInputType.number,
                        inputFormatters: [
                          LengthLimitingTextInputFormatter(10),
                        ],
                        decoration: new InputDecoration(
                          focusedBorder: OutlineInputBorder(
                            borderSide:
                            BorderSide(color: Colors.blue, width: 2.0),
                          ),
                          enabledBorder: OutlineInputBorder(
                            borderSide:
                            BorderSide(color: Colors.grey, width: 2.0),
                          ),
                          hintText: "Please enter mobile number")),
                      SizedBox(
                        height: 10.0,
                      ),
                      TextField(
                        obscureText: true,
                        inputFormatters: [
                          LengthLimitingTextInputFormatter(16),
                        ],
                        keyboardType: TextInputType.visiblePassword,
                        decoration: new InputDecoration(
                          focusedBorder: OutlineInputBorder(
                            borderSide:
                            BorderSide(color: Colors.blue, width: 2.0),
                          ),
                          enabledBorder: OutlineInputBorder(
                            borderSide:
                            BorderSide(color: Colors.grey, width: 2.0),
                          ),
                          hintText: "Password")),
                      SizedBox(
                        height: 3.0,
                      ),
                      Align(
                        alignment: Alignment.topRight,
                        child: Text(
                          "Forgot Password?",
                          style: TextStyle(fontSize: 12.0),
                        )),
                      SizedBox(
                        height: 3.0,
                      ),
                      SizedBox(
                        height: 10.0,
                      ),
                      RaisedButton(
                        onPressed: () {},
                        color: Colors.blue,
                        child: const Text(
                          'Login',
                          style: TextStyle(fontSize: 15.0, color: Colors.black45),
                        ),
                      )
                    ],
                  ),
                ),
              ],
            ));
      }
    }

сверху код, я получаю следующий экран

Я использовал ListView и SingleChildScrollView, но он не работает должным образом, пожалуйста, проверьте мой код с SingleChildScrollView, который я пробовал

class _LoginScreen extends State<LoginScreen> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build

    return Scaffold(
        resizeToAvoidBottomPadding: false,
        body: SingleChildScrollView(
          child: IntrinsicHeight(
              child: Stack(
            children: <Widget>[
              Container(
                height: double.infinity,
                width: double.infinity,
                child: Column(
                  children: <Widget>[
                    Expanded(
                        flex: 4,
                        child: Column(
                          children: <Widget>[
                            Expanded(
                              flex: 9,
                              child: Container(
                                  color: Colors.blue,
                                  child: Align(
                                    alignment: Alignment.centerLeft,
                                    child: RotatedBox(
                                      quarterTurns: 3,
                                      child: Container(
                                        child: Padding(
                                          padding: EdgeInsets.all(5),
                                          child: Text(
                                            "Login !!",
                                            style: TextStyle(
                                                fontSize: 30.0,
                                                color: Colors.white),
                                          ),
                                        ),
                                      ),
                                    ),
                                  )),
                            ),
                            Expanded(
                              flex: 1,
                              child: Container(
                                color: Colors.white,
                              ),
                            )
                          ],
                        )),
                    Expanded(
                      flex: 6,
                      child: Container(
                        color: Colors.white,
                      ),
                    )
                  ],
                ),
              ),
              Padding(
                padding: EdgeInsets.only(left: 20.0, right: 20.0),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    new Image(
                      image: new AssetImage("images/logo.png"),
                      color: null,
                      height: 100.0,
                      width: 100.0,
                      fit: BoxFit.scaleDown,
                      alignment: Alignment.center,
                    ),
                    SizedBox(
                      height: 20.0,
                    ),
                    TextField(
                        keyboardType: TextInputType.number,
                        inputFormatters: [
                          LengthLimitingTextInputFormatter(10),
                        ],
                        decoration: new InputDecoration(
                            focusedBorder: OutlineInputBorder(
                              borderSide:
                                  BorderSide(color: Colors.blue, width: 2.0),
                            ),
                            enabledBorder: OutlineInputBorder(
                              borderSide:
                                  BorderSide(color: Colors.grey, width: 2.0),
                            ),
                            hintText: "Please enter mobile number")),
                    SizedBox(
                      height: 10.0,
                    ),
                    TextField(
                        obscureText: true,
                        inputFormatters: [
                          LengthLimitingTextInputFormatter(16),
                        ],
                        keyboardType: TextInputType.visiblePassword,
                        decoration: new InputDecoration(
                            focusedBorder: OutlineInputBorder(
                              borderSide:
                                  BorderSide(color: Colors.blue, width: 2.0),
                            ),
                            enabledBorder: OutlineInputBorder(
                              borderSide:
                                  BorderSide(color: Colors.grey, width: 2.0),
                            ),
                            hintText: "Password")),
                    SizedBox(
                      height: 3.0,
                    ),
                    Align(
                        alignment: Alignment.topRight,
                        child: Text(
                          "Forgot Password?",
                          style: TextStyle(fontSize: 12.0),
                        )),
                    SizedBox(
                      height: 3.0,
                    ),
                    SizedBox(
                      height: 10.0,
                    ),
                    RaisedButton(
                      onPressed: () {},
                      color: Colors.blue,
                      child: const Text(
                        'Login',
                        style: TextStyle(fontSize: 15.0, color: Colors.black45),
                      ),
                    )
                  ],
                ),
              ),
            ],
          )),
        ));
  }
}

И из приведенного выше кода получаем этот результат с помощью SingleChildScrollView

Проблема : - Я хочу прокрутить весь экран при появлении клавиатуры , я использовал все Listview и SingleChildScrollView, но не могу найти решение, пожалуйста, помогите мне на это. Спасибо

Answer 1

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

https://i.imgur.com/wVgAUlN.mp4

class StacScroll extends StatefulWidget {
  StacScroll({Key key}) : super(key: key);

  @override
  _StacScrollState createState() => _StacScrollState();
}

class _StacScrollState extends State<StacScroll> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        resizeToAvoidBottomInset: true,
        body: Container(
          height: double.infinity,
          width: double.infinity,
          // margin:
          //     EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
          child: SingleChildScrollView(
            child: Stack(
              children: <Widget>[
                Container(
                  color: Colors.blue,
                  height: MediaQuery.of(context).size.height * 0.3,
                  width: MediaQuery.of(context).size.width,
                  child: RotatedBox(
                      quarterTurns: 3,
                      child: Container(
                        child: Padding(
                          padding: EdgeInsets.all(5),
                          child: Text(
                            "Login !!",
                            style:
                                TextStyle(fontSize: 30.0, color: Colors.white),
                          ),
                        ),
                      )),
                ),
                Container(
                  margin: EdgeInsets.only(
                      top: MediaQuery.of(context).size.height * 0.3),
                  child: Padding(
                    padding: EdgeInsets.only(left: 20.0, right: 20.0),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        new Image(
                          image: new AssetImage("images/logo.png"),
                          color: null,
                          height: 100.0,
                          width: 100.0,
                          fit: BoxFit.scaleDown,
                          alignment: Alignment.center,
                        ),
                        SizedBox(
                          height: 20.0,
                        ),
                        TextField(
                            keyboardType: TextInputType.number,
                            decoration: new InputDecoration(
                                focusedBorder: OutlineInputBorder(
                                  borderSide: BorderSide(
                                      color: Colors.blue, width: 2.0),
                                ),
                                enabledBorder: OutlineInputBorder(
                                  borderSide: BorderSide(
                                      color: Colors.grey, width: 2.0),
                                ),
                                hintText: "Please enter mobile number")),
                        SizedBox(
                          height: 10.0,
                        ),
                        TextField(
                            obscureText: true,
                            keyboardType: TextInputType.visiblePassword,
                            decoration: new InputDecoration(
                                focusedBorder: OutlineInputBorder(
                                  borderSide: BorderSide(
                                      color: Colors.blue, width: 2.0),
                                ),
                                enabledBorder: OutlineInputBorder(
                                  borderSide: BorderSide(
                                      color: Colors.grey, width: 2.0),
                                ),
                                hintText: "Password")),
                        SizedBox(
                          height: 3.0,
                        ),
                        Align(
                            alignment: Alignment.topRight,
                            child: Text(
                              "Forgot Password?",
                              style: TextStyle(fontSize: 12.0),
                            )),
                        SizedBox(
                          height: 3.0,
                        ),
                        SizedBox(
                          height: 10.0,
                        ),
                        RaisedButton(
                          onPressed: () {},
                          color: Colors.blue,
                          child: const Text(
                            'Login',
                            style: TextStyle(
                                fontSize: 15.0, color: Colors.black45),
                          ),
                        )
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
        ));
  }
}

Answer 2

Спасибо @Nadeem, благодаря которому проблема была решена. Когда мы хотим прокрутить весь экран, когда появляется клавиатура, мы должны не использовать для нее виджет Expand. Я также делал ту же ошибку, для другой пользователь, который изменил код для полной прокрутки при появлении клавиатуры, я использовал MediaQuery для этого, пожалуйста, проверьте мой приведенный ниже код.

import 'package:flutter/material.dart';

class LoginScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _LoginScreen();
  }
}

class _LoginScreen extends State<LoginScreen> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("Login"),
      ),
      body: Container(
        height: double.infinity,
        width: double.infinity,
        child: SingleChildScrollView(
          child: Stack(
            children: <Widget>[
              Container(
                color: Colors.blue,
                height: MediaQuery.of(context).size.height * 0.3,
              ),
              Container(
                  color: Colors.white,
                  height: MediaQuery.of(context).size.height * 0.59,
                  padding: EdgeInsets.all(10.0),
                  margin: EdgeInsets.only(
                      top: MediaQuery.of(context).size.height * 0.3),
                  child: Container(
                    margin: EdgeInsets.only(top: 70.0),
                    child: Column(
                      children: <Widget>[
                        TextFormField(
                            decoration: InputDecoration(
                                labelText: 'Enter your username')),
                        TextFormField(
                            decoration: InputDecoration(labelText: 'Password')),
                        SizedBox(
                          height: 20.0,
                        ),
                        RaisedButton(
                          color: Colors.yellow,
                          child: Text("Submit",
                              style: TextStyle(color: Colors.blue)),
                          onPressed: () {},
                        )
                      ],
                    ),
                  )),
              Center(
                child: Card(
                  color: Colors.yellow,
                  elevation: 8,
                  margin: EdgeInsets.only(
                      top: MediaQuery.of(context).size.height * .25),
                  child: Container(
                    child: Center(
                        child: Text(
                      "Radhe",
                      style: TextStyle(color: Colors.blue, fontSize: 20.0),
                    )),
                    height: MediaQuery.of(context).size.height * .1,
                    width: MediaQuery.of(context).size.width * .3,
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

Пожалуйста, проверьте вывод.