You probably have lived though the situation where either you or anyone you live with shares their intent to get groceries just to be immediately bombarded with requests. Inconveniently, you grab your phone, or pen and paper, and start writing things down, or ask them to message you with what they want. I’ve quickly developed a mobile application using Flutter to help synchronize a list of wanted groceries where anyone can log what they want whenever they feel like to.
The app uses a Firebase Realtime Database to store products and synchronize data between devices. It also uses the FirebaseAnimatedList widget, provided by the same SDK, binding a Firebase query that concerns a specific location on the remote document database. It’s a convenient widget that makes it simpler to display and operate on data stored remotely when arranged in a list format.
Final result:
Users are able to individually add new products, set the desired quantity or remove them. You might flag it instead by tapping the quantity number for situations when where you want to signal the product was added to the cart, but don’t want to remove it from the list. Each item has a reference field to help with specific products.
External packages
-
Envify → Generate configs from an
.envfile. -
Provider → State Management.
-
Firebase Database → SDK to operate the remote Firebase database.
-
Firebase Core → Initialize Firebase APIs and connect Firebase Application.
-
Build Runner → Dev dependency.
-
Envify Generator → Dev dependency to generate environment data.
-
Flutter Launcher Icons → Dev dependency to generate the application icon for Android.
Setting up Firebase
To set up your own database you’ll have to create a Firebase Project and enable the Realtime database product through Firebase Console.
The properties required are:
Add the data provided by Firebase to the .env file in the project root folder except for the DATABASE_NAME, you can name the database whatever you’d like.
Firebase also generates a google-services.json file that you can download when creating a project. You must place it inside the <project_root>/android/app folder.
After setting up .env and google-services.json run the following list of commands:
Download packages:
flutter pub get
Generate the env.g.dart file with configuration data:
flutter pub run build_runner run
Build the APK for Android:
flutter build apk --split-per-abi --no-sound-null-safety --release
Install on connected USB device:
flutter install
Firebase Database does not have a null safety compliant version yet, hence the --no-sound-null-safety parameter.
Going through the code.
Initializing the Firebase Application.
For a clear explanation of WidgetsFlutterBinding.ensureInitialized check the following Stack Overflow answer.
The root widget MyApp has a FutureBuilder that completes once the database is initialized. LvFirebaseProvider asynchronously initializes the Firebase database with the FirebaseApp object. Its initialize() API enables persistence mode which allows data to be stored on disk. Normal behaviour maintains changes in-memory and automatically in sync with the remote database and if there’s no connection, those changes are lost once the app closes/restarts. With Persistence Mode enabled, data is stored on disk and synchronized as soon as possible.
By default the Firebase Database client uses 10MB of disk space to cache data.
The root location on the database has a list of objects (products/items) each with a firebase ID (automatically generated using a timestamp) and a set of properties (name, reference and quantity). Products are listed chronologically by the order they were created.
The following code is used to manage data according to the requirements through LvFirebaseProvider.
Hope you’ve enjoyed this little project and can replicate it yourself.
Best regards,