Flutter: Scroll Content on Keypad appears

#flutter #textfield #scrolling #keypad

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() {}
	}