Skip to content
Database
Databases are used extremely often in app and they are used to store data. For example usernames and passwords. Or things like posts, or articles that users write on your app.
Today we will be covering four topics: I will be showing you how to make TextFormFields, what voids are, what maps are, and how to build a basic database that works using flutter.
First start out by importing material.dart and creating a class called Login with an app bar that says “Login”:
import 'package:flutter/material.dart';
class Login extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Login"))
);
}
}
Then add two Strings to store the username and password:
import 'package:flutter/material.dart';
class Login extends StatelessWidget {
String username;
String password;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Login"))
);
}
}
The reason why I didn’t put anything in the variables is because we are going to put in the username and password later.
After that we need to add something that will help validate the username and password you enter in.
import 'package:flutter/material.dart';
class Login extends StatelessWidget {
String username;
String password;
final GlobalKey<FormState> formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Login"))
);
}
}
The data will be stored in a Map. So now we need to create a map with the username and password we want to use.
import 'package:flutter/material.dart';
class Login extends StatelessWidget {
String username;
String password;
final GlobalKey<FormState> formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
Map<String, String> database = {"sumay": "Password12345"};
return Scaffold(
appBar: AppBar(title: Text("Login"))
);
}
}
Now, this is the complicated part. We need to write out the code that makes sure you put in the right username and password. So we are going to make a void.
import 'package:flutter/material.dart';
class Login extends StatelessWidget {
String username;
String password;
final GlobalKey<FormState> formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
Map<String, String> database = {"sumay": "Password12345"};
void login() {
final formState = formKey.currentState;
// If the form is validated and nothing is wrong with it
if (formState.validate()) {
formState.save();
if (database.containsKey(username)) {
if (database[username] == password) {
formKey.currentState.reset();
Navigator.push(context, MaterialPageRoute(builder: (context) => Home()));
}
else {
formKey.currentState.reset();
}
}
else {
formKey.currentState.reset();
}
}
else {
formKey.currentState.reset();
}
}
return Scaffold(
appBar: AppBar(title: Text("Login"))
);
}
}
Now we have everything we need to start building the UI of our Login page! What we are going to build is a ListView that has an image, two TextFormFields and one button you click when you are done filling out your username and password inside a Form widget. First let’s add the image. Assuming you have everything settled with making the images folder and setting things up in Pubspec.yaml, add this code:
import 'package:flutter/material.dart';
class Login extends StatelessWidget {
String username;
String password;
final GlobalKey<FormState> formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
Map<String, String> database = {"sumay": "Password12345"};
void login() {
final formState = formKey.currentState;
// If the form is validated and nothing is wrong with it
if (formState.validate()) {
formState.save();
if (database.containsKey(username)) {
if (database[username] == password) {
formKey.currentState.reset();
Navigator.push(context, MaterialPageRoute(builder: (context) => Home()));
}
else {
formKey.currentState.reset();
}
}
else {
formKey.currentState.reset();
}
}
else {
formKey.currentState.reset();
}
}
return Scaffold(
appBar: AppBar(title: Text("Login")),
body: ListView(
children: [
SizedBox(
height: 25,
),
// LOGO
Center(
child: Container(
child: Image.asset("images/logo.png"),
),
),
]
),
);
}
}
Next let’s make a Form widget and our first TextFormField where we’ll put our username and it will save to username to validate:
import 'package:flutter/material.dart';
class Login extends StatelessWidget {
String username;
String password;
final GlobalKey<FormState> formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
Map<String, String> database = {"sumay": "Password12345"};
void login() {
final formState = formKey.currentState;
// If the form is validated and nothing is wrong with it
if (formState.validate()) {
formState.save();
if (database.containsKey(username)) {
if (database[username] == password) {
formKey.currentState.reset();
Navigator.push(context, MaterialPageRoute(builder: (context) => Home()));
}
else {
formKey.currentState.reset();
}
}
else {
formKey.currentState.reset();
}
}
else {
formKey.currentState.reset();
}
}
return Scaffold(
appBar: AppBar(title: Text("Login")),
body: ListView(
children: [
SizedBox(
height: 25,
),
// LOGO
Center(
child: Container(
child: Image.asset("images/logo.png"),
),
),
Form(
key: formKey, // This is the key used to validate the forms input
child: Column(
children: <Widget>[
// USERNAME //
TextFormField(
// This is to define the border and to label the text
decoration: InputDecoration(
labelText: "Username",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0)
)
),
// Checks the user input to see if it is valid
validator: (input) {
if (input.isEmpty) {
return "Please enter a username";
}
return null;
},
// If the validator passed, then save the information
onSaved: (input) => username = input,
),
]
),
);
}
}
Now let’s make a SizedBox for formatting and another TextFormField for the password. We are also going to be adding this: obscureText: true, so people can’t see what’s being typed in the TextFormField.
import 'package:flutter/material.dart';
class Login extends StatelessWidget {
String username;
String password;
final GlobalKey<FormState> formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
Map<String, String> database = {"sumay": "Password12345"};
void login() {
final formState = formKey.currentState;
// If the form is validated and nothing is wrong with it
if (formState.validate()) {
formState.save();
if (database.containsKey(username)) {
if (database[username] == password) {
formKey.currentState.reset();
Navigator.push(context, MaterialPageRoute(builder: (context) => Home()));
}
else {
formKey.currentState.reset();
}
}
else {
formKey.currentState.reset();
}
}
else {
formKey.currentState.reset();
}
}
return Scaffold(
appBar: AppBar(title: Text("Login")),
body: ListView(
children: [
SizedBox(
height: 25,
),
// LOGO
Center(
child: Container(
child: Image.asset("images/logo.png"),
),
),
Form(
key: formKey, // This is the key used to validate the forms input
child: Column(
children: <Widget>[
// USERNAME //
TextFormField(
// This is to define the border and to label the text
decoration: InputDecoration(
labelText: "Username",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0)
)
),
// Checks the user input to see if it is valid
validator: (input) {
if (input.isEmpty) {
return "Please enter a username";
}
return null;
},
// If the validator passed, then save the information
onSaved: (input) => username = input,
),
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ··· in the right corner or using a keyboard shortcut (
CtrlP
) instead.