How to resolve background issue in flutter-CodePudding

In my android flutter application after entering in the text box for typing phone number, the phone text box is not moving to the top. It is hiding by the numbers. So, How to resolve this issue? Background image bg.png size is 789X1665 . So, Need to resize the bg image or need to add some code changes? Please help anyone to resolve this issue.

  return Scaffold(
  resizeToAvoidBottomInset : false,

  body: Container(
    height: MediaQuery.of(context).size.height,
    width: MediaQuery.of(context).size.width,
    decoration: BoxDecoration(
        image : DecorationImage(
            image: AssetImage('images/bg.png'),
            fit: BoxFit.contain
        )
    ),
    child: SingleChildScrollView(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [

          SizedBox(height: 500,),

          Container(
            margin:EdgeInsets.only(top: 10),
            child: const Center(
              child: Text(
                "Phone (OTP) Authentication",
                style:TextStyle(fontWeight: FontWeight.bold,fontSize: 20) ,
              ),
            ),
          ),

          SizedBox(height: 10,),

          SizedBox(
            width: 400,
            height: 50,
            child: CountryCodePicker(
              onChanged: (country){
                setState(() {
                  dialCodeDigits = country.dialCode!;
                });
              },
              initialSelection: "IN",
              showCountryOnly: false,
              showOnlyCountryWhenClosed: false,
              favorite: [" 1", "US", " 91", "IND"],
              hideSearch: true,
              showDropDownButton: false,
              enabled: false,
            ),
          ),

          Container(
            margin: EdgeInsets.only(top: 10,right: 10,left: 10),
            child: TextField(
              decoration: InputDecoration(
                  hintText: "Phone Number",
                  prefix: Padding(
                    padding: EdgeInsets.all(4),
                    child: Text(dialCodeDigits!),
                  )
              ),
              maxLength: 12,
              keyboardType: TextInputType.number,
              controller: _controller,
            ),
          ),

          Container(
            margin: EdgeInsets.all(15),
            width: double.infinity,
            child: ElevatedButton(
              onPressed: (){
                Navigator.of(context).push(MaterialPageRoute(builder: (c) => OTPControllerScreen(
                  phone: _controller.text,
                  codeDigits: dialCodeDigits!,
                )));
              },
              child: Text('Next',style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),),
            ),
          ),

        ],
      ),
    )
  )

);

CodePudding user response：

Use resizeToAvoidBottomInset=true; to specify if the body should resize when the keyboard appears. You can also wrap the parent Container() with SingleChildScrollView()

CodePudding user response：

You should remove resizeToAvoidBottomInset: false,, that should fix your issue and also you shouldn't be doing this SizedBox(height: 500,), or SizedBox( width: 400, height: 50, Use padding instead!