CODEWITHSUNDEEP
flutterscrollflutter-layout
Damanjit Hundal
Damanjit Hundal

Reputation: 338

Flutter: I want my screen to automatically scroll up when selecting Textfield so that my submit button is not hidden?

I'm currently wrapping my column widget in a SingleChildScrollView() and setting resizeToAvoidBototmInset: false on Scaffold(), yet the screen does not automatically scroll up when selecting the Textfields. Ideally, I want the submit button to show when user is inputting data into the second field. Currently it hides on some devices when the keyboard is visible.

Scaffold(
    resizeToAvoidBottomInset: false,
    body: SingleChildScrollView(
        child: SafeArea(
            child: Stack(
                children: <Widget> [
                    CustomPaint(),
                    Column(children: <Widget>[
                        TextField(), 
                        TextField(), 
                        RaisedButton(),
                    ])
                ]
            )
        )
    )
)

This is what the current format looks like. I do not have a FocusNode() on the textfield and did think about raising the textfield based on when the keyboard is visible, but that disturbs my custom paint background and did not want to have that effect.

From a conceptual point of view, is there something I'm missing that is preventing the screen from automatically scrolling up.

Upvotes: 3

Views: 5582

Answers (3)

Mahmoud Al-shehyby
Mahmoud Al-shehyby

Reputation: 89


class TestWidget extends StatelessWidget {
  const TestWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      resizeToAvoidBottomInset: true,
      body: SingleChildScrollView(
        child: SafeArea(
          child: Stack(
            children: <Widget>[
              CustomPaint(),
              Column(
                children: <Widget>[
                  TextField(),
                  TextField(),
                ],
              )
            ],
          ),
        ),
      ),
      bottomNavigationBar: Padding(
        padding: EdgeInsets.all(10),
        child: RaisedButton(),
      ),
    );
  }
}

You can simply pass the widget to bottomNavigationBar, then give the resizeToAvoidBottomInset the bool true.

Upvotes: 0

Mohmmaed-Amleh
Mohmmaed-Amleh

Reputation: 438

For smother scrolling use this :

 GlobalKey globalKey = GlobalKey();
    
    ...
    
    
    TextField(
      onTap: ()async{
        await Future.delayed(const Duration(milliseconds: 500));
        Scrollable.ensureVisible(globalKey.currentContext!, duration: const Duration(milliseconds: 500));
      },
    ), 
    RaisedButton(
      key: globalKey,
      onPressed: (){},
    ),

Upvotes: 0

Develocode 777
Develocode 777

Reputation: 1305

Try with this code:

GlobalKey globalKey = GlobalKey();

...


TextField(
  onTap: ()async{
    await Future.delayed(Duration(milliseconds: 500));
    RenderObject object = globalKey.currentContext.findRenderObject();
    object.showOnScreen();
  },
), 
RaisedButton(
  key: globalKey,
  onPressed: (){},
),

Upvotes: 7

Related Questions