For the below program, How Textfield move up when keyboard appears in flutter?

66 views Asked by At

For the below program, How Textfield move up when keyboard appears in flutter ?

I already tried resizeToAvoidBottomInset and SingleChildScrollView, But there is no use.

Please check and suggest the correspond way.

Scaffold(
  resizeToAvoidBottomInset: false,
  body: SafeArea(
    child: Stack(
        children: \<Widget\>\[
          Positioned(
            top: 0,
            left: 0,
            child : IconButton(
              onPressed: () { Navigator.pop(context); },
              icon: const Icon(Icons.arrow_back, color: Color(0xFF382E1E),),
            ),
          ),
          Positioned(
            top: 55,
            left: 90,
            child: Image.asset('assets/images/Screen3ImageBG.png'),
          ),
          Positioned(
            top: 64,
            left: 60,
            child: Image.asset('assets/images/Screen3Image.png'),
          ),
          const Positioned(
              left:30,
              top:350,
              height:44,
              width: 150,
              child: Text('LOGIN',style:TextStyle(fontSize:35,
                  fontFamily:'LibreFranklin-SemiBold' ,
                  //  fontStyle: FontStyle.normal,
                  fontWeight:FontWeight.w600,
                  color:Color(0XFF382E1E)))),
          const Positioned(
              left:30,
              top:390,
              height: 20,
              width: 200,
              child: Text('Please sign in to continue',
                  style:TextStyle(fontFamily: 'LibreFranklin-Medium',
                      //  fontStyle: FontStyle.normal,
                      fontWeight: FontWeight.w500,
                      color:Color(0xFF382E1E),
                      fontSize: 15)
              )),
          Positioned(
              top: 430,
              left: 20,
              right: 20,
              child: NormalTextFields(hintText: "Registration number", prefixIcon: Icons.person_outline, inputType: TextInputType.phone,)
          ),
          Positioned(
            top: 510,
            left: 20,
            right: 20,
            child: PasswordTextField(hintText: "Password",),
          ),
          Positioned(
            top: 585,
            right: 20,
            child: GestureDetector(
              child: const Text("Forgot Password?", style: TextStyle(fontFamily: "LibreFranklin-Medium", fontSize: 15, fontWeight: FontWeight.w500, decoration: TextDecoration.underline),),
              onTap: null,
            ),
          ),
          Positioned(
            top:635,
            right: 20,
            height: 40,
            width: 100,
            child:Container(
                decoration: BoxDecoration(
                    shape: BoxShape.rectangle,
                    borderRadius: BorderRadius.circular(50),
                    boxShadow: const\[
                      BoxShadow(
                        color: Color(0x33000000),
                        offset: Offset(2, 4),
                        blurRadius: 2,
                        spreadRadius: 0,
                      ),
                    \]
                ),
                child: ElevatedButton(
                  style:ElevatedButton.styleFrom(
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(50)
                    ),
                    padding:const EdgeInsets.only(
                      left:25,
                      right: 25,
                    ),
                    backgroundColor: Color(0XFF00512D),
                  ),
                  onPressed: (){
                    Navigator.push(context, MaterialPageRoute(builder: (context) =\> Screen4()));
                  },
                  child:const Text('LOGIN',
                    style:TextStyle(
                        fontSize: 15,
                        fontWeight: FontWeight.w700,
                        color: Color(0XFFFCFCFC),
                        fontFamily: 'LibreFranklin-Bold'
                    ),
                  ),
                )
            ),
          ),
          const Positioned(
            top: 705,
            left: 100,
            child: Text("Having trouble to log in?",
              style: TextStyle(fontWeight: FontWeight.w400,
                fontFamily: "LibreFranklin-Regular",
                fontSize: 17,
              ),
            ),
          ),
          Positioned(
            top: 730,     // 730
            left : 172,
            child: GestureDetector(
              child: const Text("HELP",
                style: TextStyle(
                  shadows: \<Shadow\>\[
                    Shadow(
                      offset: Offset(1, 2),
                      blurRadius: 2,
                      color: Color(0x33000000),
                    ),
                  \],
                  fontFamily: "LibreFranklin-Bold",
                  fontWeight: FontWeight.w700,
                  fontSize: 20,
                  color: Color(0xFFCF9F69),
                ),
              ),
              onTap: (){
                Navigator.push(context, MaterialPageRoute(builder: (context) =\> Screen4()));
              },
            ),
          ),
        \],
      ),
    ),
  ),

How Textfield move up when keyboard appears for the above program.

I already tried "resizeToAvoidBottomInset" and "SingleChildScrollView" .

There is no use.

1

There are 1 answers

1
DevPankajPatel On BEST ANSWER

Just replace the below snippet

Scaffold(
      resizeToAvoidBottomInset: true, 
      body: SingleChildScrollView(
        child: SizedBox(
          height: MediaQuery.of(context).size.height,
          child: Stack(
            children: <Widget>[
             //remain code is the same 
            ],),
           ),
         ),
      );

You need to use SingleChildScrollView as the body of the scaffold and Sizebox with height: MediaQuery.of(context).size.height as a child of singleChildScrollView. Make sure to resizeToAvoidBottomInset: true