A Completed Functional Flutter App - FindSeat (BLoC + Json API + Unit Test + Firebase Auth)

Overview

A Completed Functional Flutter App - FindSeat (BLoC + Json API + Unit Test + Firebase Auth)

Banner

I. Introduction

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.

Check Video Demo

II. Showcase

2.1. Home

In Home screen, it just simply load then show data to UI. What you can try

2.1.1. Screen: Home 1

Home_1

  • (0) is about me :D
  • (1) is carousel slider for displaying banners, it’s automatically animate each 1 second. You can swipe left or right to see next/previous item
  • (2) is list seat categories. If you click on a category, app will open All shows screen. It’s horizontal list so you can swipe to reach more item
  • (3) is recommended seats. Click on item app will open Show details screen
2.1.2. Screen: Home 2

Home_2

  • (4) is nearby theatres. There’s nothing special to try here, it’s just simple map with highlighted cine’s locations
  • (5) (6) is list shows by each category. Same with recommended seats, you can click on item to open Show details screen

2.2. All Shows

2.2.1. Screen: All Shows 1

AllShows_1

  • (1) click to open search field. Basically support search by name
  • (2) click to open sort option. Basically support sort by rating and name
  • (3) there’re 3 tabs: Now showing, Coming soon and Exclusive. You can swipe left/right to view content of each tab
  • (4) Display list show in gridview
2.2.2. Screen: All Shows 2

AllShows_2

  • Sort options dialog
2.2.3. Screen: All Shows 3

AllShows_3

  • App will perform search after stop typing for 400 milliseconds, technically it’s debounce technique. Try to click on item, app will open Show details screen

2.3. Show info

2.3.1. Screen: Show Info 1

ShowInfo_1

  • (1) is trailer of show from Youtube link
  • (2) show’s description
  • (3) is offer section. This is not static content, it can be changed in mock API
2.3.2. Screen: Show Info 2

ShowInfo_2

  • (4) is user’s review section. Basically write review function is not available yet
  • (5) is casts section. It’s horizontal listview, you can swipe to reach more content.
  • (6) Click Book seats then app will open Book Time Slot screen

2.4. Book Time Slot

2.4.1. Screen: Book Time Slot 1

BookTimeSlot_1

  • (1) Click to open search field. Basically support search by Cine’s name
  • (2) List cine with time slots. Gray item is time slot that is not available.
2.4.2. Screen: Book Time Slot 2

BookTimeSlot_2

  • App will perform search after stop typing for 400 milliseconds, technically it’s debounce technique. Click on item time slot, app will open Book Seat Type screen.

2.5. Book Seat Type

BookSeatType

  • (1) choose number of seats
  • (2) choose seat type

2.6. Book Seat Slot

BookSeatSlot

  • (1) is count of number booked seats
  • (2) Booked seats. You can click to select then click again to deselect seat.
  • Validate: For example in screen Book Seat Type you chosen 3 seats, type is Jack that mean
    • You cannot select Queen or King seat
    • You cannot book more than 3 seats

2.7. Make payment

2.7.1. Screen: Make payment 1

MakePayment_1

  • App integrated with Stripe SDK, currently for testing when you click on any method Debit/UDI/Net banking, app only show option pay by input card to the form.
2.7.2. Screen: Make payment 2

MakePayment_2

  • For testing, please use following information:
    • Card number: 4242 4242 4242 4242
    • Expiration date: 04/24
    • CVC: 424 or 242
2.7.3. Screen: Make payment 3

MakePayment_3

  • After Stripe verified the payment information, app will show your booking information.

2.8. Login

Login

  • Basically app provide login by user’s email and password. Login by Google and Facebook will be available soon.
  • Test account: [email protected] / 123456

2.9. Register

Register

  • I did validation in this form using Bloc pattern, you can look at this to study how to do form validation in Bloc.

III. Mock API

https://superman-academy.com/api/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

IV. Plugins

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

V. Design credit

Author: Dinu Dinesh
Design link: Movie & events ticket booking app

Development Environment

flutter doctor -v

[√] Flutter (Channel stable, 1.22.3, on Microsoft Windows [Version 10.0.18363.1316], locale en-US)
    • Flutter version 1.22.3 at C:\src\flutter
    • Framework revision 8874f21e79 (3 months ago), 2020-10-29 14:14:35 -0700
    • Engine revision a1440ca392
    • Dart version 2.10.3


