Flutter – Store User Details Using Firebase

Firebase is a product of Google that helps developers to build, manage, and grow their apps easily. It helps developers to build their apps faster and in a more secure way. No programming is required on the Firebase side which makes it easy to use its features more efficiently. It provides services to Android, ios, web, and Unity. It provides cloud storage. It uses NoSQL for the database for the storage of data.

App development starts with reading and writing the data in Firebase. So for starting some people use the automatically created backend for reading the data given by the user and storing it. For storing the data on the Firebase we have to follow some steps.

Implementation

Initialize the project with all the initialization processes such as registering the project on Firebase. After that, the screen will appear like this:

Here in the build section see the Firestore database option. Here are the few steps explained through images one by one.

Click on the create database button.

Then click on the start in test mode option And then next.

Now the empty database has been created. Coming to Coding Part how to attach and save our data in the database.

Dart

import 'dart:io';
import 'package:image_picker/image_picker.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_database/firebase_database.dart';
import 'package:flutter/material.dart';

class RealtimeDatabaseInsert extends StatelessWidget {
  RealtimeDatabaseInsert({Key? key}) : super(key: key);

 var nameController = new TextEditingController();
 var ageController = new TextEditingController();
 var dlController = new TextEditingController();
 var adController = new TextEditingController();
 var phnController = new TextEditingController();

   final firestore=FirebaseFirestore.instance;
 get data => null;
 @override
 Widget build(BuildContext context) {
   return Center(
       child: Scaffold(
     body: SafeArea(
       child: SingleChildScrollView(
         child: Padding(
           padding: const EdgeInsets.all(20.0),
           child: Column(
             children: [
               Text(
                 'Insert Driver Details',
                 style: TextStyle(fontSize: 28),
               ),

               SizedBox(
                 height: 30,
               ),
               SizedBox(
                 height: 50,
               ),
               TextFormField(
                 controller: nameController,
                 maxLength: 15,
                 decoration: InputDecoration(
                     labelText: 'Name', border: OutlineInputBorder()),
               ),
               SizedBox(
                 height: 15,
               ),
               TextFormField(
                 controller: ageController,
                 keyboardType: TextInputType.number,
                 decoration: InputDecoration(
                     labelText: 'Age', border: OutlineInputBorder()),
               ),
               SizedBox(
                 height: 15,
               ),
               TextFormField(
                 controller: dlController,
                 maxLength: 20,
                 decoration: InputDecoration(
                     labelText: 'Driving Licencse Number',
                     border: OutlineInputBorder()),
               ),
               SizedBox(
                 height: 15,
               ),
               TextFormField(
                 controller: adController,
                 decoration: InputDecoration(
                     labelText: 'Address', border: OutlineInputBorder()),
               ),
               SizedBox(
                 height: 15,
               ),
               TextFormField(
                 controller: phnController,
                 maxLength: 10,
                 keyboardType: TextInputType.number,
                 decoration: InputDecoration(
                     labelText: 'Phone No.', border: OutlineInputBorder()),
               ),
               SizedBox(
                 height: 20,
               ),
               ElevatedButton(
                 onPressed: () async {
                   if (nameController.text.isNotEmpty &&
                       ageController.text.isNotEmpty &&
                       dlController.text.isNotEmpty &&
                       adController.text.isNotEmpty &&
                       phnController.text.isNotEmpty) {
                     firestore.collection("Driver Details").add({
                         "Name": nameController.text,
                         "Age": ageController.text,
                         "Driving Licence": dlController.text,
                         "Address.": adController.text,
                         "Phone No.": phnController.text
                     });
                   }
                   },
                 child: Text(
                   "Submit Details",
                 ),
                 style: ElevatedButton.styleFrom(
                     backgroundColor: Colors.amber,
                     shape: RoundedRectangleBorder(
                         borderRadius: BorderRadius.circular(10))),
               )
             ],
           ),
         ),
       ),
     ),
   ));
 }
}

Output UI:

This code creates the frontend part like the below image

Now when we write the data and press the Submit Details button it gets saved on the Firestore database like this.
It stores the details and it looks like this.

Code Explanation:

final firestore=FirebaseFirestore.instance;

The above line is used to initialize the firestore object and then this 

firestore.collection("Driver Details").add();

This line is used to attach the data to the backend.

Advantages of using Firebase for CRUD (Create, Read, Update, Delete) operations

• The automatic backend was created for the people who are getting started with Flutter.
• Takes less time for storing the data for small apps for learning,
• Firebase has less complexity as compared to creating our own backend.

These are the few steps for creating and storing the details of a person on Firebase.