index-1-1.jpg

Cross-Platform App Development With Flutter- Part 3

We worked with Capture to design and create an app to make planet-friendly living possible - and we built it using Flutter.


Do you want to get inspired by top apps made with Flutter?


Irrespective of the notion, you will find this blog very informative if you’re new to Flutter. It provides meticulous details about the product we worked on, Capture, that will help you expand your knowledge, so you can ‘Flutter’ away and bring your app ideas to life. As in our previous blog, we put forward some points which made it clear why development in Flutter is a breeze. This blog will primarily focus on the functionalities and features added to Capture using Flutter’s libraries, packages, and plugins. Let's start!



Capture || Sustainability App


Capture is your pocket-pal helping you keep track of your climate footprint from everyday mobility choices, offsetting through forestry planting around the world.




Capture - Frontend Development with Flutter


The development team focused on UI flows to ensure a user-friendly experience. Our front-end team leveraged Flutter’s high-performance rendering engine to create performance and beautiful-looking widgets. The flow between different screens is smooth and feels natural to the touch. Widget testing made it easier for our developers to unit test the product and maintain better quality.




Writing Native Code for Transport-Mode Recognition


Flutter has a rich pool of packages and widgets. However, sometimes you might find yourself in situations that demand you to write native code. Capture has a fantastic feature that tracks your journey and predicts the mode of transport. The team leveraged, flutter_background_geolocation, the most sophisticated background

location-tracking & geofencing module with battery-conscious motion-detection intelligence for iOS and Android for accurate location tracking. Our developers had to go the extra mile to write native code for the Android platform to integrate transport mode recognition.




Persistent Bottom Nav-Bar



To improve the UI experience further, our Frontend Developer, Bilal Shahid, built a Flutter package, persistent_bottom_nav_bar, allowing users to switch between the screens with the bar present at the bottom.


The primary purpose of the package was that we wanted to keep the app experience consistent across platforms, which Flutter did not support. By default, switching to a new screen in Android, the navigation bar vanishes, whereas it persists in iOS devices. Get a thorough understanding of this package at: https://pub.dev/packages/persistent_bottom_nav_bar


Tech Stack


We used Firebase for the back-end along with a host of APIs. Here’s what we used on the back-end:

  • Back-end: GCP and Firebase

  • Authentication: Firebase auth

  • Datastore: Firestore

  • Payments: Stripe

  • Maps & proximity services: Here Technologies, Google Maps API

  • ASO: Apptweak


In the Flutter app, we relied on the following:

  • persistent_bottom_nav_bar

  • flutter_background_geolocation

  • flutter_facebook_login

  • flutter_masked_text

  • flutter_share_me

  • flutter_svg

  • flutter_spinkit

  • flutter_native_timezone


Conclusion


Flutter played a vital role in the development of Capture and helped us swiftly get to market. Most Flutter packages abstract away the boilerplate required and directly give developers the most optimized solutions. As Flutter is equipped with a customizable kit of widgets, it became easier to design distinctive and delightful widgets for Capture. Moreover, Flutter’s shared packages eradicate the need to develop things from scratch and help reduce development time. Read the detailed case study on Capture: https://www.aurorasolutions.io/capture-sustainability-app



63 views1 comment