Flutter-Fire Setup Demo Tutorial with Code

Setup Flutter Fire:

Prerequisites:

• Install Flutter in Android Studio.
• Create (Setup) Firebase database.

Database Structure: 

• NOTE: Output is attached at end of post.
• You may change it as per your need.

    

Step 1: Configure Firebase App CLI for all Platforms.

• Official Docs: https://firebase.google.com/docs/flutter/setup
• Official Youtube Tutorial: https://www.youtube.com/watch?v=FkFvQ0SaT1I

(Run the app once to check installation.)

Step 2: Add Essential Dependencies

• Get all Packages here: https://pub.dev

Step 3: Edit pubspec.yaml

• Add Dependencies.
• NOTE: Check Version, your version may defer.
• My pubspec.yaml

dependencies:
flutter:
sdk: flutter
firebase_database: ^11.0.3
http: ^1.2.2


# 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_core: ^3.2.0

Step 3: Code Documentation

• CRUD from Flutter Fire:
• https://firebase.google.com/docs/database/flutter/read-and-write

Step 4: Coding

• Here I have only fetch data from Firebase.
• You may modify my code if needed.
• Change UI as required.

// Essential Libraries..
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:my_gas_app/firebase_options.dart';
import 'package:firebase_database/firebase_database.dart';

// Initialization: https://firebase.flutter.dev/docs/overview
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
runApp(const MyApp());
}

// Set Dark Mode to our Application:
// https://stackoverflow.com/questions/60232070/

// how-to-implement-dark-mode-and-light-mode-in-flutter
class MyApp extends StatelessWidget {
const MyApp({super.key});

@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark(),
home: const MyHomePage(),
);
}
}

class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});

@override
MyHomePageData createState() => MyHomePageData();
}

// typedef in Flutter
// Doc 1 : https://stackoverflow.com/questions/12545762/

// what-are-function-typedefs-function-type-aliases-in-dart
// Doc 2 : https://www.geeksforgeeks.org/typedef-in-dart/
typedef GasDataCallback = void Function(String gasValue);

class MyHomePageData extends State<MyHomePage> {
String charusatGas = '';
String missionRoadGas = '';
final database = FirebaseDatabase.instance.ref();

@override
void initState() {
super.initState();
readData();
}

void readData() {
listenForGasValue('New_Location/Gas-Value/', (value) {
setState(() {
charusatGas = value;
});
});

listenForGasValue('Location_Nadiad_Mission_Road/Gas-Value/',

(value) {
setState(() {
missionRoadGas = value;
});
});
}

// Read Data: https://firebase.google.com/docs/database/

// flutter/read-and-write
// Instead of writing onDataChange for all Items,

// we will pass it to Function.
void listenForGasValue(String path,

GasDataCallback onDataChange) {
try {
database.child(path).onValue.listen((event) {
final gasData = event.snapshot.value;
if(gasData != null) {
onDataChange("$gasData");
debugPrint('Gas Value at $path is: $gasData');
}
else {
debugPrint("No Data Found (null value) at: $path");
}
});
} catch (e) {
debugPrint('Something went wrong in $path\nError: $e');
}
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Gas Value'),
),
body: Container(
// Change UI According to Your Preference..
padding: const EdgeInsets.all(12),
margin: const EdgeInsets.all(10),
color: Colors.black12,
child: Column(
children: [
Row(
children: [const Text('Charusat University'),

const Padding(padding: EdgeInsets.only(right: 20)),
Text(charusatGas)],
),
const SizedBox(height: 20),
Row(
children: [const Text('Mission Road'),

const Padding(padding: EdgeInsets.only(right: 20))
, Text(missionRoadGas)],
),
],
),
),
);
}
}

Output:

Android App

Desktop (Web) App

Flutter Community:

• NOTE: This is NOT a promotion.
• Join this LinkedIn Group to be updated with Flutter.
• https://www.linkedin.com/groups/8833665/

Blog by: Aadi