DEV Community

Nasir Ahmed Momin
Nasir Ahmed Momin

Posted on

1

Flutter: Scroll Content on Keypad appears

In the beginning for my Flutter journey, I struggled with scrolling the UI when Keypad appears on screen. Later I found out that it is pretty simple enough, I just have to use one single widget.

SingleChildScrollView()

Below is entire gist code

import 'package:flutter/material.dart';
class Login extends StatefulWidget {
@override
_LoginState createState() => _LoginState();
}
class _LoginState extends State<Login> {
TextEditingController username = TextEditingController();
TextEditingController password = TextEditingController();
@override
void initState() {
super.initState();
}
@override
void dispose() {
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Center(
child: SingleChildScrollView(
child: Padding(
padding: EdgeInsets.only(left: 30, right: 30),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Image.asset(
"assests/images/main_icon.png",
width: 180,
// height: 0,
),
TextField(
controller: username,
decoration: InputDecoration(hintText: "Enter Username"),
),
TextField(
controller: password,
obscureText: true,
decoration: InputDecoration(hintText: "Enter password"),
),
Container(
padding: EdgeInsets.only(top: 5),
width: MediaQuery.of(context).size.width * 0.80,
child: RaisedButton(
onPressed: () => loginTapped(),
child: Text("Login"),
color: Colors.blue))
],
),
),
),
),
);
}
void loginTapped() {}
}

Alt Text

Top comments (1)

Collapse
 
bobmoff profile image
Fille

It is not the ScrollView that does the work, it is the Scaffold. 🤓

Retry later