[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-9409":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":17,"stars30d":17,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":18,"rankGlobal":10,"rankLanguage":10,"license":10,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":19,"hasPages":19,"topics":21,"createdAt":10,"pushedAt":10,"updatedAt":33,"readmeContent":34,"aiSummary":35,"trendingCount":16,"starSnapshotCount":16,"syncStatus":36,"lastSyncTime":37,"discoverSource":38},9409,"findseat","KhoaSuperman\u002Ffindseat","KhoaSuperman","A Completed Functional Flutter App - FindSeat (BLoC + Json API + Unit Test + Firebase Auth)","",null,"Dart",1220,361,54,3,0,1,53.28,false,"master",[22,23,24,25,26,27,28,29,30,31,32],"clean-architecture","flutter","flutter-app","flutter-apps","flutter-demo","flutter-example-app","flutter-movie","flutter-movie-app","flutter-ui","flutterbloc","real-world-project","2026-06-12 04:00:44","# A Completed Functional Flutter App - FindSeat (BLoC + Json API + Unit Test + Firebase Auth)\n\n![Banner](https:\u002F\u002Fraw.githubusercontent.com\u002FKhoaSuperman\u002Ffindseat\u002Fapply_bloc\u002Fsample_data\u002Fgithub_screenshots\u002FYoutubeBanner_v2_medium.png)\n\n## I. Introduction\nI’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.\nThat 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.\n\nThe 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.\n\n[Check Video Demo](https:\u002F\u002Fyoutu.be\u002FcxUiyI4h2Ug)\n\n## II. Showcase\n#### 2.1. Home\nIn Home screen, it just simply load then show data to UI. What you can try\n###### 2.1.1. Screen: Home 1\n![Home_1](https:\u002F\u002Fraw.githubusercontent.com\u002FKhoaSuperman\u002Ffindseat\u002Fapply_bloc\u002Fsample_data\u002Fgithub_screenshots\u002FHome_1.png)\n- (0) is about me :D\n- (1) is carousel slider for displaying banners, it’s automatically animate each 1 second. You can swipe left or right to see next\u002Fprevious item\n- (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\n- (3) is recommended seats. Click on item app will open Show details screen\n###### 2.1.2. Screen: Home 2\n![Home_2](https:\u002F\u002Fraw.githubusercontent.com\u002FKhoaSuperman\u002Ffindseat\u002Fapply_bloc\u002Fsample_data\u002Fgithub_screenshots\u002FHome_2.png)\n- (4) is nearby theatres. There’s nothing special to try here, it’s just simple map with highlighted cine’s locations\n- (5) (6) is list shows by each category. Same with recommended seats, you can click on item to open Show details screen\n#### 2.2. All Shows\n###### 2.2.1. Screen: All Shows 1\n![AllShows_1](https:\u002F\u002Fraw.githubusercontent.com\u002FKhoaSuperman\u002Ffindseat\u002Fapply_bloc\u002Fsample_data\u002Fgithub_screenshots\u002FAllShows_1.png)\n- (1) click to open search field. Basically support search by name\n- (2) click to open sort option. Basically support sort by rating and name\n- (3) there’re 3 tabs: Now showing, Coming soon and Exclusive. You can swipe left\u002Fright to view content of each tab\n- (4) Display list show in gridview\n###### 2.2.2. Screen: All Shows 2\n![AllShows_2](https:\u002F\u002Fraw.githubusercontent.com\u002FKhoaSuperman\u002Ffindseat\u002Fapply_bloc\u002Fsample_data\u002Fgithub_screenshots\u002FAllShows_2.png)\n- Sort options dialog\n###### 2.2.3. Screen: All Shows 3\n![AllShows_3](https:\u002F\u002Fraw.githubusercontent.com\u002FKhoaSuperman\u002Ffindseat\u002Fapply_bloc\u002Fsample_data\u002Fgithub_screenshots\u002FAllShows_3.png)\n- App will perform search after stop typing for 400 milliseconds, technically it’s debounce technique.\nTry to click on item, app will open Show details screen\n#### 2.3. Show info\n###### 2.3.1. Screen: Show Info 1\n![ShowInfo_1](https:\u002F\u002Fraw.githubusercontent.com\u002FKhoaSuperman\u002Ffindseat\u002Fapply_bloc\u002Fsample_data\u002Fgithub_screenshots\u002FShowInfo_1.png)\n- (1) is trailer of show from Youtube link\n- (2) show’s description\n- (3) is offer section. This is not static content, it can be changed in mock API\n###### 2.3.2. Screen: Show Info 2\n![ShowInfo_2](https:\u002F\u002Fraw.githubusercontent.com\u002FKhoaSuperman\u002Ffindseat\u002Fapply_bloc\u002Fsample_data\u002Fgithub_screenshots\u002FShowInfo_2.png)\n- (4) is user’s review section. Basically write review function is not available yet\n- (5) is casts section. It’s horizontal listview, you can swipe to reach more content.\n- (6) Click Book seats then app will open Book Time Slot screen\n#### 2.4. Book Time Slot\n###### 2.4.1. Screen: Book Time Slot 1\n![BookTimeSlot_1](https:\u002F\u002Fraw.githubusercontent.com\u002FKhoaSuperman\u002Ffindseat\u002Fapply_bloc\u002Fsample_data\u002Fgithub_screenshots\u002FBookTimeSlot_1.png)\n- (1) Click to open search field. Basically support search by Cine’s name\n- (2) List cine with time slots. Gray item is time slot that is not available.\n###### 2.4.2. Screen: Book Time Slot 2\n![BookTimeSlot_2](https:\u002F\u002Fraw.githubusercontent.com\u002FKhoaSuperman\u002Ffindseat\u002Fapply_bloc\u002Fsample_data\u002Fgithub_screenshots\u002FBookTimeSlot_2.png)\n- App will perform search after stop typing for 400 milliseconds, technically it’s debounce technique.\nClick on item time slot, app will open Book Seat Type screen.\n#### 2.5. Book Seat Type\n![BookSeatType](https:\u002F\u002Fraw.githubusercontent.com\u002FKhoaSuperman\u002Ffindseat\u002Fapply_bloc\u002Fsample_data\u002Fgithub_screenshots\u002FBookSeatType_1.png)\n- (1) choose number of seats\n- (2) choose seat type\n#### 2.6. Book Seat Slot\n![BookSeatSlot](https:\u002F\u002Fraw.githubusercontent.com\u002FKhoaSuperman\u002Ffindseat\u002Fapply_bloc\u002Fsample_data\u002Fgithub_screenshots\u002FBookSeatSlot_1.png)\n- (1) is count of number booked seats\n- (2) Booked seats. You can click to select then click again to deselect seat.\n- Validate: For example in screen Book Seat Type you chosen 3 seats, type is Jack that mean\n  - You cannot select Queen or King seat\n  - You cannot book more than 3 seats\n#### 2.7. Make payment\n###### 2.7.1. Screen: Make payment 1\n![MakePayment_1](https:\u002F\u002Fraw.githubusercontent.com\u002FKhoaSuperman\u002Ffindseat\u002Fapply_bloc\u002Fsample_data\u002Fgithub_screenshots\u002FMakePayment_1.png)\n- App integrated with Stripe SDK, currently for testing when you click on any method Debit\u002FUDI\u002FNet banking, app only show option pay by input card to the form.\n\n###### 2.7.2. Screen: Make payment 2\n![MakePayment_2](https:\u002F\u002Fraw.githubusercontent.com\u002FKhoaSuperman\u002Ffindseat\u002Fapply_bloc\u002Fsample_data\u002Fgithub_screenshots\u002FMakePayment_2.png)\n- For testing, please use following information:\n  - Card number: 4242 4242 4242 4242\n  - Expiration date: 04\u002F24\n  - CVC: 424 or 242\n###### 2.7.3. Screen: Make payment 3\n![MakePayment_3](https:\u002F\u002Fraw.githubusercontent.com\u002FKhoaSuperman\u002Ffindseat\u002Fapply_bloc\u002Fsample_data\u002Fgithub_screenshots\u002FMakePayment_3.png)\n- After Stripe verified the payment information, app will show your booking information.\n#### 2.8. Login\n![Login](https:\u002F\u002Fraw.githubusercontent.com\u002FKhoaSuperman\u002Ffindseat\u002Fapply_bloc\u002Fsample_data\u002Fgithub_screenshots\u002FLogin_1.png)\n- Basically app provide login by user’s email and password. Login by Google and Facebook will be available soon.\n- Test account: khoaha+dev2@mailinator.com \u002F 123456\n#### 2.9. Register\n![Register](https:\u002F\u002Fraw.githubusercontent.com\u002FKhoaSuperman\u002Ffindseat\u002Fapply_bloc\u002Fsample_data\u002Fgithub_screenshots\u002FRegister_1.png)\n- I did validation in this form using Bloc pattern, you can look at this to study how to do form validation in Bloc.\n\n## III. Mock API\nhttps:\u002F\u002Finteger.sgp1.digitaloceanspaces.com\u002Ffindseat\n\nAPI | Usage\n------------ | -------------\n\u002Fhome.json | Return data for Home screen\n\u002Fall_shows_by_type.json | Return data for All Shows screen\n\u002Fbooking_time_slot_by_cine.json | Return data for Book Time Slot screen\n\u002Fbook_seat_slot_by_time_slot.json | Return data for Book Seat Slot screen\n\n## IV. Plugins\nPlugin | Usage\n------------ | -------------\n[retrofit](https:\u002F\u002Fpub.dev\u002Fpackages\u002Fretrofit#-readme-tab-) | For working with restful API, generated model\n[json_annotation](https:\u002F\u002Fpub.dev\u002Fpackages\u002Fjson_annotation#-readme-tab-) | Same as above (SAA)\n[dio](https:\u002F\u002Fpub.dev\u002Fpackages\u002Fdio) | SAA\n[build_runner](http:\u002F\u002Fbuild_runner) | SAA\n[flutter_bloc](https:\u002F\u002Fpub.dev\u002Fpackages\u002Fflutter_bloc) | For build app architecture\n[carousel_slider](https:\u002F\u002Fpub.dev\u002Fpackages\u002Fcarousel_slider#-readme-tab-) | Use for section banner in Home screen\n[freezed](https:\u002F\u002Fpub.dev\u002Fpackages\u002Ffreezed) | Working with State of bloc\n[equatable](https:\u002F\u002Fpub.dev\u002Fpackages\u002Fequatable) | SAA\n[meta](https:\u002F\u002Fpub.dev\u002Fpackages\u002Fmeta) | SAA\n[intl](https:\u002F\u002Fpub.dev\u002Fpackages\u002Fintl) | Format date time and other formats\n[youtube_player_flutter](https:\u002F\u002Fpub.dev\u002Fpackages\u002Fyoutube_player_flutter) | Display trailer from Youtube link\n[shared_preferences](https:\u002F\u002Fpub.dev\u002Fpackages\u002Fshared_preferences) | For caching user’s session\n[flutter_svg](https:\u002F\u002Fpub.dev\u002Fpackages\u002Fshared_preferences) | Display svg icon\n[google_maps_flutter](https:\u002F\u002Fpub.dev\u002Fpackages\u002Fgoogle_maps_flutter) | Display address of cine\n[dotted_border](https:\u002F\u002Fpub.dev\u002Fpackages\u002Fdotted_border) | Display dot border of offer ticket in Show details screen\n[shimmer](https:\u002F\u002Fpub.dev\u002Fpackages\u002Fshimmer) | Animate image place holder\n[stripe_payment](https:\u002F\u002Fpub.dev\u002Fpackages\u002Fstripe_payment) | Use in booking feature\n[firebase_core](https:\u002F\u002Fpub.dev\u002Fpackages\u002Ffirebase_core) | For register account and login using Firebase\n[google_sign_in](https:\u002F\u002Fpub.dev\u002Fpackages\u002Fgoogle_sign_in) | SAA\n[firebase_auth](https:\u002F\u002Fpub.dev\u002Fpackages\u002Ffirebase_auth) | SAA\n[test](https:\u002F\u002Fpub.dev\u002Fpackages\u002Ftest) | Try to use unit testing, most of the cases come from Bloc\n[bloc_test](https:\u002F\u002Fpub.dev\u002Fpackages\u002Fbloc_test) | SAA\n\n## V. Design credit\n##### Author: [Dinu Dinesh](https:\u002F\u002Fwww.uplabs.com\u002Fgetdineshonline)\n##### Design link: [Movie & events ticket booking app](https:\u002F\u002Fwww.uplabs.com\u002Fposts\u002Fmovie-events-ticket-booking-app)\n\n## Development Environment\n`flutter doctor -v`\n```\n[√] Flutter (Channel stable, 2.8.1, on Microsoft Windows [Version 10.0.19043.1586], locale en-US)\n    • Flutter version 2.8.1 at C:\\src\\flutter\n    • Upstream repository https:\u002F\u002Fgithub.com\u002Fflutter\u002Fflutter.git\n    • Framework revision 77d935af4d (3 months ago), 2021-12-16 08:37:33 -0800\n    • Engine revision 890a5fca2e\n    • Dart version 2.15.1\n\n[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)\n    • Android SDK at C:\\Users\\ASUS\\AppData\\Local\\Android\\sdk\n    X cmdline-tools component is missing\n      Run `path\u002Fto\u002Fsdkmanager --install \"cmdline-tools;latest\"`\n      See https:\u002F\u002Fdeveloper.android.com\u002Fstudio\u002Fcommand-line for more details.\n    X Android license status unknown.\n      Run `flutter doctor --android-licenses` to accept the SDK licenses.\n      See https:\u002F\u002Fflutter.dev\u002Fdocs\u002Fget-started\u002Finstall\u002Fwindows#android-setup for more details.\n\n[√] Chrome - develop for the web\n    • Chrome at C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe\n\n[√] Android Studio (version 3.1)\n    • Android Studio at C:\\Program Files\\Android\\Android Studio\n    • Flutter plugin version 29.0.1\n    • Dart plugin version 173.4700\n    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1024-b02)\n\n[√] Android Studio (version 3.5)\n    • Android Studio at C:\\Program Files\\Android\\android-studio\n    • Flutter plugin version 42.1.1\n    • Dart plugin version 191.8593\n    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)\n\n[√] Android Studio (version 3.6)\n    • Android Studio at C:\\Program Files\\Android\\AS33\n    • Flutter plugin version 49.0.1\n    • Dart plugin version 192.8052\n    • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b04)\n\n[√] IntelliJ IDEA Community Edition (version 2020.3)\n    • IntelliJ at C:\\Program Files\\JetBrains\\IntelliJ IDEA Community Edition 2020.3.1\n    • Flutter plugin can be installed from:\n       https:\u002F\u002Fplugins.jetbrains.com\u002Fplugin\u002F9212-flutter\n    • Dart plugin can be installed from:\n       https:\u002F\u002Fplugins.jetbrains.com\u002Fplugin\u002F6351-dart\n\n[√] IntelliJ IDEA Ultimate Edition (version 2021.1)\n    • IntelliJ at C:\\Program Files\\JetBrains\\IntelliJ IDEA 2021.1\n    • Flutter plugin can be installed from:\n       https:\u002F\u002Fplugins.jetbrains.com\u002Fplugin\u002F9212-flutter\n    • Dart plugin can be installed from:\n       https:\u002F\u002Fplugins.jetbrains.com\u002Fplugin\u002F6351-dart\n\n[√] VS Code (version 1.65.0)\n    • VS Code at C:\\Users\\ASUS\\AppData\\Local\\Programs\\Microsoft VS Code\n    • Flutter extension can be installed from:\n       https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=Dart-Code.flutter\n\n[√] Connected device (3 available)\n    • sdk gphone x86 (mobile) • emulator-5554 • android-x86    • Android 11 (API 30) (emulator)\n    • Chrome (web)            • chrome        • web-javascript • Google Chrome 99.0.4844.74\n    • Edge (web)              • edge          • web-javascript • Microsoft Edge 98.0.1108.62\n\n! Doctor found issues in 1 category.\n\n```\n\nBefore run project, execute commands:\n- `flutter clean`\n- `flutter pub get`\n- `flutter pub run build_runner build` or `flutter pub run build_runner build --delete-conflicting-outputs`\n- `flutter run` (if needed)\n\n## Support\n- If you wanna get updates in next version, please give me a ⭐ to the repo 👍\n- If you love my work and want to support, [buy me a coffee here](https:\u002F\u002Fwww.paypal.me\u002Fkhoahoang1012\u002F1). Thank you so much 👍\n\n","FindSeat 是一个使用 Flutter 开发的完整功能应用，主要用于查找和预订电影座位。该项目采用了 BLoC 设计模式来管理状态，并结合了 Json API 和单元测试以确保代码质量和可维护性；同时集成了 Firebase 认证机制保证用户信息安全。其界面友好且响应迅速，包括首页、所有放映、影剧院位置等功能模块。适合希望学习如何构建具有实际用途的 Flutter 应用程序的开发者参考，特别是那些对如何在项目中实施清晰架构、API 交互以及进行有效测试感兴趣的人士。",2,"2026-06-11 03:22:32","top_language"]