Learn to Create CRUD Applications in Flutter and Firebase

Learn to Create CRUD Applications in Flutter and Firebase

Hello everyone, welcome back at porkaone. This time we will learn how to create a Flutter application and use a Firebase database to store data. Are you curious? Come on, follow the complete tutorial below.

Learn to Create Flutter and Firebase CRUD

1. Create a firebase project at https://firebase.google.com

2. Then connect the flutter project with firebase. You can follow how to connect the two via the following link https://www.porkaone.com/2023/12/tutorial-on-how-to-set-up-firebase-and.html. Or follow the tutorial via the video How to Connect Flutter and Firebase. The tutorial must be followed. Because it is related to the next stage.

3. Open firebase. Then go to the build menu --> firestore database --> click start collection to create a new collection. We can equate collections with databases in MySQL.

Sahretech Firebase

4. Click start collection -> fill in the collection ID with notes --> then click next

Sahretech Firebase Koneksi

5. Then click auto-ID to fill in the document ID value. Fill in the first field and add the next field as shown in the image below. Then click save to save the collection.

Membuat Collection di Firebase Sahretech

6. Now your collection is ready. Next, we will display this data collection in the flutter project that you have prepared.

Membuat Collection di Firebase Sahretech
Firebase Collection

7. Open your respective flutter projects. I assume, you have prepared a flutter project and are connected to firebase. But if not, please follow the tutorial again in stage 2.

8. Ok, please open the pubspec.yaml file. Then add the firebase_core: ^2.23.0 and cloud_firestore: ^4.4.5 packages as shown below. Then save the file to download the required packages.

Flutter Sahretech
Add Package

9. Open the main.dart file, then replace it with the script below.

'package:firebase_core/firebase_core.dart'; import 'package:flutter/material.dart'; import 'firebase_options.dart'; import 'home_page.dart'; void main() async { WidgetsFlutterBinding.ensureInitialized(); await Firebase.initializeApp( options: DefaultFirebaseOptions.currentPlatform, ); runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Firebase CRUD', theme: ThemeData( primarySwatch: Colors.blue, ), home: HomePage(), ); } }

10. Create a home_page.dart file in the lib folder. Then follow the script as below.

// ignore_for_file: prefer_const_constructors, use_key_in_widget_constructors
import 'package:flutter/material.dart'; import 'package:cloud_firestore/cloud_firestore.dart'; import 'package:flutter_firebase_auth/input_data_page.dart'; class HomePage extends StatelessWidget { final CollectionReference dataCollection = FirebaseFirestore.instance.collection('catatan'); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Firebase CRUD'), ), body: StreamBuilder( stream: dataCollection.snapshots(), builder: (context, snapshot) { if (!snapshot.hasData) { return CircularProgressIndicator(); } return ListView.builder( itemCount: snapshot.data!.docs.length, itemBuilder: (context, index) { var data = snapshot.data!.docs[index]; return ListTile( title: Text(data['judul']), subtitle: Text(data['deskripsi']), trailing: IconButton( icon: Icon(Icons.edit), onPressed: () { }, ), ); }, ); }, ), floatingActionButton: FloatingActionButton( onPressed: () { }, child: Icon(Icons.add), ), ); } }

11. Next, open android/app/build.gradle. Then change it to minSdkVersion 19. Then add multiDexEnabled = true and implementation 'com.android.support:multidex:1.0.1' as shown below. This is important to add to avoid errors.

Add Script

12. Ok, now you can do the test. Please run this flutter project via the emulator. If successful, the display will look like the image below.

Final Result

Post a Comment