Getting Error on ScrollView Flutter Whenever i tried to click on text-filed

Question

I am making a simple Login Page where I am getting error of bottom overflow whenever i clicked on text-filed

I tried to Implement SingleChildScrollView but still getting error.I also tried ListView to overcome this but the stack-trace error is showing the relevant error caused by sometime Column or sometimes Scaffold Thanks in Advance

Here is my login.dart file

class LoginScreen extends StatelessWidget {
  static const rout = '/login-screen';
  const LoginScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      backgroundColor: const Color.fromRGBO(255, 243, 18, 3),
      body: Column(children: [
        Padding(
          padding: const EdgeInsets.only(top: 90),
          child: Image.asset('assets/images/Logo.png'),
        ),
        // const SizedBox(
        //   height: 40,
        // ),
        const SafeArea(
          child: Padding(
            padding: EdgeInsets.only(left: 3, right: 250, top: 10),
            child: Text(
              "Login",
              style: TextStyle(
                  color: Colors.black,
                  fontWeight: FontWeight.bold,
                  fontSize: 40),
              //  textAlign: TextAlign.center,
            ),
          ),
        ),
        const Padding(
          padding: EdgeInsets.only(left: 20, right: 200, top: 1),
          child: Text(
            "Please Login to continue",
            style: TextStyle(
                color: Colors.black,
                fontWeight: FontWeight.normal,
                fontSize: 15),
            //  textAlign: TextAlign.center,
          ),
        ),
        const SizedBox(
          height: 10,
        ),
        const Card(
          margin: EdgeInsets.only(left: 10, right: 10, top: 10),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(
              Radius.circular(20),
            ),
          ),
          child: TextField(
            obscureText: false,
            keyboardType: TextInputType.emailAddress,
            decoration: InputDecoration(
              prefixIcon: Icon(
                Icons.person,
                color: Colors.black26,
              ),
              hintText: 'Email-Address',
              filled: true,
              fillColor: Colors.white,
              border: OutlineInputBorder(
                borderSide: BorderSide.none,
                borderRadius: BorderRadius.all(
                  Radius.circular(20),
                ),
              ),
            ),
          ),
        ),
        const SizedBox(
          height: 10,
        ),
        const Card(
          margin: EdgeInsets.only(left: 10, right: 10, top: 10),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(
              Radius.circular(20),
            ),
          ),
          child: TextField(
            obscureText: true,
            keyboardType: TextInputType.emailAddress,
            decoration: InputDecoration(
              prefixIcon: Icon(Icons.password, color: Colors.black26),
              hintText: "Password",
              filled: true,
              fillColor: Colors.white,
              border: OutlineInputBorder(
                borderSide: BorderSide.none,
                borderRadius: BorderRadius.all(
                  Radius.circular(20),
                ),
              ),
            ),
          ),
        ),
        const SizedBox(
          height: 15,
        ),
        ElevatedButton(
          onPressed: () => {},
          style: ElevatedButton.styleFrom(
              //  backgroundColor: Color.fromARGB(255, 246, 214, 4)),
              backgroundColor: Colors.white),
          child: const Text(
            'Login',
            style: TextStyle(
              color: Colors.black,
              fontSize: 30,
              fontWeight: FontWeight.normal,
            ),
          ),
        ),
        const Spacer(),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Padding(
              padding: EdgeInsets.only(bottom: 20),
              child: Text(
                "Don't have an account?",
                style: TextStyle(color: Colors.black, fontSize: 18),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(bottom: 20),
              child: TextButton(
                  onPressed: () => {},
                  child: const Text(
                    "Sign Up",
                    style: TextStyle(
                        color: Colors.black,
                        fontSize: 18,
                        fontWeight: FontWeight.bold),
                  )),
            )
          ],
        )
      ]),
    ));
  }
}

eamirho3ein · Answer

Use GlobalKey to make custom spacer for SingleChildScrollView like this:

class TestWidget extends StatefulWidget {
  const TestWidget({Key? key}) : super(key: key);

  @override
  State createState() => _TestWidgetState();
}

class _TestWidgetState extends State {
  GlobalKey topWidgetKey = GlobalKey();
  GlobalKey bottomWidgetKey = GlobalKey();
  double topWidgetHeight = 0.0;
  double bottomWidgetHeight = 0.0;
  double spacer = 0.0;

