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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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() {} | |
} |
Top comments (1)
It is not the ScrollView that does the work, it is the Scaffold. 🤓