How to save data in Firebase using a Flutter application

[shivankawasthi]

With the advancement in computing and the dawn of new technologies for creating mobile applications, application data has been increasing. The performance of any application is significantly impacted by how quickly data can be stored, retrieved, and processed.

With the Flutter framework, user interfaces for mobile applications have been redefined completely.

In this article, we'll discuss how to save data in Firebase using a Flutter application. We'll use the Firebase Database plugin to store data in the Firebase Database.

If you have any questions, please leave a comment below!

Integrating Firebase with Flutter

To get started, we need to add the Firebase Database plugin to our Flutter project. This can be done by adding the following line to the pubspec.yaml file:

dependencies:
  firebase_database: ^1.18.0

Once the plugin is installed, we need to create a new Firebase Database object. This can be done by adding the following code to the main.dart file:

import 'package:firebase_database/firebase_database.dart';

void main() => runApp(MyApp());


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
        ),
        body: Center(
          child: FirebaseDatabase(
            databaseURL: 'https://flutter-demo.firebaseio.com',
          ),
        ),
      ),
    );
  }
}

This code will create a new FirebaseDatabase object and set the databaseURL property.
Now, we need to add a button to our app that will save data to the Firebase Database. This can be done by adding the following code to the main.dart file:
import 'package:flutter/material.dart';
import 'package:firebase_database/firebase_database.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
        ),
        body: Center(
          child: Button(
            onPressed: () async {
              await FirebaseDatabase.instance
                  .ref('https://flutter-demo.firebaseio.com/data')
                  .set(Map());
            },
            child: Text('Save Data'),
          ),
        ),
      ),
    );
  }
}

This code will create a new Button object and set the onPressed callback. This callback will save data to the Firebase Database using the FirebaseDatabase.instance.ref('https://flutter-demo.firebaseio.com/data').set(Map()) method.

Finally, we need to add a text field to our app that will allow us to enter the data we want to save. This can be done by adding the following code to the main.dart file:

import 'package:flutter/material.dart';
import 'package:firebase_database/firebase_database.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
        ),
        body: Center(
          child: TextField(
            controller: TextEditingController(),
            label: Text('Enter Data'),
          ),
        ),
      ),
    );
  }
}

This code will add a text field to our app. The TextField widget will allow us to enter data into the text field.

That's it! We have successfully saved data in Firebase using a Flutter application.

---

Authored by:

• Shivank Awasthi (@shivankawasthi) Strategic Cloud Engineer, Google
• Utkarsh Bhardwaj (@bhardwaju) Cloud Migration Consultant, Google

Video by:

• Amit Dutta (@amitdutta) Strategic Cloud Engineer, Google