  @override
  void initState() {
    super.initState();

    WidgetsBinding.instance.addPostFrameCallback((_) {
      setState(() {
        final _topWidgetKeyContext = topWidgetKey.currentContext;
        if (_topWidgetKeyContext != null) {
          final box = _topWidgetKeyContext.findRenderObject() as RenderBox;
          topWidgetHeight = box.size.height;
        }

        final _bottomKeyContext = bottomWidgetKey.currentContext;
        if (_bottomKeyContext != null) {
          final box = _bottomKeyContext.findRenderObject() as RenderBox;
          bottomWidgetHeight = box.size.height;
        }

        spacer = MediaQuery.of(context).size.height -
            AppBar().preferredSize.height -
            topWidgetHeight -
            bottomWidgetHeight -
            MediaQuery.of(context).viewPadding.top -
            MediaQuery.of(context).viewPadding.bottom;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.purple[50],
      appBar: AppBar(
        title: Text('fist'),
      ),
      body: SingleChildScrollView(
        child: Column(children: [
          Column(
            key: topWidgetKey,
            children: [
              Padding(padding: EdgeInsets.only(top: 90), child: Container()
                  //  Image.asset('assets/images/Logo.png'),
                  ),
              // const SizedBox(
              //   height: 40,
              // ),
              SafeArea(
                child: Padding(
                  padding: EdgeInsets.only(left: 3, right: 250, top: 10),
                  child: Text(
                    "Login",
                    style: TextStyle(
                        color: Colors.black,
                        fontWeight: FontWeight.bold,
                        fontSize: 40),
                    //  textAlign: TextAlign.center,
                  ),
                ),
              ),
              Padding(
                padding: EdgeInsets.only(left: 20, right: 200, top: 1),
                child: Text(
                  "Please Login to continue",
                  style: TextStyle(
                      color: Colors.black,
                      fontWeight: FontWeight.normal,
                      fontSize: 15),
                  //  textAlign: TextAlign.center,
                ),
              ),
              SizedBox(
                height: 10,
              ),
              Card(
                margin: EdgeInsets.only(left: 10, right: 10, top: 10),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(
                    Radius.circular(20),
                  ),
                ),
                child: TextField(
                  obscureText: false,
                  keyboardType: TextInputType.emailAddress,
                  decoration: InputDecoration(
                    prefixIcon: Icon(
                      Icons.person,
                      color: Colors.black26,
                    ),
                    hintText: 'Email-Address',
                    filled: true,
                    fillColor: Colors.white,
                    border: OutlineInputBorder(
                      borderSide: BorderSide.none,
                      borderRadius: BorderRadius.all(
                        Radius.circular(20),
                      ),
                    ),
                  ),
                ),
              ),
              SizedBox(
                height: 10,
              ),
              Card(
                margin: EdgeInsets.only(left: 10, right: 10, top: 10),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(
                    Radius.circular(20),
                  ),
                ),
                child: TextField(
                  obscureText: true,
                  keyboardType: TextInputType.emailAddress,
                  decoration: InputDecoration(
                    prefixIcon: Icon(Icons.password, color: Colors.black26),
                    hintText: "Password",
                    filled: true,
                    fillColor: Colors.white,
                    border: OutlineInputBorder(
                      borderSide: BorderSide.none,
                      borderRadius: BorderRadius.all(
                        Radius.circular(20),
                      ),
                    ),
                  ),
                ),
              ),
              SizedBox(
                height: 15,
              ),
              ElevatedButton(
                onPressed: () => {},
                // style: ElevatedButton.styleFrom(
                //     //  backgroundColor: Color.fromARGB(255, 246, 214, 4)),
                //     backgroundColor: Colors.white),
                child: Text(
                  'Login',
                  style: TextStyle(
                    color: Colors.black,
                    fontSize: 30,
                    fontWeight: FontWeight.normal,
                  ),
                ),
              ),
            ],
          ),
          SizedBox(
            height: spacer < 24 ? 24 : spacer,
          ),
          Padding(
            key: bottomWidgetKey,
            padding: EdgeInsets.only(bottom: 20),
            child: Text.rich(
              TextSpan(
                children: [
                  TextSpan(
                      text: "Don't have an account?",
                      style: TextStyle(color: Colors.black, fontSize: 18)),
                  TextSpan(
                      text: "Sign Up",
                      style: TextStyle(
                          color: Colors.black,
                          fontSize: 18,
                          fontWeight: FontWeight.bold),
                      recognizer: TapGestureRecognizer()..onTap = () {}),
                ],
              ),
            ),
          ),
        ]),
      ),
    );
  }
}

Getting Error on ScrollView Flutter Whenever i tried to click on text-filed

1 Answers