In this guide, I am going to walk through setting up a basic login screen that will authenticate with Firebase.
To get started, set up a widget for the LoginScreen. This widget will be stateful and consist of fields to input an email and a password, and also a submit button.
lib/login_screen.dart
import 'package:flutter/material.dart';
class LoginScreen extends StatefulWidget {
@override
LoginScreenState createState() => LoginScreenState();
}
class LoginScreenState extends State<LoginScreen> {
Widget emailField() {
return TextField(...);
}
Widget passwordField() {
return TextField(...);
}
Widget submitButton() {
return TextField(...);
}
@override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.all(20.0),
child: Form(
child: Column(
children: <Widget>[
emailField(),
passwordField(),
submitButton(),
],
), // Column
), // Form
); // Container
}
}
Let's start working on the emailField and passwordField methods to get something to display out on the screen.
Widget emailField() {
return TextFormField(
decoration: InputDecoration(
labelText: 'Email',
hintText: 'john.doe@gmail.com',
),
keyboardType: TextInputType.emailAddress,
);
}
Widget passwordField() {
return TextFormField(
obscureText: true,
decoration: InputDecoration(
labelText: 'Password',
hintText: '8-12 characters long',
),
);
}
Our app should now look like this.
Next, we are going to create the submitButton widget, and give it some custom styling to make it look somewhat nice.
Widget submitButton() {
final accentColor = HSLColor.fromColor(Theme.of(context).accentColor);
// This will darken the Theme's accentColor by a factor of '0.5' percent
final darkAccentColor = accentColor.withLightness((accentColor.lightness - 0.5).clamp(0.0, 1.0)).toColor();
return RaisedButton(
onPressed: () => {},
textColor: darkAccentColor,
padding: const EdgeInsets.all(0.0),
child: Row(
children: <Widget>[
Expanded(
child: Container(
decoration: BoxDecoration(
color: Theme.of(context).accentColor,
), // BoxDecoration
padding: const EdgeInsets.all(10.0),
child: Center(
child: Text(
'Submit',
style: TextStyle(fontSize: 18)
), // Text
), // Center
), // Container
), // Expanded
],
), // Row
); // RaisedButton
}
Now the app should look like this.
To be continued...
Top comments (0)