Flutter: lee y escribe datos en Firebase

Firebase ayuda a los desarrolladores a administrar su aplicación móvil fácilmente. Es un servicio proporcionado por Google. Firebase tiene varias funcionalidades disponibles para ayudar a los desarrolladores a administrar y hacer crecer sus aplicaciones móviles. En este artículo, aprenderemos cómo escribir y leer datos en/desde firebase. Usaremos flutter para esto. Para hacer este trabajo necesitamos seguir el procedimiento de 3 pasos:

1. Agregar base de fuego a nuestra aplicación
2. Configuración de base de fuego 
3. Implementar usando código

Agregar base de fuego a nuestra aplicación

Para interactuar con Firebase, debemos registrar nuestra aplicación en Firebase. Siga este enlace para completar la configuración inicial.

Configuración de base de fuego

Después de completar la configuración anterior, siga estos pasos:

Paso 1: después de crear su proyecto en el lado izquierdo, verá estas opciones

Paso 2: seleccione la nube Firestore y luego seleccione   crear base de datos y luego seleccione el modo de prueba y presione siguiente.

Paso 3: seleccione cualquier ubicación o puede mantenerla como está y presione habilitar

Después de crear Cloud Firestore, verá la base de datos vacía, ahora solo tiene que crear una tabla y agregarle datos más tarde, agregaremos datos desde nuestra aplicación. Siga los pasos a continuación para crear una colección (tablas).

Paso 1: Presiona Iniciar colección

Paso 2: ingrese un nombre para la identificación de la colección y seleccione la identificación automática para su documento

Paso 3: Presione Agregar campo y agregue Campo y Valor como par clave-valor

Paso 4: Finalmente, así es como se verá tu pantalla final

Implementación

Paso 1: en tu proyecto flutter, abre pubspec.yaml y, en dependencias, agrega los siguientes paquetes:

dependencies:
 flutter:
   sdk: flutter
 firebase_core: "^0.5.0"
 cloud_firestore: ^0.14.1

Guarde el archivo anterior.

Nota: Al agregar el código anterior, asegúrese de que el código agregado esté en el mismo nivel que flutter.

Paso 2: En la terminal ejecuta la siguiente línea.

flutter pub get

Antes de ejecutar las líneas de código anteriores, compruebe si está en el directorio correcto o no. El código anterior obtiene todos los paquetes. Si ocurre algún error, verifique su espacio mientras agrega paquetes y también verifique que haya agregado la versión correcta de esos paquetes.

Paso 3: escribir datos

import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_core/firebase_core.dart';
  
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}
  
class MyApp extends StatelessWidget {
  // This widget is the root 
  // of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Firebase',
      home: AddData(),
    );
  }
}
  
class AddData extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green,
        title: Text("geeksforgeeks"),
      ),
      body:Center(
        child: FloatingActionButton(
          backgroundColor: Colors.green,
          child: Icon(Icons.add),
          onPressed: () {
            FirebaseFirestore.instance
                .collection('data')
                .add({'text': 'data added through app'});
          },
        ),
      ),
    );
  }
}

Producción :

Explicación: en el código anterior, hemos creado un botón de acción flotante en el centro de la pantalla. Cuando presionamos ese botón, el par clave-valor que definimos se envía a firebase y se almacena en él. Los datos se almacenarán repetidamente si se presiona el botón varias veces. 

Paso 4: Leer datos

import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_core/firebase_core.dart';
  
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Firebase',
      home: AddData(),
    );
  }
}
  
class AddData extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green,
        title: Text("geeksforgeeks"),
      ),
      body: StreamBuilder(
        stream: FirebaseFirestore.instance.collection('data').snapshots(),
        builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
          if (!snapshot.hasData) {
            return Center(
              child: CircularProgressIndicator(),
            );
          }
  
          return ListView(
            children: snapshot.data.docs.map((document) {
              return Container(
                child: Center(child: Text(document['text'])),
              );
            }).toList(),
          );
        },
      ),
    );
  }
}

Producción:

Explicación: en el código anterior, obtenemos datos de firebase y los almacenamos como una instantánea de nuestros datos. Para imprimir esos datos en la pantalla, construimos una vista de lista que muestra los datos como texto.