Flutter: base de datos en tiempo real en Firebase

Firebase ayuda a los desarrolladores a crear y ejecutar sus aplicaciones con éxito, su backend desarrollado por Google. Firebase es muy fácil de usar para principiantes, proporciona muchas funcionalidades como Firebase Authentication, Cloud Firestore, Realtime Database, Firebase Storage, etc., que ayudan a construir y optimizar la aplicación. En este artículo, aprenderemos cómo usar Firebase Realtime Database para leer y escribir datos en Flutter. Este proceso incluye tres pasos:

1. Configuración de base de fuego
2. Agregar base de datos en tiempo real a la aplicación
3. Implementación para leer y escribir.

Configuración de base de fuego:

Paso 1 : abra Firebase-Google en nuestro navegador, luego haga clic en ‘Ir a la consola’ en la esquina superior derecha de la página (asegúrese de que debemos iniciar sesión a través de nuestra cuenta de Google en firebase) y luego haga clic en ‘Agregar proyecto’.

Paso 2: Dale un nombre a nuestro proyecto y haz clic en ‘Continuar’.

Paso 3: después de crear con éxito el proyecto, aparecerá esta pantalla y habrá muchas opciones en el lado izquierdo de la página proporcionada por firebase y luego seleccione la opción Base de datos en tiempo real entre estas.

Paso 4: presione el botón ‘Crear base de datos’ y luego seleccione cualquier ubicación o manténgala como está y luego haga clic en ‘siguiente’ y seleccione la opción de modo de prueba que da acceso para leer y escribir datos en la base de datos y presione ‘habilitar’ .

Después de eso, la configuración de Firebase Realtime Database se realiza correctamente.

Agregue la base de datos en tiempo real a la aplicación:

Copie la URL de la base de datos de Firebase Realtime Database en el cuadro verde que se muestra a continuación y reemplace la URL con DatabaseURL en las funciones writeData() y readData() en Add Data y Read Data code:

Implementación:

Paso 1: Agregue el paquete HTTP en pubspec.yaml bajo las dependencias en el proyecto flutter:

dependencies:
  flutter:
     sdk: flutter
  http: ^0.13.3  

Guarde el archivo anterior.

Nota: asegúrese de que al agregar el código anterior, debe tener el mismo nivel que flutter.

Después de guardar el archivo, si ocurre algún error, verifique el espaciado del código con flutter y también verifique que haya agregado la versión correcta del paquete HTTP.

Paso 2: Agregar datos.

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
  
void main() {
  runApp(MyApp());
}
  
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}
  
class _MyAppState extends State<MyApp> {
  final _form = GlobalKey<FormState>();
  String title;
  void writeData() async {
    _form.currentState.save();
      
    // Please replace the Database URL
    // which we will get in “Add Realtime
    // Database” step with DatabaseURL
    var url = "DatabaseURL"+"data.json";
      
    // (Do not remove “data.json”,keep it as it is)
    try {
      final response = await http.post(
        Uri.parse(url),
        body: json.encode({"title": title}),
      );
    } catch (error) {
      throw error;
    }
  }
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'RealTime Database',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("GeeksforGeeks"),
        ),
        body: Form(
          key: _form,
          child: Center(
            child: Column(
              children: [
                SizedBox(
                  height: 10,
                ),
                TextFormField(
                  decoration: InputDecoration(hintText: "Enter Title"),
                  onSaved: (value) {
                    title = value;
                  },
                ),
                SizedBox(
                  height: 10,
                ),
                RaisedButton(
                    onPressed: writeData,
                    color: Colors.green,
                    child: Text(
                      "Submit",
                      style: TextStyle(color: Colors.white),
                      textAlign: TextAlign.center,
                    )),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Nota: reemplace la URL de la base de datos que obtendremos en el paso «Agregar base de datos en tiempo real a la aplicación» con DatabaseURL en la función writeData().

Producción:

Base de datos en tiempo real:

Explicación: en el código anterior, hemos creado un campo de formulario de texto y un botón de envío. TextformField para obtener datos de título del usuario y botón de envío para llamar a una función que escribe datos en Firebase, es decir, un par clave-valor de «título»: la entrada del usuario se envía a una base de datos en tiempo real. Si se presiona el botón varias veces, los datos se almacenan repetidamente.

Paso 3: Leer datos.

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
  
void main() {
  runApp(MyApp());
}
  
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}
  
class _MyAppState extends State<MyApp> {
  void initState() {
    super.initState();
    readData();
  }
  
  bool isLoading = true;
  List<String> list = [];
  Future<void> readData() async {
      
    // Please replace the Database URL
    // which we will get in “Add Realtime Database” 
    // step with DatabaseURL
      
    var url = "DatabaseURL"+"data.json";
    // Do not remove “data.json”,keep it as it is
    try {
      final response = await http.get(Uri.parse(url));
      final extractedData = json.decode(response.body) as Map<String, dynamic>;
      if (extractedData == null) {
        return;
      }
      extractedData.forEach((blogId, blogData) {
        list.add(blogData["title"]);
      });
      setState(() {
        isLoading = false;
      });
    } catch (error) {
      throw error;
    }
  }
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'RealTime Database',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: Scaffold(
          appBar: AppBar(
            title: Text("GeeksforGeeks"),
          ),
          body: isLoading
              ? CircularProgressIndicator()
              : ListView.builder(
                  padding: const EdgeInsets.all(8),
                  itemCount: list.length,
                  itemBuilder: (BuildContext context, int index) {
                    return Container(
                        height: 50,
                        child: Center(
                          child: Text(
                            list[index],
                            style: TextStyle(color: Colors.green),
                          ),
                        ));
                  })),
    );
  }
}

Nota: Reemplace la URL de la base de datos que obtendremos en el paso «Agregar base de datos en tiempo real a la aplicación» con DatabaseURL en la función readData().

Producción:

Base de datos en tiempo real:

Explicación: en el código anterior, creamos CircularProgressIndicator que rotará hasta que obtengamos datos de la base de datos de firebase y cuando obtengamos datos, mostrará la lista de datos en los que estamos en firebase en el widget del generador de vista de lista con datos de texto de color verde.