A Completed Functional Flutter App - FindSeat (BLoC + Json API + Unit Test + Firebase Auth)
I’m Android Developer and I’m working in a software company in Vietnam. I have experience in both kind project: outsourcing project and product project. I decided to study Flutter, because I believe it’s promised in future. As experienced developer, I care about clean architecture, testing, performance and maintainability that why I keep searching for an example of completed application. Unfortunately, community now full of project such as speedcode, UI challenges, … it’s just small pieces of real world application. In fact, most of the project doesn’t have fancy UI like that.
That why I build this project by myself and now share it to the community, I hope you can get something from it then apply to your work.
The first version of project (v1.0) is just about UI + simple logic. In this version v2.0, I applied BloC pattern by using Flutter Bloc to project and also have unit tests for it. I also built simple Mock API for the app, it just static json file uploaded to a my private hosting. I hope I have time to do cache local data by SQLite but I have not, so hope next version will be soon available.
In Home screen, it just simply load then show data to UI. What you can try
https://integer.sgp1.digitaloceanspaces.com/findseat
| API | Usage |
|---|---|
| /home.json | Return data for Home screen |
| /all_shows_by_type.json | Return data for All Shows screen |
| /booking_time_slot_by_cine.json | Return data for Book Time Slot screen |
| /book_seat_slot_by_time_slot.json | Return data for Book Seat Slot screen |
| Plugin | Usage |
|---|---|
| retrofit | For working with restful API, generated model |
| json_annotation | Same as above (SAA) |
| dio | SAA |
| build_runner | SAA |
| flutter_bloc | For build app architecture |
| carousel_slider | Use for section banner in Home screen |
| freezed | Working with State of bloc |
| equatable | SAA |
| meta | SAA |
| intl | Format date time and other formats |
| youtube_player_flutter | Display trailer from Youtube link |
| shared_preferences | For caching user’s session |
| flutter_svg | Display svg icon |
| google_maps_flutter | Display address of cine |
| dotted_border | Display dot border of offer ticket in Show details screen |
| shimmer | Animate image place holder |
| stripe_payment | Use in booking feature |
| firebase_core | For register account and login using Firebase |
| google_sign_in | SAA |
| firebase_auth | SAA |
| test | Try to use unit testing, most of the cases come from Bloc |
| bloc_test | SAA |
flutter doctor -v
[√] Flutter (Channel stable, 2.8.1, on Microsoft Windows [Version 10.0.19043.1586], locale en-US)• Flutter version 2.8.1 at C:\src\flutter• Upstream repository https://github.com/flutter/flutter.git• Framework revision 77d935af4d (3 months ago), 2021-12-16 08:37:33 -0800• Engine revision 890a5fca2e• Dart version 2.15.1[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)• Android SDK at C:\Users\ASUS\AppData\Local\Android\sdkX cmdline-tools component is missingRun `path/to/sdkmanager --install "cmdline-tools;latest"`See https://developer.android.com/studio/command-line for more details.X Android license status unknown.Run `flutter doctor --android-licenses` to accept the SDK licenses.See https://flutter.dev/docs/get-started/install/windows#android-setup for more details.[√] Chrome - develop for the web• Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe[√] Android Studio (version 3.1)• Android Studio at C:\Program Files\Android\Android Studio• Flutter plugin version 29.0.1• Dart plugin version 173.4700• Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1024-b02)[√] Android Studio (version 3.5)• Android Studio at C:\Program Files\Android\android-studio• Flutter plugin version 42.1.1• Dart plugin version 191.8593• Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)[√] Android Studio (version 3.6)• Android Studio at C:\Program Files\Android\AS33• Flutter plugin version 49.0.1• Dart plugin version 192.8052• Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b04)[√] IntelliJ IDEA Community Edition (version 2020.3)• IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2020.3.1• Flutter plugin can be installed from:https://plugins.jetbrains.com/plugin/9212-flutter• Dart plugin can be installed from:https://plugins.jetbrains.com/plugin/6351-dart[√] IntelliJ IDEA Ultimate Edition (version 2021.1)• IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA 2021.1• Flutter plugin can be installed from:https://plugins.jetbrains.com/plugin/9212-flutter• Dart plugin can be installed from:https://plugins.jetbrains.com/plugin/6351-dart[√] VS Code (version 1.65.0)• VS Code at C:\Users\ASUS\AppData\Local\Programs\Microsoft VS Code• Flutter extension can be installed from:https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter[√] Connected device (3 available)• sdk gphone x86 (mobile) • emulator-5554 • android-x86 • Android 11 (API 30) (emulator)• Chrome (web) • chrome • web-javascript • Google Chrome 99.0.4844.74• Edge (web) • edge • web-javascript • Microsoft Edge 98.0.1108.62! Doctor found issues in 1 category.
Before run project, execute commands:
flutter cleanflutter pub getflutter pub run build_runner build or flutter pub run build_runner build --delete-conflicting-outputsflutter run (if needed)