Flutter 鍵盤一直隱藏文本字段並顯示溢出像素

Question

我正在處理一個實時聊天屏幕，我得到的結果在下面的兩張圖片中

在我單擊文本字段之前

在我點擊文本字段之后

我嘗試了許多不同的解決方案，但沒有好的結果，包括將“resizeToAvoidBottomInset：true”添加到我的腳手架，我需要用戶能夠像正常聊天一樣同時看到文本字段和鍵盤，我相信 UI 會自行調整大小或東西，我不知道我哪里出錯了，我的完整代碼在下面供審查

import 'package:flutter/material.dart';
import 'package:flutter_bounce/flutter_bounce.dart';
import 'dart:async';
import './login.dart';
import 'package:page_transition/page_transition.dart';
import './settings2.dart';

class SettingsScreen extends StatefulWidget {
  final String content;

  SettingsScreen({
    this.content,
  });

  @override
  Settings createState() => Settings(content: content);
}

class Settings extends State<SettingsScreen> {
  final String content;

  Settings({
    this.content,
  });

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        resizeToAvoidBottomInset: true,
        backgroundColor: Color(0xff000000),
        body: SafeArea(
            child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[ 
                 content == 'livechat'? Container(
                      child: Column(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                          Container(
                              child: Row(
                                  mainAxisAlignment: MainAxisAlignment.start,
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: <Widget>[
                                SizedBox(
                                    width: MediaQuery.of(context).size.width *
                                        2.5 /
                                        100),
                                Bounce(
                                    duration: Duration(milliseconds: 110),
                                    onPressed: () {
                                      Navigator.of(context).pop();
                                    },
                                    child: Container(
                                        child: Text("Minimize",
                                            style: TextStyle(
                                                color: Color(0xffffffff),
                                                fontFamily: 'Montserrat',
                                                fontSize: MediaQuery.of(context)
                                                        .size
                                                        .height *
                                                    2 /
                                                    100,
                                                fontWeight: FontWeight.w400)))),
                                Spacer(),
                                Bounce(
                                    duration: Duration(milliseconds: 110),
                                    onPressed: () {
                                      Navigator.of(context).pop();
                                    },
                                    child: Container(
                                        child: Text("Close",
                                            style: TextStyle(
                                                color: Color(0xffffffff),
                                                fontFamily: 'Montserrat',
                                                fontSize: MediaQuery.of(context)
                                                        .size
                                                        .height *
                                                    2 /
                                                    100,
                                                fontWeight: FontWeight.w400)))),
                                SizedBox(
                                    width: MediaQuery.of(context).size.width *
                                        2.5 /
                                        100)
                              ])),
                          SizedBox(
                              height:
                                  MediaQuery.of(context).size.height * 5 / 100),
                          Container(
                              height:
                                  MediaQuery.of(context).size.height * 6 / 100,
                              width: MediaQuery.of(context).size.width,
                              decoration: BoxDecoration(
                                  border: Border(
                                bottom: BorderSide(
                                  //                   <--- left side
                                  color: Color(0xff333333),
                                  width: 1.0,
                                ),
                                top: BorderSide(
                                  //                   <--- left side
                                  color: Color(0xff333333),
                                  width: 1.0,
                                ),
                              )),
                              child: Row(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  crossAxisAlignment: CrossAxisAlignment.center,
                                  children: <Widget>[
                                    SizedBox(
                                        width:
                                            MediaQuery.of(context).size.width *
                                                2.5 /
                                                100),
                                    Container(
                                        child: Text("Connnected to Chat",
                                            style: TextStyle(
                                                color: Color(0xffffffff),
                                                fontFamily: 'Montserrat',
                                                fontSize: MediaQuery.of(context)
                                                        .size
                                                        .height *
                                                    1.7 /
                                                    100,
                                                fontWeight: FontWeight.w400))),
                                  ])),
                          SizedBox(
                              height:
                                  MediaQuery.of(context).size.height * 1 / 100),
                          Stack(
                              //alignment:new Alignment(x, y)
                              children: <Widget>[
                                Container(
                                    height: MediaQuery.of(context).size.height *
                                        67 /
                                        100,
                                    child: ListView(
                                        scrollDirection: Axis.vertical,
                                        children: <Widget>[
                                          Container(
                                              height: MediaQuery.of(context)
                                                      .size
                                                      .height *
                                                  6 /
                                                  100,
                                              width: MediaQuery.of(context)
                                                  .size
                                                  .width,
                                              decoration: BoxDecoration(),
                                              child: Row(
                                                  mainAxisAlignment:
                                                      MainAxisAlignment.start,
                                                  crossAxisAlignment:
                                                      CrossAxisAlignment.center,
                                                  children: <Widget>[
                                                    SizedBox(
                                                        width: MediaQuery.of(
                                                                    context)
                                                                .size
                                                                .width *
                                                            2.5 /
                                                            100),
                                                    Container(
                                                        width:
                                                            MediaQuery.of(context)
                                                                    .size
                                                                    .width *
                                                                90 /
                                                                100,
                                                        child: Text(
                                                            "Support : Hi there, how can we help?",
                                                            style: TextStyle(
                                                                color: Color(
                                                                    0xffffffff),
                                                                fontFamily:
                                                                    'Montserrat',
                                                                fontSize: MediaQuery.of(
                                                                            context)
                                                                        .size
                                                                        .height *
                                                                    1.7 /
                                                                    100,
                                                                fontWeight:
                                                                    FontWeight
                                                                        .w400))),
                                                  ]))
                                        ]))
                              ]),
                          Column(
                              mainAxisAlignment: MainAxisAlignment.start,
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: <Widget>[
                                Container(
                                    decoration: BoxDecoration(
                                      color: Color(0xff131313),
                                    ),
                                    height: MediaQuery.of(context).size.height *
                                        6 /
                                        100,
                                    child: TextField(
                                      keyboardType: TextInputType.multiline,
                                      maxLines: 15,
                                      style: TextStyle(
                                          fontSize: MediaQuery.of(context)
                                                  .size
                                                  .height *
                                              1.5 /
                                              100,
                                          color: Color(0xffa6a6a6)),
                                      decoration: InputDecoration(
                                          contentPadding: EdgeInsets.all(
                                              MediaQuery.of(context)
                                                      .size
                                                      .height *
                                                  2.1 /
                                                  100),
                                          border: InputBorder.none,
                                          hintText: 'Type your Message here',
                                          hintStyle: TextStyle(
                                              fontSize: MediaQuery.of(context)
                                                      .size
                                                      .height *
                                                  1.9 /
                                                  100,
                                              color: Color(0xffa6a6a6))),
                                    )),
                                SizedBox(
                                    height: MediaQuery.of(context).size.height *
                                        2 /
                                        100),
                                Container(
                                    height: MediaQuery.of(context).size.height *
                                        6 /
                                        100,
                                    width: MediaQuery.of(context).size.width *
                                        95 /
                                        100,
                                    child: ElevatedButton(
                                      onPressed: () {
                                        // Respond to button press
                                      },
                                      child: Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.center,
                                          crossAxisAlignment:
                                              CrossAxisAlignment.center,
                                          children: <Widget>[
                                            Text("Send",
                                                style: TextStyle(
                                                    color: Color(0xffffffff),
                                                    fontFamily: 'Montserrat',
                                                    fontSize:
                                                        MediaQuery.of(context)
                                                                .size
                                                                .height *
                                                            1.4 /
                                                            100,
                                                    fontWeight:
                                                        FontWeight.w600))
                                          ]),
                                    ))
                              ])
                        ]))
                  : Container()
            ])));
  }
}

Answer 1

嘗試添加 SingleChildScrollView，

SafeArea(
    child: SingleChildScrollView(
            child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,