How to use column inside single child scroll view flutter

Question

I have a column inside a single child scroll view. I need to make my login screen scroll when I type using the keyboard because the keyboard hides the password text field.

class UserRegistration extends StatefulWidget {

  @override
  _UserRegistrationState createState() => _UserRegistrationState();
}

class _UserRegistrationState extends State {
  @override
  Widget build(BuildContext context) {

    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Color(0xFF6C62FF)
    ));

    return SafeArea(
      child: GestureDetector(
        onTap: () => FocusScope.of(context).requestFocus(FocusNode()),
        child: Scaffold(
          resizeToAvoidBottomInset: false,
          resizeToAvoidBottomPadding: false,
          backgroundColor: Color(0xFF6C62FF),
          body:   SingleChildScrollView(
            padding: EdgeInsets.symmetric(horizontal: 30),
            child: Column([![enter image description here][1]][1]
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Center(child: FittedBox(child: Text('Welcome', style: TextStyle(fontFamily: 'SourceSans', fontSize: 50, fontWeight: FontWeight.w600, color: Color(0xFFFFD700)),))),
                Container(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text('Register', style: TextStyle(fontFamily: 'SourceSans', fontSize: 40, fontWeight: FontWeight.w600, color: Colors.white)),
                      SizedBox(height: 5,),
                      Text('Start from today', style: TextStyle(fontFamily: 'SourceSans', fontSize: 25, letterSpacing: 1.5,fontWeight: FontWeight.w600, color: Colors.white), overflow: TextOverflow.ellipsis,),
                    ],
                  ),
                ),
                Form(
                  child: Column(
                    children: [
                      EditTextNormal(hintText: 'Email', iconData: Icons.email, textInputType: TextInputType.emailAddress, validate: false, errorText: 'Enter your email',),
                      SizedBox(height: 20,),
                      EditTextObscure(hintText: 'Password', iconData: Icons.lock, textInputType: TextInputType.text, validate: false, errorText: 'Enter your password',),
                      SizedBox(height: 50,),
                      Container(
                        height: 50,
                        width: 180,
                        child: FlatButton(
                          splashColor: Colors.transparent,
                          highlightColor: Colors.transparent,
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(8)
                          ),
                          onPressed: () {},
                          color: Colors.white,
                          child: Text('Register', style: TextStyle(color: Color(0xFF6C62FF), fontSize: 20), overflow: TextOverflow.ellipsis,),
                        ),
                      )
                    ],
                  ),
                ),
                Center(
                  child: RichText(
                    text: TextSpan(
                      children: [
                        TextSpan(text: 'Login', style: TextStyle(color: Color(0xFFFFD700), letterSpacing: 1, wordSpacing: 1.5))
                      ],
                      text: 'Have an account? ',
                      style: TextStyle(fontSize: 18, fontFamily: 'SourceSans', fontWeight: FontWeight.bold, letterSpacing: 1, wordSpacing: 1.5)
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

This is my code but here when I use a column inside a single child scroll view space evenly does not work. Please give me a solution.

My output:

Expected Output:

user_3995941 · Answer

Try This

Widget build(BuildContext context) {
  return Scaffold(
    body: SingleChildScrollView(
      physics: NeverScrollableScrollPhysics(),
      child: ConstrainedBox(
        constraints: BoxConstraints(
          minWidth: MediaQuery.of(context).size.width,
          minHeight: MediaQuery.of(context).size.height,
        ),
        child: IntrinsicHeight(
          child: Column(
            mainAxisSize: MainAxisSize.max,
            children: [
              // CONTENT HERE
            ],
          ),
        ),
      ),
    ),
  );
}

user_5106574 · Answer

Add Container inside SingleChildScrollView and assign it height based on your keyboard open or not.

Add Dependency:

dependencies:
  keyboard_visibility: ^0.5.6

Initialize keyboard listener in initState() for callback

bool _isKeyBoardShown = false;

  @protected
  void initState() {
    super.initState();
    KeyboardVisibilityNotification().addNewListener(
      onChange: (bool visible) {
        setState(() {
          _isKeyBoardShown = visible;
        });
      },
    );
  }

Based on _isKeyBoardShown value decide whether to add additional height on the screen or not.

Container(
          width: MediaQuery.of(context).size.width,
          height: _isKeyBoardShown
              ? MediaQuery.of(context).size.height +
                  MediaQuery.of(context).size.height / 2
              : MediaQuery.of(context).size.height,
          child: Column(....)
           )

Note: Use MediaQuery to decide additional height don't use hard-coded values here I used MediaQuery.of(context).size.height / 2

How to use column inside single child scroll view flutter

2 Answers