Firebase UI Database: The Hidden Gem Package | Part 3
Introduction
In the previous article we saw about the Auth UI package which helped us to create a beautiful login screen, In this article, we’ll delve into the world of Firebase UI Database, a package available on pub.dev that serves as a hidden gem for developers seeking an efficient and streamlined way to interact with Firebase Realtime Database.
Overview of Firebase UI Database:
Firebase UI Database is an open-source library that simplifies the integration of Firebase Realtime Database with Flutter applications. Developed to enhance the user interface and user experience, this package provides pre-built UI components that seamlessly connect with Firebase, allowing developers to focus more on crafting engaging interfaces rather than dealing with the intricacies of data synchronization.
Key Features:
- PreBuild UI Components:
Firebase UI Database comes with a set of UI components like FirebaseDatabaseListView for working with lists of data. This allows developers to effortlessly display data from Firebase in their Flutter applications without the need for extensive manual coding.
2. Realtime Data Updates:
One of the standout features of this package is its ability to handle real-time data synchronization. Firebase UI Database leverages this capability, ensuring that any changes made to the database are automatically reflected in the UI in real-time. This is particularly useful for applications requiring live updates, such as chat apps or collaborative platforms.
3. Authentication Integration:
The package seamlessly integrates with Firebase Authentication, allowing developers to implement secure sign-in and access controls for their applications. By combining Firebase UI Database with Firebase Authentication, developers can create robust, user-centric applications with ease.
4. Querying and Sorting:
Firebase UI Database simplifies the process of querying and sorting data from the Realtime Database. Developers can easily filter and organize data based on specific criteria, enhancing the overall efficiency of data retrieval in their applications.
Getting Started:
To incorporate Firebase UI Database into a Flutter project, developers need to include the package in their pubspec.yaml file and configure it with the necessary Firebase settings. Once set up, the package provides a range of widgets and utilities that developers can seamlessly integrate into their application code.
dependencies:
firebase_ui_database: ^1.0.0 //use latest version
firebase_database: ^1.0.0 //use latest version
firebase_core: ^1.0.0 //dont forgot add firebase_coreExample Implementation:
Let’s take a quick look at how Firebase UI Database simplifies the integration of Firebase Realtime Database with a Flutter application.
FirebaseDatabaseListView:
This widget allows to create a list view with live data from the firebase Realtime database.
import ‘package:firebase_ui_database/firebase_ui_database.dart’;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final usersQuery = FirebaseDatabase.instance.ref('users');
return FirebaseDatabaseListView(
query: usersQuery,
itemBuilder: (context, snapshot)
Map user = snapshot.value as Map;
return Card(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Text('${user['name']}'),
),
);
},
);
}
}In this example, FirebaseDatabaseListView handles the data synchronization and updates the UI whenever there are changes to the ‘users’ node in the Firebase Realtime Database.
Video :
Controlling page size
By default, the widget will fetch 10 items from the collection at a time. This can be changed by providing a pageSize parameter.
FirebaseDatabaseListView(
pageSize: 20,
// ...
);In general, it is good practice to keep this value as small as possible to reduce network overhead. If the height (or width) of an individual item is large, it is recommended to lower the page size.
Loading and error handling
By default, the widget will display a loading indicator while data is being fetched from the database, and ignore any errors which might be thrown (such as permission denied). You can override this behavior by providing a loadingBuilder and errorBuilder parameters to the widget:
FirebaseDatabaseListView(
loadingBuilder: (context) => MyCustomLoadingIndicator(),
errorBuilder: (context, error, stackTrace) => MyCustomError(error, stackTrace),
// ...
);Advanced configuration
In many cases, the FirebaseDatabaseListView widget is enough to render simple lists of collection data. However, we may have specific requirements which require more control over the widget's behavior such as using a GridView.
The FirebaseDatabaseQueryBuilder provides the building blocks for advanced configuration at the expense of requiring more boilerplate code. The widget does not provide any underlying list implementation, instead you are expected to provide this yourself.
Much like the FirebaseDatabaseListView widget, provide a query and builder:
final usersQuery = FirebaseDatabase.instance.ref('users').orderByChild('name');
FirebaseDatabaseQueryBuilder(
query: usersQuery,
builder: (context, snapshot, _) {
// ... TODO!
},
);The main difference to note here is that the builder property returns a FirebaseQueryBuilderSnapshot, rather than an individual document. The builder returns the current state of the entire query, such as whether data is loading, an error has occurred and the documents.
This requires us to implement our own list based implementation. Firstly, let’s handle the loading and error states:
FirebaseDatabaseQueryBuilder(
query: usersQuery,
builder: (context, snapshot, _) {
if (snapshot.isFetching) {
return const CircularProgressIndicator();
}
if (snapshot.hasError) {
return Text('Something went wrong! ${snapshot.error}');
}
// ...
},
);Next, we now need to return a list-view based implementation for our application to display the data. For example, to display a grid of users, we can use the GridView widget:
FirebaseDatabaseQueryBuilder(
query: usersQuery,
builder: (context, snapshot, _) {
// ...
return GridView.builder(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
),
itemCount: snapshot.docs.length,
itemBuilder: (context, index) {
// if we reached the end of the currently obtained items, we try to
// obtain more items
if (snapshot.hasMore && index + 1 == snapshot.docs.length) {
// Tell FirebaseDatabaseQueryBuilder to try to obtain more items.
// It is safe to call this function from within the build method.
snapshot.fetchMore();
}
final user = snapshot.docs[index].value as Map;
return Card(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
'${user['name']}',
style: const TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
),
);
},
);
},
);FirebaseDatabaseDataTable
return FirebaseDatabaseDataTable(
query: usersQuery,
columnLabels: {
"name": const Text("User Name"),
"age": const Text("User Age"),
},
canDeleteItems: true,
);The FirebaseDatabaseDataTable widget is a powerful widget that facilitates the seamless integration of Firebase Realtime Database with Flutter applications. Specifically designed to display data in a DataTable, this widget empowers users to not only view but also edit data directly from the UI. The dynamic nature of this widget allows users to modify information on-the-fly, contributing to a more interactive and user-friendly experience.
One notable feature is the option to enable or disable the ability to delete items. When canDeleteItems is set to true, users gain the capability to remove entries directly from the DataTable, enhancing the overall flexibility of data management within the application.
Beyond its core functionalities, the FirebaseDatabaseDataTable widget offers a range of parameters that developers can explore to customize and fine-tune its behavior. These parameters enable developers to tailor the widget to their specific application requirements, ensuring a seamless and intuitive integration with Firebase Realtime Database.
Exploring the versatility of this widget opens up possibilities for creating robust and user-centric applications. Whether it’s data visualization, editing, or deletion, the FirebaseDatabaseDataTable widget simplifies complex tasks and provides developers with a valuable tool for crafting dynamic and efficient Flutter applications.
Conclusion:
Firebase UI Database stands out as a valuable tool for Flutter developers working with Firebase Realtime Database. Its pre-built UI components and seamless integration with Firebase services make it a hidden gem that streamlines the development process. By simplifying tasks related to data retrieval, synchronization, and authentication, Firebase UI Database empowers developers to focus on creating feature-rich and dynamic applications. As Flutter and Firebase continue to gain popularity, packages like Firebase UI Database play a crucial role in enhancing the overall developer experience.
I hope you found this article enjoyable! If you appreciated the information provided, you have the option to support me by Buying Me A Coffee! Your gesture would be greatly appreciated!
Follow Me
Thank you for taking the time to read this article. If you enjoyed it, feel free to explore more of my articles and consider following me for future updates. Your support is greatly appreciated!
https://www.linkedin.com/in/aakashpamnani/
Thank you for taking the time to read this article. If you enjoyed it, feel free to explore more of my articles and consider following me for future updates. Your support is greatly appreciated!
