Operações CRUD do Firebase Realtime Database para o projeto Flutter
Neste post, você aprenderá sobre a operação crud do banco de dados em tempo real do Firebase para o projeto flutter.
O banco de dados em tempo real do Firebase é NoSQL, o que significa que não temos as colunas e linhas tradicionais.
No banco de dados em tempo real do Firebase, podemos armazenar dados na estrutura de árvore JSON, como abaixo.
Neste post vamos criar um aplicativo no qual realizaremos a operação CRUD do banco de dados em tempo real do Firebase (Criar, Ler, Atualizar e Excluir).
Conteudo
Operações CRUD do Firebase Realtime Database no Flutter
Primeiro de tudo, crie um novo projeto flutter e conecte-o ao firebase para usar banco de dados em tempo real do Firebase em seu projeto.
Depois disso, abra seu arquivo pubspec.yaml e adicione as dependências abaixo.
dependencies: flutter: sdk: flutter # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. cupertino_icons: ^1.0.2 firebase_database: ^9.1.0 firebase_core: ^1.20.0
firebase_database (versão 9.1.0 ou superior)
firebase_core (versão 1.2.0 ou superior)
Agora crie um diretório dentro de lib e nomeie-o como telas, depois crie 3 arquivos dart no diretório de telas.
fetch_data.dart
insert_data.dart
update_record.dart
Agora comece a codificar o aplicativo.
main.dart
import 'package:firebase_core/firebase_core.dart'; import 'package:flutter/material.dart'; import 'package:operacaocrudfirebase/ui/fetch_data.dart'; import 'package:operacaocrudfirebase/ui/insert_data.dart'; void main() async { WidgetsFlutterBinding.ensureInitialized(); Firebase.initializeApp(); runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', debugShowCheckedModeBanner: false, theme: ThemeData( primarySwatch: Colors.blue, ), home: const MyHomePage(), ); } } class MyHomePage extends StatefulWidget { const MyHomePage({Key? key}) : super(key: key); @override State<MyHomePage> createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Flutter Firebase'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ const Image( width: 300, height: 300, image: NetworkImage( 'https://seeklogo.com/images/F/firebase-logo-402F407EE0-seeklogo.com.png'), ), const SizedBox( height: 30, ), const Text( 'Firebase Realtime Database Series in Flutter 2022', style: TextStyle( fontSize: 24, fontWeight: FontWeight.w500, ), textAlign: TextAlign.center, ), const SizedBox( height: 30, ), MaterialButton( onPressed: () { Navigator.push( context, MaterialPageRoute( builder: (context) => const InsertData())); }, child: const Text('Insert Data'), color: Colors.blue, textColor: Colors.white, minWidth: 300, height: 40, ), const SizedBox( height: 30, ), MaterialButton( onPressed: () { Navigator.push(context, MaterialPageRoute(builder: (context) => const FetchData())); }, child: const Text('Fetch Data'), color: Colors.blue, textColor: Colors.white, minWidth: 300, height: 40, ), ], ), ), ); } }
insert_data.dart
import 'package:firebase_database/firebase_database.dart'; import 'package:flutter/material.dart'; class InsertData extends StatefulWidget { const InsertData({Key? key}) : super(key: key); @override State<InsertData> createState() => _InsertDataState(); } class _InsertDataState extends State<InsertData> { final userNameController = TextEditingController(); final userAgeController= TextEditingController(); final userSalaryController =TextEditingController(); late DatabaseReference dbRef; @override void initState() { super.initState(); dbRef = FirebaseDatabase.instance.ref().child('Students'); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Inserting data'), ), body: Center( child: Padding( padding: EdgeInsets.all(8.0), child: Column( children: [ const SizedBox( height: 50, ), const Text( 'Inserting data in Firebase Realtime Database', style: TextStyle( fontSize: 24, fontWeight: FontWeight.w500, ), textAlign: TextAlign.center, ), const SizedBox( height: 30, ), TextField( controller: userNameController, keyboardType: TextInputType.text, decoration: const InputDecoration( border: OutlineInputBorder(), labelText: 'Name', hintText: 'Enter Your Name', ), ), const SizedBox( height: 30, ), TextField( controller: userAgeController, keyboardType: TextInputType.number, decoration: const InputDecoration( border: OutlineInputBorder(), labelText: 'Age', hintText: 'Enter Your Age', ), ), const SizedBox( height: 30, ), TextField( controller: userSalaryController, keyboardType: TextInputType.phone, decoration: const InputDecoration( border: OutlineInputBorder(), labelText: 'Salary', hintText: 'Enter Your Salary', ), ), const SizedBox( height: 30, ), MaterialButton( onPressed: () { Map<String, String> students = { 'name': userNameController.text, 'age': userAgeController.text, 'salary': userSalaryController.text }; dbRef.push().set(students); }, child: const Text('Insert Data'), color: Colors.blue, textColor: Colors.white, minWidth: 300, height: 40, ), ], ), ), ), ); } }
fetch_data.dart
import 'package:firebase_database/firebase_database.dart';
import 'package:firebase_database/ui/firebase_animated_list.dart';
import 'package:flutter/material.dart';
import 'package:operacaocrudfirebase/ui/update_record.dart';
class FetchData extends StatefulWidget {
const FetchData({Key? key}) : super(key: key);
@override
State<FetchData> createState() => _FetchDataState();
}
class _FetchDataState extends State<FetchData> {
Query dbRef = FirebaseDatabase.instance.ref().child('Students');
DatabaseReference reference = FirebaseDatabase.instance.ref().child('Students');
Widget listItem({required Map student}) {
return Container(
margin: const EdgeInsets.all(10),
padding: const EdgeInsets.all(10),
height: 110,
color: Colors.amberAccent,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
student['name'],
style: TextStyle(fontSize: 16, fontWeight: FontWeight.w400),
),
const SizedBox(
height: 5,
),
Text(
student['age'],
style: TextStyle(fontSize: 16, fontWeight: FontWeight.w400),
),
const SizedBox(
height: 5,
),
Text(
student['salary'],
style: TextStyle(fontSize: 16, fontWeight: FontWeight.w400),
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
GestureDetector(
onTap: () {
Navigator.push(context, MaterialPageRoute(builder: (_) => UpdateRecord(studentKey: student['key'])));
},
child: Row(
children: [
Icon(
Icons.edit,
color: Theme.of(context).primaryColor,
),
],
),
),
const SizedBox(
width: 6,
),
GestureDetector(
onTap: () {
reference.child(student['key']).remove();
},
child: Row(
children: [
Icon(
Icons.delete,
color: Colors.red[700],
),
],
),
),
],
)
],
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Fetching data'),
),
body: Container(
height: double.infinity,
child: FirebaseAnimatedList(
query: dbRef,
itemBuilder: (BuildContext context, DataSnapshot snapshot, Animation<double> animation, int index) {
Map student = snapshot.value as Map;
student['key'] = snapshot.key;
return listItem(student: student);
},
),
)
);
}
}
update_record.dart
import 'package:firebase_database/firebase_database.dart'; import 'package:flutter/material.dart'; class UpdateRecord extends StatefulWidget { const UpdateRecord({Key? key, required this.studentKey}) : super(key: key); final String studentKey; @override State<UpdateRecord> createState() => _UpdateRecordState(); } class _UpdateRecordState extends State<UpdateRecord> { final userNameController = TextEditingController(); final userAgeController= TextEditingController(); final userSalaryController =TextEditingController(); late DatabaseReference dbRef; @override void initState() { super.initState(); dbRef = FirebaseDatabase.instance.ref().child('Students'); getStudentData(); } void getStudentData() async { DataSnapshot snapshot = await dbRef.child(widget.studentKey).get(); Map student = snapshot.value as Map; userNameController.text = student['name']; userAgeController.text = student['age']; userSalaryController.text = student['salary']; } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Updating record'), ), body: Center( child: Padding( padding: EdgeInsets.all(8.0), child: Column( children: [ const SizedBox( height: 50, ), const Text( 'Updating data in Firebase Realtime Database', style: TextStyle( fontSize: 24, fontWeight: FontWeight.w500, ), textAlign: TextAlign.center, ), const SizedBox( height: 30, ), TextField( controller: userNameController, keyboardType: TextInputType.text, decoration: const InputDecoration( border: OutlineInputBorder(), labelText: 'Name', hintText: 'Enter Your Name', ), ), const SizedBox( height: 30, ), TextField( controller: userAgeController, keyboardType: TextInputType.number, decoration: const InputDecoration( border: OutlineInputBorder(), labelText: 'Age', hintText: 'Enter Your Age', ), ), const SizedBox( height: 30, ), TextField( controller: userSalaryController, keyboardType: TextInputType.phone, decoration: const InputDecoration( border: OutlineInputBorder(), labelText: 'Salary', hintText: 'Enter Your Salary', ), ), const SizedBox( height: 30, ), MaterialButton( onPressed: () { Map<String, String> students = { 'name': userNameController.text, 'age': userAgeController.text, 'salary': userSalaryController.text }; dbRef.child(widget.studentKey).update(students) .then((value) => { Navigator.pop(context) }); }, child: const Text('Update Data'), color: Colors.blue, textColor: Colors.white, minWidth: 300, height: 40, ), ], ), ), ), ); } }
Então pessoal neste momento nosso tutorial está concluído e nas etapas acima nós executou as operações CRUD do Firebase Realtime Database.
Boa codificação…