2

I'm trying to make login screen in flutter

I'm using below code

ModalProgressHUD(
        dismissible: false,
        child: Container(
          color: Colors.white,
          child: SafeArea(
            child: Scaffold(
              body: Container(
                height: double.infinity,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage('assets/images/login_bg.png'),
                    fit: BoxFit.fill,
                  ),
                  shape: BoxShape.rectangle,
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisSize: MainAxisSize.max,
                  children: <Widget>[
                    Padding(
                      padding: const EdgeInsets.only(left: 15.0),
                      child: IconButton(
                        iconSize: 70,
                        icon: Image.asset(
                          'assets/images/back.png',
                        ),
                        onPressed: () {
                          Navigator.pop(context);
                        },
                      ),
                    ),
//                    Spacer(),
                    Expanded(
                      child: SingleChildScrollView(
                        child:  Column(
                          mainAxisSize: MainAxisSize.max,
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            Column(
                              mainAxisSize: MainAxisSize.max,
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: <Widget>[
                                Column(
                                  crossAxisAlignment: CrossAxisAlignment.center,
                                  mainAxisSize: MainAxisSize.max,
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: <Widget>[
                                    Container(
                                      margin: const EdgeInsets.only(
                                          top: 30, bottom: 40),
                                      child: Image.asset(
                                        'assets/images/oricon_logo.png',
                                        height: 100.0,
                                        width: 100.0,
                                      ),
                                    ),
                                    Column(
                                      crossAxisAlignment:
                                      CrossAxisAlignment.center,
                                      mainAxisSize: MainAxisSize.max,
                                      mainAxisAlignment: MainAxisAlignment.end,
                                      children: <Widget>[
                                        Form(
                                          key: _formKey,
                                          child: new Theme(
                                              data: ThemeData(
                                                  accentColor: Colors.purple,
                                                  primaryColor:
                                                  AppColors.colorBlue,
                                                  inputDecorationTheme:
                                                  new InputDecorationTheme(
                                                      labelStyle:
                                                      new TextStyle(
                                                        color: AppColors.colorBlue,
                                                        fontSize: 20.0,
                                                      ))),
                                              child: Padding(
                                                padding:
                                                const EdgeInsets.all(20.0),
                                                child: Column(
                                                  crossAxisAlignment:
                                                  CrossAxisAlignment.center,
                                                  children: <Widget>[
                                                    TextFormField(
                                                      keyboardType:
                                                      TextInputType
                                                          .emailAddress,
                                                      textCapitalization:
                                                      TextCapitalization
                                                          .none,
                                                      focusNode:
                                                      _emailFocusNode,
                                                      controller:
                                                      emailTextController,

                                                      maxLines: 1,
                                                      maxLength: 40,
                                                      // textCapitalization:
                                                      //     TextCapitalization.none,
                                                      style: TextStyle(
                                                          color: AppColors
                                                              .colorGray),
                                                      decoration:
                                                      new InputDecoration(
                                                          labelText:
                                                          "Email address",
                                                          counterText: '',
                                                          labelStyle:
                                                          TextStyle(
                                                            fontFamily:
                                                            'h_roman',
                                                            color: _emailFocusNode
                                                                .hasFocus
                                                                ? AppColors
                                                                .colorBlue
                                                                : AppColors
                                                                .colorGray,
                                                          ),
                                                          enabledBorder:
                                                          UnderlineInputBorder(
                                                            borderSide: BorderSide(
                                                                color: AppColors
                                                                    .colorGray),
                                                          ),
                                                          focusedBorder:
                                                          UnderlineInputBorder(
                                                            borderSide: BorderSide(
                                                                color: AppColors
                                                                    .colorBlue),
                                                          ),
                                                          border:
                                                          UnderlineInputBorder()),

                                                      validator:
                                                          (String email) {
                                                        if (email.length == 0) {
                                                          return 'Please enter email address';
                                                        } else {
                                                          if (!RegExp(
                                                              r"^[a-zA-Z0-9.]+@[a-zA-Z0-9]+\.[a-zA-Z]+")
                                                              .hasMatch(
                                                              email)) {
                                                            return 'Please enter valid email address';
                                                          } else {
                                                            return null;
                                                          }
                                                        }
                                                      },
                                                      onSaved: (String val) {
                                                        // _email = val;
                                                      },
                                                      onChanged: (text) {
                                                        // _email = text;
                                                      },
                                                    ),
                                                    TextFormField(
                                                      focusNode:
                                                      _passwordFocusNode,
                                                      controller:
                                                      passTextController,
                                                      maxLength: 20,
                                                      style: TextStyle(
                                                          fontFamily: 'h_roman',
                                                          color: AppColors
                                                              .colorGray),
                                                      decoration:
                                                      new InputDecoration(
                                                          counterText: '',
                                                          suffixIcon:
                                                          IconButton(
                                                            icon: Icon(
                                                              // Based on passwordVisible state choose the icon
                                                              passwordVisible
                                                                  ? Icons
                                                                  .visibility
                                                                  : Icons
                                                                  .visibility_off,
                                                              color: AppColors
                                                                  .colorGray,
                                                            ),
                                                            onPressed: () {
                                                              setState(() {
                                                                passwordVisible =
                                                                !passwordVisible;
                                                              });
                                                            },
                                                          ),
                                                          labelText:
                                                          "Password",
                                                          labelStyle:
                                                          TextStyle(
                                                            fontFamily:
                                                            'h_roman',
                                                            color: _passwordFocusNode
                                                                .hasFocus
                                                                ? AppColors
                                                                .colorBlue
                                                                : AppColors
                                                                .colorGray,
                                                          ),
                                                          enabledBorder:
                                                          UnderlineInputBorder(
                                                            borderSide: BorderSide(
                                                                color: AppColors
                                                                    .colorGray),
                                                          ),
                                                          focusedBorder:
                                                          UnderlineInputBorder(
                                                            borderSide: BorderSide(
                                                                color: AppColors
                                                                    .colorBlue),
                                                          ),
                                                          border:
                                                          UnderlineInputBorder()),
                                                      keyboardType:
                                                      TextInputType.text,
                                                      obscureText:
                                                      passwordVisible,
                                                      validator: (String pass) {
                                                        if (pass.length == 0) {
                                                          return 'Please enter password';
                                                        } else {
                                                          return null;
                                                        }
                                                      },
                                                    ),
                                                    Align(
                                                        alignment: Alignment
                                                            .bottomRight,
                                                        child: Padding(
                                                          padding:
                                                          const EdgeInsets
                                                              .only(
                                                              top: 20),
                                                          child:
                                                          GestureDetector(
                                                            onTap: () {
                                                              showContactUsDialog(
                                                                  context);
                                                            },
                                                            child: Padding(
                                                              padding:
                                                              const EdgeInsets
                                                                  .all(8.0),
                                                              child: Text(
                                                                "Need help?",
                                                                style: TextStyle(
                                                                    fontFamily:
                                                                    'h_roman',
                                                                    color: AppColors
                                                                        .colorBlue,
                                                                    fontWeight:
                                                                    FontWeight
                                                                        .normal,
                                                                    fontSize:
                                                                    15.0),
                                                              ),
                                                            ),
                                                          ),
                                                        )),
                                                    Container(
                                                      margin:
                                                      const EdgeInsets.only(
                                                          top: 40.0),
                                                      child: MaterialButton(
                                                        textColor: Colors.white,
                                                        minWidth: 250.0,
                                                        padding:
                                                        const EdgeInsets
                                                            .all(15.0),
                                                        color:
                                                        AppColors.colorBlue,
                                                        child: Text(
                                                          "Login",
                                                          style: TextStyle(
                                                              fontFamily:
                                                              'h_bold',
                                                              color:
                                                              Colors.white,
//                                    fontWeight: FontWeight.bold,
                                                              fontSize: 20.0),
                                                        ),
                                                        shape: RoundedRectangleBorder(
                                                            borderRadius:
                                                            BorderRadius
                                                                .circular(
                                                                50.0)),
                                                        onPressed: () {
                                                          if (Utils()
                                                              .isEmptyString(
                                                              _token)) {
                                                            if (_formKey
                                                                .currentState
                                                                .validate()) {
                                                              debugPrint(
                                                                  "Email Address -> " +
                                                                      emailTextController
                                                                          .text);

                                                              debugPrint(
                                                                  "Password  -> " +
                                                                      passTextController
                                                                          .text);
                                                              Utils()
                                                                  .getStatus()
                                                                  .then(
                                                                      (connectionResult) {
                                                                    if (connectionResult) {
                                                                      setState(() {
                                                                        _saving =
                                                                        true;
                                                                      });

                                                                      _callLoginAPI(
                                                                          emailTextController
                                                                              .text,
                                                                          passTextController
                                                                              .text);
                                                                    } else {
                                                                      Utils().showMessageDialog(
                                                                          context,
                                                                          "No internet connection");
                                                                    }
                                                                  });
                                                            }
                                                          } else {
                                                            Utils().showMessageDialog(
                                                                context,
                                                                "Notification token is invalid");
                                                          }
                                                        },
                                                        splashColor: Colors
                                                            .redAccent[100],
                                                      ),
                                                    ),
                                                  ],
                                                ),
                                              )),
                                        ),
                                      ],
                                    ),
                                  ],
                                ),
                              ],
                            ),
//                          Container(
//                            margin:
//                            const EdgeInsets.only(top: 60, bottom: 20),
//                            child: Row(
//                              mainAxisAlignment: MainAxisAlignment.center,
//                              children: <Widget>[
////                          FlutterLogo(
////                            size: 40,
////                          ),
////                          FlutterLogo(
////                            size: 40,
////                          ),
//                              ],
//                            ),
//                          ),

                          ],
                        ),
                      ),
                    )
                  ],
                ),
              ),
            ),
          ),
        ),
        inAsyncCall: _saving);

the above code is working fine in ios device but in android screen not scrolling up when keyboard appears

I have also checked below some links and post but it didn't help to solve my issue

If need more information please do let me know. Thanks in advance. Your efforts will be appreciated.

Goku
  • 9,102
  • 8
  • 50
  • 81
  • try this Solution: https://stackoverflow.com/questions/59782265/flutter-textfield-hidden-by-keyboard-try-many-solution-but-not-working – MohammedAli Feb 04 '20 at 05:30

3 Answers3

3

If this issue is happening after upgrading to Flutter 3.10 then upgrade screen_util library to latest version and set useInheritedMediaQuery:true

ScreenUtilInit(
        useInheritedMediaQuery: true,
        ....
Siddharth Sogani
  • 321
  • 1
  • 10
0

Try with this one , don't use Expanded and SingleChildScrollView used in top of column not second one.

  SingleChildScrollView(
            child: Column(
              children: <Widget>[
              //  your other child widgets
              ],
            ),
          ),
Avinash
  • 867
  • 4
  • 11
0

You can just scroll your input fields up by using resizeToAvoidBottomInset: false property in Scaffold widget instead of screen scrolling up.

nauman mir
  • 79
  • 4