首页 > 解决方案 > Flutter TextField 被键盘隐藏

问题描述

我是一个初学者,我有一个冲突,当我专注于 TexFiled 时,键盘隐藏在 TextField 上,底部按钮没有显示我在这里附加了我的冲突任何解决方案谢谢

代码在这里

import 'dart:ui';

import 'package:crapp/pages/create_password/password_screen.dart';
import 'package:crapp/widgets/components/alert.dart';
import 'package:crapp/widgets/components/page_animation.dart';
import 'package:crapp/widgets/theme/constants.dart';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:crapp/provider/theme_provider.dart';
class PasswordScreen extends StatefulWidget {
  @override
  _PasswordScreenState createState() => _PasswordScreenState();
}

class _PasswordScreenState extends State< PasswordScreen > {


  final _controller = TextEditingController();
  //validation controller
  TextEditingController sQuastionController = new TextEditingController();
  TextEditingController answerQController = new TextEditingController();
  TextEditingController passController = new TextEditingController();
  TextEditingController conPassController = new TextEditingController();
  final TextEditingController _pass = TextEditingController();
  final TextEditingController _confirmPass = TextEditingController();
  bool _isButtonEnabled = false;
  //final _controller = TextEditingController();
  bool isConfirm=false;
  check (BuildContext context){
    if(sQuastionController.text.isNotEmpty &&
        answerQController.text.isNotEmpty &&
        conPassController.text.isNotEmpty &&
        passController.text.isNotEmpty){
      setState(() {
        _isButtonEnabled = true;
      });
    } else {
      setState(() {
        _isButtonEnabled = false;
      });
    }




  }
  checks (BuildContext context){

    if(passController.text.isEmpty){
      showDialog<void>(
          context: context,
          builder: (BuildContext dialogContext) {
            return Alert(title: "Alert !!!",subTile: "Password must be 10 characters !",);
          }
      );
    }else if(passController.text.length > 0 && passController.text.length < 10){
      isConfirm = true;
      showDialog<void>(
          context: context,
          builder: (BuildContext dialogContext) {
            return Alert(title: "Alert !!!",subTile: "Password doesn't match !",);
          }
      );
    }
  }
 checkChanged(){
    if( secretVal != null
      )
    {
      setState(() {
        isSave = true;
      });
    }else{
      isSave =false;
    }
  }  bool isSave=false;
  final GlobalKey<FormState> formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {

    /*   double height = MediaQuery.of(context).size.height;
    double width = MediaQuery.of(context).size.width;*/
    Provider.of<ThemeProvider>(context).themeMode == ThemeMode.dark
        ? 'DarkTheme'
        : 'LightTheme';



    return Scaffold(
      resizeToAvoidBottomInset: false,

      body: SafeArea(

        child: Column(
          children: <Widget>[
            Expanded(
              child: _signUp(),
            ),
          ],



        ),

      ),        bottomNavigationBar: BottomAppBar(
      elevation: 4,
      child: Container(
        height: 70,
        child:  Container(
          padding: EdgeInsets.symmetric(horizontal: 16),
          child: Row(
            children: [
              Expanded(
                child: MaterialButton(
                  height: 44,
                  onPressed: () {
                    FocusScope.of(context).requestFocus(FocusNode());
                    //check();
                  },
                  shape: RoundedRectangleBorder(
                      borderRadius:
                      BorderRadius.circular(4)),

                  color:   Color(0xFF2A3476),
                  elevation: 0,
                  highlightElevation: 0,
                  child: Container(
                    child: Text(
                      "Save",
                      style: TextStyle(
                          color:   Color(0xFF2A3476),
                          fontSize: 15,
                          fontFamily: 'medium'),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    ),
   /* bottomNavigationBar: Container(
      padding: EdgeInsets.all(25.0),
      decoration: BoxDecoration(color: Colors.white,
      ),
       child: Row(


         children: [
           Expanded(
             child: MaterialButton(
               height: 44,
               onPressed: () {
                 FocusScope.of(context).requestFocus(FocusNode());
                 *//*   Navigator.push(context, SlidePageRoute(page:PasswordScreen()));*//*
               },
               shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8.0))),
               color:   _isButtonEnabled ? Color(0xFF2A3476) : Color(0x201E1E99),
               elevation: 0,
               highlightElevation: 0,
               child: Container(
                 child: Text(
                   "Next",
                   style: TextStyle(color: m_fillColor,fontSize: 18,fontWeight: FontWeight.w600  ,
                     fontFamily: "regular",),
                 ),

               ),
             ),


           ),
         ],

       ),


     )*/


    );

  }


  Widget _signUp() {

    return Container(
      constraints: BoxConstraints.expand(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
      ),
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [
            Color(0xFF2A3476),
            Color(0xFF2A3476),
          ],
          begin: Alignment.topLeft,
          end: Alignment.centerRight,
        ),
      ),
      child: Form(
        key: formKey,

        child: Container(
          child: SingleChildScrollView(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Padding(
                  padding:
                  const EdgeInsets.symmetric(vertical: 36.0, horizontal: 24.0),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.end,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        "Create Password",
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 30.0,fontFamily: "medium",
                          fontWeight: FontWeight.w800,
                        ),
                      ),

                    ],
                  ),
                ),
                Container(
                  width: double.infinity,
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(30),
                      topRight: Radius.circular(30),
                    ),
                  ),
                  child: Padding(
                    padding: const EdgeInsets.all(24.0),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [


                        Text(
                          "Steps to set your",
                          style: TextStyle(
                            fontSize: 22,
                            fontFamily: "regular",
                            fontWeight: FontWeight.w300,
                            color: Colors.black,
                          ),
                        ),


                        Text(
                          "password",
                          style: TextStyle(
                            fontSize: 22,
                            fontFamily: "regular",
                            fontWeight: FontWeight.w300,
                            color: Colors.black,
                          ),
                        ),
                        SizedBox(
                          height: 20.0,
                        ),     Text(
                          'Secret Question',
                          style:
                          TextStyle(  fontSize: 15,
                            fontFamily: "regular",),
                        ),  SizedBox(
                          height: 8.0,
                        ),
                        Row(
                          children: [

                            Expanded(child: InkWell(
                              onTap: (){
                                FocusScope.of(context).requestFocus(FocusNode());
                                secretDialogue();
                              },
                              child: Stack(

                                children: <Widget>[

                                  TextField(
                                   /* textInputAction: TextInputAction.next,*/
                                    controller: sQuastionController,
                                  enabled: false,
                                    onChanged: (val) {
                                      check(context);
                                    },

                                    decoration: InputDecoration(
                                      labelText: secretVal==null?"Select One":secretVal,
                                      contentPadding: EdgeInsets.all(8),
                                      border: OutlineInputBorder(
                                        borderRadius:
                                        BorderRadius.circular(8.0),
                                        borderSide: BorderSide.none,
                                      ),
                                      filled: true,
                                      fillColor: Color(0xFFE1E8F7),
                                      hintText: "",
                                      /*   prefixIcon: Icon(
                                  Icons.people_outline_rounded,
                                  color: Colors.grey[600],
                                )*/
                                    ),
                                  ),
                                  Positioned.directional(
                                    textDirection: Directionality.of(context),
                                    end: 0,
                                    top: 0,
                                    bottom: 0,
                                    child: Padding(
                                        padding: const EdgeInsets.all(8.0),
                                        child:Image.asset(
                                          "assets/icons/ic_drop_arrow.png",
                                          scale: 9,
                                        )),
                                  )
                                ],
                              ),
                            ),
                            ),



                          ],
                        ),

                        SizedBox(
                          height: 20.0,
                        ),

                        Text(
                          'Answer',
                          style:
                          TextStyle(  fontSize: 15,
                            fontFamily: "regular",),
                        ),
                        SizedBox(
                          height: 8.0,
                        ),
                        TextField(
                          /* keyboardType: TextInputType.emailAddress,*/
                       /*   textInputAction: TextInputAction.next,*/
                          controller: answerQController,
                          onChanged: (val){
                            check(context);
                          },
                          decoration: InputDecoration(
                            contentPadding: EdgeInsets.all(8),
                            border: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(8.0),
                              borderSide: BorderSide.none,
                            ),
                            filled: true,
                            fillColor: Color(0xFFE1E8F7),
                            hintText: "",
                            /*prefixIcon: Icon(
                            Icons.people_outline_rounded,
                            color: Color(0xFFE1E8F7),
                          )*/),
                        ),


                        SizedBox(
                          height: 20.0,
                        ),

                        Text(
                          'Password',
                          style:
                          TextStyle(  fontSize: 15,
                            fontFamily: "regular",),
                        ),
                        SizedBox(
                          height: 8.0,
                        ),
                    TextFormField(
                          /* keyboardType: TextInputType.emailAddress,*/
                  /*    textInputAction: TextInputAction.next,*/
                          controller: passController,
                          onChanged: (val){
                            check(context);
                          },

                      //password validation
                     /*       validator: (val){
                              if(val!.isEmpty)
                                return 'Empty';
                              return null;
                            },*/
                          decoration: InputDecoration(
                            contentPadding: EdgeInsets.all(8),
                            border: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(8.0),
                              borderSide: BorderSide.none,
                            ),
                            filled: true,
                            fillColor: Color(0xFFE1E8F7),
                            hintText: "************",
                         ),
                        ),

                        SizedBox(
                          height: 20.0,
                        ),
                        Text(
                          'Confirm Password',
                          style:
                          TextStyle(  fontSize: 15,
                            fontFamily: "regular",),
                        ),
                        SizedBox(
                          height: 8.0,
                        ),
                        TextFormField(
                          textInputAction: TextInputAction.done,
                          controller: conPassController,
                          onChanged: (val){
                            check(context);
                          },
                          //password validation
                           /* validator: (val){

                              if(val!.isEmpty)
                                return 'Empty';
                              if(val != _pass.text)
                                return 'Not Match';
                              return null;
                            },*/


                          decoration: InputDecoration(
                            contentPadding: EdgeInsets.all(8),
                            border: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(8.0),
                              borderSide: BorderSide.none,
                            ),
                            filled: true,

                            fillColor: Color(0xFFE1E8F7),
                            hintText: "************",

                          ),
                        ),

                        SizedBox(
                          height: 20.0,
                        ),







                        SizedBox(
                          height: 8.0,
                        ),
                    SizedBox(
                          height:200.0,
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),

      ),
    );
  }

  //
  //Secret Qu Alert
  List secretList =[
    "-What’s your favorite team?",
    "-What’s your astrological sign?",
    "-What’s your favorite movie?",
    "-What city were you born in?",
    "-What was your first car?",
  ];
  var secretVal;
  void secretDialogue(){
    showDialog<void>(
      context: context,
      // false = user must tap button, true = tap outside dialog
      builder: (BuildContext dialogContext) {
        return StatefulBuilder(
            builder: (context,setState){
              return  Dialog(
                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
                insetPadding: EdgeInsets.all(20),
                child: Container(
                  padding: EdgeInsets.symmetric(vertical: 10),
                  child: Column(
                      mainAxisSize: MainAxisSize.min,
                      children: List.generate(secretList.length, (index){
                        return InkWell(
                          onTap: (){
                            setState(() {
                              secretVal = secretList[index];
                              Navigator.pop(context);
                            });
                          },
                          child: Container(
                            height: 50,
                            padding: EdgeInsets.symmetric(horizontal: 20),
                            alignment: Alignment.centerLeft,
                            child: Text(secretList[index],
                              style: TextStyle(
                                  fontSize: 18,
                                  fontFamily: "medium",

                              ),),
                          ),
                        );
                      })
                  ),
                ),
              );
            }
        );
      },
    );
  }
}

标签: flutterflutter-layout

解决方案


用 SingleChildScrollView 包裹你的 Column。它会解决你的问题。像这样..

body: SafeArea(
        child: SingleChildScrollView(
          child: Column(

我也认为在此之后不需要

resizeToAvoidBottomInset: false,

在脚手架。


推荐阅读