[√] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at C:\Users\ASUS\AppData\Local\Android\sdk
    • Platform android-29, build-tools 29.0.2
    • Java binary at: C:\Program Files\Android\AS33\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b04)
    • All Android licenses accepted.

[√] Android Studio (version 3.1)
    • Android Studio at C:\Program Files\Android\AS31
    • 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) - currently use
    • 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)

[!] VS Code (version 1.52.1)
    • VS Code at C:\Users\ASUS\AppData\Local\Programs\Microsoft VS Code
    X Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[√] Connected device (1 available)
    • Android SDK built for x86 (mobile) • emulator-5554 • android-x86 • Android 8.1.0 (API 27) (emulator)

Before run project, execute commands:

  • flutter clean
  • flutter pub get
  • flutter pub run build_runner build or flutter pub run build_runner build --delete-conflicting-outputs
  • flutter run (if needed)

Support

  • If you wanna get updates in next version, please give me a to the repo 👍
  • If you love my work and want to support, buy me a coffee here. Thank you so much 👍
Comments
  • create a tutorial for building this app, it's not as easy for everyone

    create a tutorial for building this app, it's not as easy for everyone

    hi there, thanks for sharing this knowledge and techniques. i wanted to suggest that you add a tutorial regarding the exact steps to take for making a successful build. there are many problems associated with the current version:

    1. updating packages in pubspec.yaml results in breaking changes that prevent the app from compiling. so I think either it needs to be updated or a warning needs to be shown to users that they are not allowed to update anything.

    2. for iOS devices the automatic settings result in a target version in which the app does not support but the code doesn't mention a target version either, so it creates have huge confusion.

    3. as you know the app would not build with the conventional build system of VSCode or IntelliJ and needs some flutter action in the terminal, i think better clarification regarding that would help more adoption of this great code as a hands-on tutorial.

    documentation good first issue 
    opened by AriaShishegaran 10
  • Login in not working for Test Account. Used main_dev.dart

    Login in not working for Test Account. Used main_dev.dart

    Hi, thanks for sharing source codes. But login is not working for Test account: [email protected] / 123456 Used as input main file: main_dev.dart.

    This are issues:

    [FirebaseAuth: ] getGoogleApiForMethod() returned Gms: [email protected]
    W/DynamiteModule(20521): Local module descriptor class for com.google.firebase.auth not found.
    W/GooglePlayServicesUtil(20521): Google Play services out of date.  Requires 12451000 but found 11743470
    
    opened by KanybekMomukeyev 6
  • 'Diagnosticable', has no unnamed constructor that takes no arguments.       PictureStream();

    'Diagnosticable', has no unnamed constructor that takes no arguments. PictureStream();

    Launching lib/main.dart on iPhone 11 Pro Max in debug mode...
    
    Compiler message:
    ../../.flutter_sdk/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_svg-0.14.4/lib/src/picture_stream.dart:92:3: Error: The superclass, 'Diagnosticable', has no unnamed constructor that takes no arguments.
      PictureStream();
      ^^^^^^^^^^^^^
    ../../.flutter_sdk/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_svg-0.14.4/lib/src/picture_stream.dart:192:16: Error: The superclass, 'Diagnosticable', has no unnamed constructor that takes no arguments.
    abstract class PictureStreamCompleter extends Diagnosticable {
                   ^
    Xcode build done.                                           13,7s
    Failed to build iOS app
    Error output from Xcode build:
    ↳
        ** BUILD FAILED **
    Xcode's output:
    
       Compiler message:
        ../../.flutter_sdk/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_svg-0.14.4/lib/src/picture_stream.dart:92:3: Error: The superclass, 'Diagnosticable', has no unnamed constructor that takes no arguments.
          PictureStream();
          ^^^^^^^^^^^^^
        ../../.flutter_sdk/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_svg-0.14.4/lib/src/picture_stream.dart:192:16: Error: The superclass, 'Diagnosticable', has no unnamed constructor that takes no arguments.
        abstract class PictureStreamCompleter extends Diagnosticable {
                       ^
        Target kernel_snapshot failed: Exception: Errors during snapshot creation: null
        build failed.
        Command PhaseScriptExecution failed with a nonzero exit code
        note: Using new build system
        note: Planning build
        note: Constructing build description
    Could not build the application for the simulator.
    Error launching application on iPhone 11 Pro Max.
    Exited (sigterm)
    
    opened by ghost 2
  • Error importing Router from two classes

    Error importing Router from two classes

    I am getting this error when I build.

    Error: 'Router' is imported from both 'package:find_seat/presentation/router.dart' and 'package:flutter/src/widgets/router.dart'.

    opened by mfissehaye 1
  • error: use of undeclared identifier 'GMSServices'

    error: use of undeclared identifier 'GMSServices'

    Launching lib/main.dart on iPhone 11 Pro Max in debug mode...
    Xcode build done.                                           15,7s
    Failed to build iOS app
    Error output from Xcode build:
    ↳
        ** BUILD FAILED **
    Xcode's output:
    ↳
        /Users/xi/github/findseat/ios/Runner/AppDelegate.m:8:4: error: use of undeclared identifier 'GMSServices'
          [GMSServices provideAPIKey:@"AIzaSyAh9zLZ2W2yMW_R0eMxH-thhONdi3XZ_aY"];
           ^
        1 error generated.
        note: Using new build system
        note: Planning build
        note: Constructing build description
    Could not build the application for the simulator.
    Error launching application on iPhone 11 Pro Max.
    Exited (sigterm)
    
    opened by ghost 1
  •  could not find compatible versions for pod

    could not find compatible versions for pod "stripe_payment":

    [!] CocoaPods could not find compatible versions for pod "stripe_payment":
          In Podfile:
            stripe_payment (from `.symlinks/plugins/stripe_payment/ios`)
        Specs satisfying the `stripe_payment (from `.symlinks/plugins/stripe_payment/ios`)` dependency were found, but they required a higher minimum deployment target.
    
        [!] Automatically assigning platform `iOS` with version `8.0` on target `Runner` because no platform was specified. Please specify a platform for this target in your Podfile. See `https://guides.cocoapods.org/syntax/podfile.html#platform`.
    Error running pod install
    Error launching application on iPhone 11 Pro Max.
    
    opened by ghost 1
  • Migrating to null safety. Fix Mock API

    Migrating to null safety. Fix Mock API

    1. Update Mock API

    • New Mock API replaced to https://integer.sgp1.digitaloceanspaces.com/

    2. Migrate to Flutter 2.8.1, Dart 2.15.1 for support Null safety

    Checkout my 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\sdk X cmdline-tools component is missing Run 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.

    enhancement 
    opened by KhoaSuperman 0
  • Error when i try run this app on iOS. Please help me <3

    Error when i try run this app on iOS. Please help me <3

    I try:

    flutter pub get

    flutter pub run build_runner build --delete-conflicting-outputs

    flutter build ios or flutter run -t lib/main_dev.dart

    Thanks <3

    Group

    Screen Shot 2020-09-18 at 11 24 08 AM

    opened by helloo0-0oword 0
  • Add gitpod config

    Add gitpod config

    this commit adds support for Gitpod.io, a free automated dev environment that makes contributing and generally working on GitHub projects much easier. It allows anyone to start a ready-to-code dev environment for any branch, issue and pull request with a single click.

    opened by StanisicS 0
  • Deprecated flutter project & dependencies

    Deprecated flutter project & dependencies

    Really love your project structure & cleanliness of this project. Seems like it doesn't work with the latest flutter version.

    I really appreciate if you could update it!

    opened by fadzlitown 0
  • request inactive

    request inactive

    Your development environment information Send "flutter doctor -v" information

    To Reproduce Steps to reproduce the behavior:

    1. Go to '...'
    2. Click on '....'
    3. Scroll down to '....'
    4. See error

    Expected behavior A clear and concise description of what you expected to happen.

    Screenshots If applicable, add screenshots to help explain your problem.

    Desktop (please complete the following information):

    • OS: [e.g. iOS]
    • Browser [e.g. chrome, safari]
    • Version [e.g. 22]

    Smartphone (please complete the following information):

    • Device: [e.g. iPhone6]
    • OS: [e.g. iOS8.1]
    • Browser [e.g. stock browser, safari]
    • Version [e.g. 22]

    Additional context Add any other context about the problem here.

    opened by cuongx 0
Owner
Khoa Hoang
Senior Android Developer | UI/UX Designer * Skype: hoang.anh.khoa
Khoa Hoang
Amir Khan 47 Jan 8, 2023
Fluttermobile - Flutter Movie App Using BLoc Pattern and JSON API

Flutter Movie App Using BLoc Pattern and JSON API. Data Provider: https://www.th

BEŞİR ÖZTEN 5 Jul 6, 2022
Task management app with flutter, firebase firestore, and firebase auth

to_do_list A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if th

Alvin Ferdian 2 Mar 3, 2022
A Full Functional Application made bY Flutter Bloc Architcture.

Description Front End Flutter Bloc Architecture Back End Node Js An application designed for making home rentals easier. Lets landlords post their hom

Abel Ashine 1 Nov 18, 2021
Kind of app that generally used to maintain our day-to-day tasks or list everything that we have to do.We can add more tasks at any time and delete a task that is completed.

todo_application A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started

Khaled Elnkhla 0 Nov 6, 2021
A web dashboard that allows you to monitor your Chia farm and sends notifications when blocks are found and new plots are completed through a discord bot. It can link multiple farmers/harvesters to your account.

farmr A web dashboard that allows you to monitor your Chia farm and sends notifications when blocks are found and new plots are completed through a di

Gil Nobrega 261 Jan 2, 2023
A fully-functional e commerce app made in Flutter using Firebase.

Smart Shop ??️ A fully-functional e commerce app made in Flutter using Firebase. How To Run This Project ??‍♂️ Clone the repository. Create project on

null 25 Sep 30, 2022
A fully functional Instagram clone written in Flutter using Firebase / Firestore

Fluttergram A working Instagram clone written in Flutter using Firebase / Firestore Demo Download the release APK to try out Fluttergram I update Flut

Matthew Danics 2.1k Jan 8, 2023
Fully functional Twitter clone built in flutter framework using Firebase realtime database and storage

Fwitter - Twitter clone in flutter A working Twitter clone written in Flutter using Firebase auth,realtime,firestore database and storage. Download Ap

Sonu Sharma 2.4k Jan 8, 2023
Third Flutter Project to practice. A chat app, which uses Firebase as auth and database service.

chat_app Third Flutter Project to practice. A chat app, which uses Firebase as auth and database service. Resource video 0.1 Sign In and Register page

boraygen 2 Oct 4, 2021
An App I made to learn of FIrebase Phone Auth and ML Kit

demoapp A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this

D Srikhar Shashi 1 Oct 19, 2021
The Flutter Firebase Phone Auth application for authenticating the user's mobile phone

Flutter Firebase Phone Auth ✨ About The Flutter Firebase Phone Auth application

Dileepa Bandara 3 Aug 25, 2022
WeatherApp - A Weather App using json api And Flutter

Weather App Bu uygulamda json api kullanarak bir WeatherApp yaptım. State Manage

Kerem 4 Oct 12, 2022
With Bloc - Path Provider - Hydrated Bloc

Intro Custom Default Counter App on Flutter. The updated : Flutter Bloc / Cubit + Path Provider + Hydrated Bloc + Store Data using Hive Check the scre

Ihab Zaidi 1 Oct 30, 2021
A fully functional chat application built with Flutter and Stream

?? SpikeChat A fully functional chat application built with Flutter and Stream! ✅ Join the chat room (If you have the secret passcode hehe) ✅ Send tex

Ashton Jones 20 Apr 30, 2022
An expressive, functional, and full-featured server-side framework for Dart.

A framework and collection of packages for writing http servers, built on top of the shelf package. This framework is intended to reduce the technical

Marathon 45 Jun 25, 2022
Simple Journal App With Auth Flow

journal A new Flutter project. Getting Started This project is a starting point

Pushpendra Pal 2 Mar 14, 2022
I did a task manager which has abilities like (priority,sort,daily,weekly,monthly,profile screen,user auth)

task_manager A task manager app by Flutter. Getting Started This is a task manager app which you can manage your daily/weekly/monthly tasks. Users can

Yusuf Erarslan 2 Jan 12, 2022
TheEasyFood - Delivery App built on Flutter with Firebase and Bloc

A new open source Delivery App created using Flutter, Firebase, Google Maps and

Alaa Shoukri 17 Dec 11, 2022