I'm trying to learn Flutter. I took an Udemy course and now I'm trying to follow along on a Youtube Tutorial Chat App.
In the section, I've created a sign in screen. The sign in screen is all pushed up to the top of the body: (At this point the keyboard works as its suppose to) To correct the top alignment, the instructor has us wrap the top container (in the body:) in another container and add alignment: Alignment.bottomCenter,. This moves the Textfield() and buttons to the bottom on the screen. But, I no longer get the keyboard in the emulator when clicking the "email" or "password" fields. The instructor shows he has a keyboard error at this point (although his keyboard shows up on his emulator and mine does not) To correct this error, he wraps the new container in a SingleChildScrollView(). and adds the line height: MediaQuery.of(context).size.height - 50, to the container just inside SingleChildScrollView(. At this point his screen in aligned properly and his keyboard works as it should. While my screen is aligned correctly, the keyboard still doesn't work.
any suggestions?
import 'package:flutter/material.dart';
import 'package:flutter_docktalk/widgets/widgets.dart';
class SignIn extends StatefulWidget {
@override
_SignInState createState() => _SignInState();
}
class _SignInState extends State<SignIn> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: mainAppBar(context),
body: SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height - 50,
alignment: Alignment.bottomCenter,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 24),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
TextField(
style: simpleTextStyle(),
decoration: textFieldInputDecoration('Email'),
),
TextField(
style: simpleTextStyle(),
decoration: textFieldInputDecoration('Password'),
),
const SizedBox(
height: 8,
),
Container(
alignment: Alignment.centerRight,
child: Container(
padding:
const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: Text(
'Forgot Password?',
style: simpleTextStyle(),
),
),
),
const SizedBox(
height: 8,
),
Container(
alignment: Alignment.center,
width: MediaQuery.of(context).size.width,
padding: const EdgeInsets.symmetric(vertical: 20.0),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(30)),
child: const Text(
'Sign In',
style: TextStyle(color: Colors.white, fontSize: 18),
),
),
const SizedBox(
height: 16,
),
Container(
alignment: Alignment.center,
width: MediaQuery.of(context).size.width,
padding: const EdgeInsets.symmetric(vertical: 20.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(30)),
child: const Text(
'Sign In With Google',
style: TextStyle(color: Colors.black87, fontSize: 18),
),
),
const SizedBox(
height: 16,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Text(
"Don't have an account? ",
style: TextStyle(
color: Colors.white,
fontSize: 16,
),
),
Text(
"Register Now",
style: TextStyle(
color: Colors.white,
fontSize: 17,
decoration: TextDecoration.underline,
),
)
],
),
const SizedBox(
height: 45,
),
],
),
),
),
),
);
}
}