mirror of https://github.com/flutter/samples.git
gh-pages
main
flutter3.27
compass-app
jwill_m3_demo
sethladd-patch-3
sethladd-patch-1
sethladd-patch-2
recipe_readme
add_ai_recipe_app
remove_window_size_nav_app
android-builds
startup_cleanup
misc/adjust-flutter-gallery-inclusion
khanh_m3_demo
leigha_m3_demo
add_interactive_color_scheme
update_card_to_card_outlined
navigation-and-routing-update
update_demo_code
master_archived
${ noResults }
2 Commits (415fdbbf1ba8aefab43a6cc9977ae28bce20dede)
Author | SHA1 | Message | Date |
---|---|---|---|
Miguel Beltran |
0c88289339
|
[Compass App] Booking screen (#2380)
This PR adds the Booking screen at the end of the main app flow. After the user selects `Activity`s, these get stored in the `ItineraryConfig` and then the user navigates to the `BookingScreen`. In the `BookingScreen`, a `Booking` is generated with the `BookingCreateComponent`. This component communicates with multiple repositories, and it is a bit more complex than the average view model, something that we want to show as discussed in the previous PRs. <details> <summary>Screenshots</summary> ![image](https://github.com/user-attachments/assets/6a9d8d5b-0d2c-4724-8aca-d750186651b7) ![image](https://github.com/user-attachments/assets/0ef4d00e-e67b-4ec6-9ea3-28511ed4c2b8) </details> In the `BookingScreen`, the user can tap on "share trip" which displays the OS share sheet functionality. This uses the plugin `share_plus`, but the functionality is also wrapped in the `BookingShareComponent`, which takes a `Booking` object and creates a shareable string, then calls to the `Share.share()` method from `share_plus`. But the `share_plus` dependency is also injected into the `BookingShareComponent`, allowing us to unit test without plugin dependencies. This is an example of a shared booking to instant messaging: ![image](https://github.com/user-attachments/assets/5a559080-4f9a-45e6-a736-ab849a7adc39) **TODO** - I want to take a look at the whole experience on mobile, as I noticed some inconsistent UI and navigation issues that I couldn't see on Desktop. I will submit those in a new PR. - We also talked about user authentication in the design document. I will work on that once we are happy with the main app flow. ## Pre-launch Checklist - [x] I read the [Flutter Style Guide] _recently_, and have followed its advice. - [x] I signed the [CLA]. - [x] I read the [Contributors Guide]. - [x] I updated/added relevant documentation (doc comments with `///`). - [x] All existing and new tests are passing. If you need help, consider asking for advice on the #hackers-devrel channel on [Discord]. <!-- Links --> [Flutter Style Guide]: https://github.com/flutter/flutter/blob/master/docs/contributing/Style-guide-for-Flutter-repo.md [CLA]: https://cla.developers.google.com/ [Discord]: https://github.com/flutter/flutter/blob/master/docs/contributing/Chat.md [Contributors Guide]: https://github.com/flutter/samples/blob/main/CONTRIBUTING.md |
3 months ago |
Miguel Beltran |
cfedff5a5c
|
Create compass-app first feature (#2342)
As part of the work for the compass-app / architecture examples This PR is considerably large, so apologies for that, but as it contains the first feature there is a lot of set up work involved. Could be easier to review by opening the project on the IDE. **Merge to `compass-app` not `main`** cc. @ericwindmill ### Details #### Folder structure The project follows this folder structure: - `lib/config/`: Put here any configuration files. - `lib/config/dependencies.dart`: Configures the dependency tree (i.e. Provider) - `lib/data/models/`: Data classes - `lib/data/repositories/`: Data repositories - `lib/data/services/`: Data services (e.g. network API client) - `lib/routing`: Everything related to navigation (could be moved to `common`) - `lib/ui/core/themes`: several theming classes are here: colors, text styles and the app theme. - `lib/ui/core/ui`: widget components to use across the app - `lib/ui/<feature>/view_models`: ViewModels for the feature. - `lib/ui/<feature>/widgets`: Widgets for the feature. Unit tests also follow the same structure. #### State Management Most importantly, the project uses MVVM approach using `ChangeNotifier` with the help of Provider. This could be implemented without Provider or using any other way to inject the VM into the UI classes. #### Architecture approach - Data follows a unidirectional flow from Repository -> Usecase -> ViewModel -> Widgets -> User. - The provided data Repository is using local data from the `assets` folder, an abstract class is provided to hide this implementation detail to the Usecase, and also to allow multiple implementations in the future. ### Screenshots ![image](https://github.com/flutter/samples/assets/2494376/64c08c73-1f2c-4edd-82f6-3c9065f5995f) ### Extra notes: - Moved the app code to the `app` folder. We need to create a `server` project eventually. ### TODO: - Integrate a logging framework instead of using `print()`. - Do proper error handling. - Improve image loading and caching. - Complete tests with edge-cases and errors. - Better Desktop UI. ## Pre-launch Checklist - [x] I read the [Flutter Style Guide] _recently_, and have followed its advice. - [x] I signed the [CLA]. - [x] I read the [Contributors Guide]. - [x] I updated/added relevant documentation (doc comments with `///`). - [x] All existing and new tests are passing. If you need help, consider asking for advice on the #hackers-devrel channel on [Discord]. <!-- Links --> [Flutter Style Guide]: https://github.com/flutter/flutter/blob/master/docs/contributing/Style-guide-for-Flutter-repo.md [CLA]: https://cla.developers.google.com/ [Discord]: https://github.com/flutter/flutter/blob/master/docs/contributing/Chat.md [Contributors Guide]: https://github.com/flutter/samples/blob/main/CONTRIBUTING.md |
4 months ago |