A Completed Functional Flutter App – FindSeat (BLoC + Json API + Unit Test + Firebase Auth)
In Home screen, it just simply load then show data to UI. What you can try
2.1.1. Screen: Home 1
- (0) is about me ?
- (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
- (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
- (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
- Sort options dialog
2.2.3. Screen: All Shows 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
- (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
- (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
- (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
- 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
- (1) choose number of seats
- (2) choose seat type
2.6. Book Seat Slot
- (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
- 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
- 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
- After Stripe verified the payment information, app will show your booking information.
- Basically app provide login by user’s email and password. Login by Google and Facebook will be available soon.
- Test account: [email protected] / 123456
- 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
|/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|
|retrofit||For working with restful API, generated model|
|json_annotation||Same as above (SAA)|
|flutter_bloc||For build app architecture|
|carousel_slider||Use for section banner in Home screen|
|freezed||Working with State of bloc|
|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|
|test||Try to use unit testing, most of the cases come from Bloc|
V. Design credit
Author: Dinu Dinesh
Design link: Movie & events ticket booking app
flutter doctor -v
Before run project, execute commands:
flutter pub get
flutter pub run build_runner buildor
flutter pub run build_runner build --delete-conflicting-outputs
flutter run(if needed)
- 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 ?