0

I have a login page with two textField when I have to type keyboard hides login Button and other fields.

Widget build(BuildContext context) {
return Scaffold(
  resizeToAvoidBottomPadding: false,
  body: Container(
    child: SingleChildScrollView(
     //color: Colors.white,
    padding: EdgeInsets.only(top: 120.0, right: 48.0, left: 48.0, bottom: 20.0),
    child: Column(
      children: <Widget>[
        new Image.asset('assets/images/login.png',height: 170, width: 170,),
        SizedBox(height: 40.0,),
        _input("Roll Number",_rollnumberController, false),
        SizedBox(height: 20.0,),
        _input("Phone Number",_phonenumberController, false),
        SizedBox(height: 40.0,),
        buildLogInButton(),
      ],
    ),
  ),
  ),
);
}
halfer
  • 19,824
  • 17
  • 99
  • 186
Sandeep Sharma
  • 639
  • 2
  • 9
  • 34

1 Answers1

1

I have changed the solution to using the keyboard visibility to decide when to scroll up or down. I am using a package called flutter_keyboard_visibility.

I have written an example using most of your code, but replacing your specific inputs and login button with generic ones:

Import

import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';

Class

ScrollController _scrollController = ScrollController();
FocusNode _focusNodePassword = FocusNode();

@override
void initState() {
  KeyboardVisibilityNotification().addNewListener(
    onChange: (bool visible) {
      visible ? scrollToBottom() : scrollToTop();
    },
  );
  super.initState();
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: LayoutBuilder(
      builder: (BuildContext context, BoxConstraints viewportConstraints) {
        return SingleChildScrollView(
          controller: _scrollController,
          padding: EdgeInsets.only(
            top: 120.0, right: 48.0, left: 48.0, bottom: 20.0),
          child: Column(
            children: <Widget>[
              Container(height: 170, width: 170, color: Colors.blue,),
              SizedBox(height: 40.0,),
              TextFormField(
                decoration: InputDecoration(
                  labelText: 'Email'
                ),
                onEditingComplete: () {
                  _focusNodePassword.requestFocus();
                }
              ),
              SizedBox(height: 20.0,),
              TextFormField(
                decoration: InputDecoration(
                  labelText: 'Password'
                ),
                focusNode: _focusNodePassword,
                onEditingComplete: () {
                  FocusScope.of(context).requestFocus(new FocusNode());
                }
              ),
              SizedBox(height: 40.0,),
              RaisedButton(
                child: Text('Login'),
                onPressed: () {
                  _scrollController.animateTo(0,
                    duration: Duration(milliseconds: 200),
                    curve: ElasticOutCurve()
                  );
                },
              ),
            ],
          ),
        );
      }
    ),
  );
}

void scrollToTop() {
  Timer(Duration(milliseconds: 50), (){
    _scrollController.animateTo(0,
      duration: Duration(milliseconds: 400),
      curve: ElasticOutCurve()
    );
  });
}

void scrollToBottom() {
  Timer(Duration(milliseconds: 50), (){
    _scrollController.animateTo(2000,
      duration: Duration(milliseconds: 400),
      curve: ElasticOutCurve()
    );
  });
}
J. S.
  • 8,905
  • 2
  • 34
  • 44
  • scrollToBottom ? – Sandeep Sharma Jan 02 '20 at 03:56
  • I have now added the missing functions. – J. S. Jan 02 '20 at 07:29
  • Everything is fine. thanks so much but i have this problem https://youtu.be/FJ7ZFEhXz4c – Sandeep Sharma Jan 02 '20 at 08:44
  • I've changed the solution to use keyboard detection for the scroll and removed the Constraints. This makes it so that the issue you showed on the video is no longer happening. You may have to fiddle with the Timer Duration to make sure it works well for you. If this solution works for you, please mark it as correct and upvote it. – J. S. Jan 02 '20 at 11:47
  • Thanks for help. the issue i showed you on the video is when, before typing in text field not on the time of typing. maybe this video help what i m try to say. https://youtu.be/c3NemqxepeM – Sandeep Sharma Jan 02 '20 at 12:33
  • Are you moving the view up and down with your finger? – J. S. Jan 02 '20 at 13:26
  • Yes, I m moving the view up and down with my finger. – Sandeep Sharma Jan 02 '20 at 13:35
  • The new solution that I put in the question removes that problem. Have you used the new code? Please take a careful look at the code, as it's quite different from the original solution I proposed. – J. S. Jan 02 '20 at 13:40
  • Hello, thanks a lot for helping I m still getting the same. I don't know what I m doing wrong.and keyboard_visibility you suggested is fine but not on build apk . this is link of issue i was facing due to keyboard_visibility :- https://github.com/flutter/flutter/issues/47070 and this is my repo link :- https://github.com/undefined098/College-Services I have same code that you provided but it doesn't work. – Sandeep Sharma Jan 02 '20 at 16:24
  • Ok. I will see if there is a better or alternate solution. – J. S. Jan 02 '20 at 16:28
  • There is a similar [package](https://pub.dev/packages/flutter_keyboard_visibility) with the same implementation. It seems to be able to build. Can you try it? – J. S. Jan 02 '20 at 16:34
  • I have tried it but leads to same issue. you can see through the issue I mentioned above btw happy new year and thanks a lot. – Sandeep Sharma Jan 02 '20 at 16:50
  • That's strange though, as I made a build on my machine with that package and it built the apk file just fine. Is it incompatible with another package you have or your flutter version? – J. S. Jan 02 '20 at 17:44
  • Ok, I will try again and send you the issue.so when you build on your machine does it solve the problem I showed in the video? – Sandeep Sharma Jan 03 '20 at 01:15
  • I'm glad you managed to get it working. Happy to help. Good luck! – J. S. Jan 03 '20 at 11:00
  • `ScrollController _controller = ScrollController(); in init i added _controller.addListener( () { double maxScroll = _controller.position.maxScrollExtent; double currentScroll = _controller.position.pixels; double delta = 200.0; if ( maxScroll - currentScroll <= delta) { // whatever you determine here print('------------------botoom'); } print('------------------'+currentScroll.toString());` Applied the controler to SinglechildScrollView but nothing happen – b.john Mar 14 '20 at 06:37