Flutter Login/Sign-up Screen - Example
Flutter Login/Sign-up Screen - Example
In this tutorial, we will learn how to build a Login screen using Flutter widgets.
The login screen we are going to build here is simple in its visual aspects. First there is a widget for the
company/organization/app name. Then about the screen itself, Sign in. Now, we have two text fields, user name
and password, to get login/sign-in credentials from user. Then we have a FlatButton for the Forgot Password.
After that, there is the Login button. If the user does not have an account, there should be a provision for the
Sign-up process, hence a Sign-up FlatButton.
Following is the contents of main.dart file. If you create a basic Flutter application and replace the contents of
main.dart with the following file, you should see UI as shown in the screenshot attached after this code.
main.dart
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: MyApp(),
));
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Sample App'),
),
body: Padding(
padding: EdgeInsets.all(10),
child: ListView(
children: <Widget>[
Container(
alignment: Alignment.center,
padding: EdgeInsets.all(10),
child: Text(
child: Text(
'TutorialKart',
style: TextStyle(
color: Colors.blue,
fontWeight: FontWeight.w500,
fontSize: 30),
)),
Container(
alignment: Alignment.center,
padding: EdgeInsets.all(10),
child: Text(
'Sign in',
style: TextStyle(fontSize: 20),
)),
Container(
padding: EdgeInsets.all(10),
child: TextField(
controller: nameController,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'User Name',
),
),
),
Container(
padding: EdgeInsets.fromLTRB(10, 10, 10, 0),
child: TextField(
obscureText: true,
controller: passwordController,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Password',
),
),
),
FlatButton(
onPressed: (){
//forgot password screen
},
textColor: Colors.blue,
child: Text('Forgot Password'),
),
Container(
height: 50,
padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
child: RaisedButton(
textColor: Colors.white,
color: Colors.blue,
child: Text('Login'),
onPressed: () {
print(nameController.text);
print(passwordController.text);
},
)),
Container(
child: Row(
children: <Widget>[
Text('Does not have account?'),
FlatButton(
textColor: Colors.blue,
child: Text(
'Sign in',
style: TextStyle(fontSize: 20),
style: TextStyle(fontSize: 20),
),
onPressed: () {
//signup screen
},
)
],
mainAxisAlignment: MainAxisAlignment.center,
))
],
)));
}
}
Conclusion
This is a very simple Flutter Application, demonstrating the Login or Sign in screen. Most of the widgets used
like Text and FlatButton are surrounded in Container widgets. You may change the colors, padding, margin or
backgrounds, to suit the theme of your application.
Flutter Tutorial
✦ Flutter Tutorial
Flutter Widgets
✦ Flutter Text
✦ Flutter TextField
✦ Flutter FlatButton
✦ Flutter RaisedButton
✦ Flutter SnackBar
✦ Flutter Switch
✦ Flutter ToggleButtons
✦ Flutter Table
✦ Flutter DataTable
✦ Flutter Tooltip
Flutter Animation
Flutter Packages
Flutter Examples