flutterflutter-positioned

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


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.


Solution

  • 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