Flutter Presence: A Step-by-Step Guide

Apr 3, 2022 | Programming

In today’s digital world, creating a robust presence management application is essential, especially for companies that require effective tracking of their employees. The Flutter Presence app is an open-source solution that integrates geolocation (GPS) functionalities, enabling you, as a developer or company, to efficiently manage presence data. With a beautiful user interface, the app supports multiple users, including admin and employee roles. This guide will walk you through setting up this application, making it user-friendly for beginners and experienced developers alike.

App Screenshots





Demo Access

You can try the demo (available only for Android) by downloading this APK: Download Demo.

Login Credentials

  • Admin Login:
    Email: mrezkysulihin@gmail.com
    Password: 123456789
  • Employee Login:
    Email: mrezkysulihin12@gmail.com
    Password: 123456789

Installation Steps

Follow these steps to get your Flutter Presence application running smoothly:

  1. Step 1: Download or clone this repository using the link below and run flutter pub get.
    Clone Repository
  2. Step 2: Rename the app package name (this is essential for Firebase compatibility). You can do this manually or by using the Rename Package tool or refer to this Stack Overflow Question.
  3. Step 3: Reinitialize the Firebase CLI by following the setup documentation.
  4. Step 4: Enable email/password authentication in Firebase.
  5. Step 5: Create a Firestore database.
  6. Step 6: Set up the admin account and user database in Firebase by adding users through the Firebase console. Copy the User UID and use it as the Document ID in your Firestore collection. Important roles include admin and employee, along with a created_at field formatted in ISO8601 string. Use a dummy date like 2022-05-10T12:34:58.274129 if needed.
  7. Step 7: Run the Flutter app using flutter run.
  8. Step 8: Modify company data in lib/company_data.dart as required.

Understanding the Code: An Analogy

Think of the flutter_presence code as a recipe for a dish, where each installation step corresponds to an ingredient or preparation method needed to create the final meal. Just like in cooking, if you whiff on a step, the dish may not taste as intended. Here’s a simplified breakdown of this “recipe”:

  • Ingredients: The dependencies and packages in Flutter are like the spices in your recipe. Without certain spices, your dish won’t have the expected flavor.
  • Preparation Steps: Each installation step is akin to instructions in a recipe – if you forget to preheat the oven (like not enabling Firebase), your meal may not cook properly (the app won’t function correctly).
  • Final Presentation: Modifications to the UI (in lib/company_data.dart) are like garnishing your plate – essential for making the meal appealing!

Troubleshooting

If you encounter issues while setting up or running the Flutter Presence app, consider the following troubleshooting tips:

  • Ensure that you’ve followed all installation steps in the correct order.
  • Double-check your Firebase configurations; incorrect settings can lead to authentication failures.
  • If you are facing UI issues, make sure that you’ve updated the dependencies properly using flutter pub get.
  • Check your package name to ensure that it is consistent throughout your configuration.
  • Look for error messages in the console and search for solutions online; the Flutter community is robust and full of resources.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

About the Author

Flutter Presence is developed by mrezkys, with the User Interface designed by mrezkys.

Concluding Thoughts

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.

Thank you for exploring the Flutter Presence application with us, and happy coding!

Stay Informed with the Newest F(x) Insights and Blogs

Tech News and Blog Highlights, Straight to Your Inbox