A simplified Real Movie Booking App 🎬 🍿 - Built with Flutter, Clean Template, BLoC, REST API, Firebase Auth, and Unit-Tests.
I’ve open-sourced this project to showcase some of my skills and to help early-career Flutter developers grow in their career.
Like "Nezha: Birth Of The Demon Child", I believe that for those just starting out in Flutter, completing this project might be a challenge. However, once you get through it, you’ll either succeed and grow stronger. (Không thành công cũng thành nhân) (失败也是成功)
I’ll also support so feel free to start with new issue if you have difficulty because I know it’s not as easy for everyone. 💪
2025 kicks off with AI evolving at an incredible pace, but also brings a wave of layoffs in the IT industry. Don’t be too afraid! This is not the end—stay patient, keep learning, and wait for the right moment.
And what could be better than starting a new project to kick off the year?
Check out the live web demo -> coming soon
| Screen | Preview | Screen | Preview |
|---|---|---|---|
| Begin Screen |  |
Get Start Screen |  |
| Home Screen |  |
Movie Screen |  |
| Login Screen |  |
Register Screen |  |
| All Movie Screen |  |
About Screen |  |
| Booking Time |  |
Booking Seat Type |  |
| Booking Slot |  |
Tickets Screen |  |
Cinema Booking is an application that helps users search for and book movie tickets 🎟️ at cinemas in Hanoi. The app offers a user-friendly and cinematic interface, quick operations, and a convenient ticket-booking experience.
It leverages Flutter Clean Architecture and Flutter BLoC, ensuring a well-structured and scalable design that facilitates future growth, comprehensive testing, and efficient QA processes. That also makes it easy to develop hard-to-reach UseCase in the future.
This is the collection of components that I developer for Cinema Booking, includes:
- ✅ Splash and Get Start (#8 feat screen splash) (#10 feat get-start welcome screen)
- ✅ Login (#19 feat login screen)
- ✅ Home Main (#20 feat home screen)
- ✅ Movie Detail (#25 feat detail movie screen)
- ✅ Search All Movie (#28 feat all movie screen)
- ✅ Booking Tickets Movie (#33 feat booking movie tickets screen)
- ✅ Tickets hold (#38 feat screen tickets hold)
- ✅ Mock API Postman for RestAPI
- CI/CD
- Crawl Data from Cinema Web
- Theme mode
- Unit/Integration tests
- Payment Screen
- Search All Cinema in Hanoi
- Crawl data from Cinema Website
- IOS version
- Web version
Check out the Cinema Booking roadmap -> #43 Roadmap
If you like my work, feel free to:
- ⭐ Star this repository to show your support! 🚀
- Tweet about Cinema Booking.
- If you want to support more, you can check out my GitHub Sponsor page xD.
Your support means a lot! Thank you for stopping by and contributing to the project. 🎬🍿
I have been working with Flutter and Java for about three years. I built cool stuff at VNPT Technology but most of them are system applications based on AOSP source code and are under security contracts, making it difficult to showcase them..
This is a showcase user-facing application that I built in my spare time ⏳ to expand my experience in application development and explore various technologies and new libraries I wanted to try, such as Firebase, Google Maps, Payment,... and more.
There are many Flutter examples on the web but most of them are way too simple. I like to think that this codebase contains enough complexity 🧩 to offer valuable insights to Flutter developers of all skill levels while still being relatively easy to understand.
This piece of work is also part of my technical series Flutter-Journey 🎯, which aims to empower developers to build and scale their own Flutter applications. My desire is to advocate and grow the Flutter developer community in Vietnam.
Some libraries are used in this project and shout out to them because they are very helpful for the community.
| Category | Library | Description | Logo |
|---|---|---|---|
| Framework | Flutter | Flutter makes it easy and fast to build beautiful apps for mobile and beyond. |  |
| Language | Dart | The Dart SDK, including the VM, JS and Wasm compilers, analysis, core libraries, and more. |  |
| Authentication | Firebase Auth | Handles user authentication. |  |
| Google Sign-In | Enables login via Google accounts. |  |
|
| State Management | Flutter BLoC | A predictable state management library that helps implement the BLoC design pattern. |  |
| Hydrated BLoC | hydrated_bloc exports a Storage interface which means it can work with any storage provider. Out of the box, it comes with its own implementation: HydratedStorage. |  |
|
| Equatable | A Dart package that helps to implement value based equality without needing to explicitly override == and hashCode. |  |
|
| Support State Management | dartz | Dartz is a functional programming (FP) library for Dart, providing immutable data structures, type classes, monads, and tools inspired by Haskell. |  |
| Dependency Injection | Get It | Get It - Simple direct Service Locator that allows to decouple the interface from a concrete implementation and to access the concrete implementation from everywhere in your App. |  |
| Database & Storage | Cloud Firestore | Provides a NoSQL real-time database. | |
| Shared Preferences | Wraps platform-specific persistent storage for simple data (NSUserDefaults on iOS and macOS, SharedPreferences on Android, etc.). Data may be persisted to disk asynchronously, and there is no guarantee that writes will be persisted to disk after returning, so this plugin must not be used for storing critical data. | |
|
| Sqflite | Local SQLite database for persistent data. |  |
|
| Networking & API | Dio | A powerful HTTP client for Dart and Flutter, which supports global settings, Interceptors, FormData, aborting and canceling a request, files uploading and downloading, requests timeout, custom adapters, etc. |  |
| Retrofit | retrofit.dart is an dio client generator using source_gen and inspired by Chopper and Retrofit. |  |
|
| UI & Effects | Flutter SVG | Draw SVG files and Render SVG images in Flutter. | |
| Shimmer | A package provides an easy way to add shimmer effect in Flutter project by Vietnamese Developer. |  |
|
| Carousel Slider | A flutter carousel widget, support infinite scroll, and custom child widget.. |  |
|
| Dotted Border | A Flutter package to easily add dashed borders around widgets. |  |
|
| Code Generation | Json Serializable | Generates utilities to aid in serializing to/from JSON. | |
| Freezed | Code generation for immutable classes that has a simple syntax/API without compromising on the features. |  |
|
| retrofit_generator | retrofit.dart is an dio client generator using source_gen and inspired by Chopper and Retrofit. | |
|
| Navigation | Go Router | A declarative routing package for Flutter that uses the Router API to provide a convenient, url-based API for navigating between different screens. You can define URL patterns, navigate using a URL, handle deep links, and a number of other navigation-related scenarios. | |
| Video & Multimedia | YouTube Player Flutter | A Flutter plugin for inline playback or streaming of YouTube videos using the official iFrame Player API. |  |
| Google Maps | Google Maps Flutter | A Flutter plugin that provides a Google Maps widget. Displays Cinema locations on maps. | |
| App Icons | Flutter Launcher Icons | A package which simplifies the task of updating your Flutter app's launcher icon. Fully flexible, allowing you to choose what platform you wish to update the launcher icon for and if you want, the option to keep your old launcher icon in case you want to revert back sometime in the future. | |
This stack ensures Cinema Booking is well-optimized for scalability, seamless API integration, and an excellent user experience.
Following a standard approach to mobile development, I designed a simple high-level architecture for the application.
It describes how the data tables in the cinema system are linked together, including entities such as User, Booking, Movies, Cinema, Show Time, Seats and the relationships between them.
Since it may be updated less frequently than the Draw.io file, it would be better for you to read the drawing file instead. 😊
The project follows a Clean Architecture approach combined with BLoC (Business Logic Component) for efficient state management.
This structure ensures scalability, testability, and maintainability, making it easier to develop and expand the app over time 🔄.
├───common # Shared utilities and reusable components
│ ├───bloc # Global state management using BLoC
│ │ ├───authentication # Authentication BLoC (for Know has login before)
│ │ └───theme # Theme management BLoC
│ ├───helpers # Helper functions and utilities
│ └───widgets # Reusable Custom UI components
│ ├───appbar
│ ├───button
│ ├───footer
│ ├─── ...
├───core # Core functionality and configurations
│ ├───api # API-related functionalities
│ ├───configs # Application-wide configurations
│ │ ├───assets # Asset management
│ │ └───theme # Theme settings (Color font)
│ ├───constants # Constant values
│ ├───enum # Enum definitions
│ ├───local # Local storage management
│ └───usecase
├───data # Data layer (models, repositories, data sources)
│ ├───models # Data models (DTO)
│ │ ├───auth
│ │ ├───booking
│ │ ├───cast
│ │ ├───cinema
│ │ ├─── ...
│ ├───repository # Repository layer for data fetching
│ │ ├───all_movie
│ │ ├───auth
│ │ ├───authentication
│ │ ├─── ...
│ └───sources # Data sources (API, local storage, etc.)
│ ├───all_movie
│ ├───auth
│ ├───authentication
│ ├─── ...
├───domain # Domain layer (business logic, entities, use cases)
│ ├───entities # Core business entities ()
│ │ ├───auth
│ │ ├───booking
│ │ ├───cast
│ │ ├───cinema
│ │ ├─── ...
│ ├───repository # Abstract repository interfaces
│ │ ├───all_movie
│ │ ├───auth
│ │ ├───authentication
│ │ ├─── ...
│ │ └───tickets
│ └───usecase # Business logic use cases
│ ├───all_movie
│ ├───authentication
│ ├───booking_time
│ ├─── ...
└───presentation # Presentation layer (UI and state management)
├───about_page # About screen
│ ├───bloc # BLoC for About page
│ └───widgets # UI components
├───all_movies
│ ├───bloc
│ └───widgets
├───all_tickets
├───booking
│ ├───booking_seat_slot
│ ├───booking_seat_type
│ ├───booking_time_slot
│ └───model
├───home
├───intro
├───login
├───movie_detail
├───register
├───splash
It is a side project that I only spent time outside of the office hours to work on. also i spent 5 hours on this README :))
According to the WakaTime report, I've spent at least 120 hours on this project. That's equivalent to binge-watching an entire season of a TV show... or staring at the screen, debugging, and wondering why it works on my machine but not theirs. 😂
I really enjoyed working on this project. I hope it will bring a lot of value to early Flutter Developers.
| on Window Machine | On Macbook Machine |
|---|---|
 |
 |
- Young software engineer - học căng chơi giỏi. Working with Flutter and Java. Like photography, amateur filmmaker and reading books.
- Card visit: https://chunhthanhde.github.io/card
- Personal blog: https://chunhthanhde.hashnode.dev/
- Say hello: [email protected]
If you have any ideas, just pen an issue and tell me what you think.
If you'd like to contribute, please fork the repository and make changes as you'd like. Pull requests are warmly welcome.
Inspired by KhoaSuperman/findseat
I have reused part of the UI idea and Data Mock from this project.
Feel free to use my code on your project. It would be great if you put a reference to this repository.
