├── Flutter-developer-roadmap-header-image (1).jpeg ├── FlutterCodeReviewGuideline.md ├── GitGuideline.md ├── MRSubmissionChecklist.md └── README.md /Flutter-developer-roadmap-header-image (1).jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canopas/flutter-developer-roadmap-2023/70bf63559365e6194d8a6157c409b234de005aa5/Flutter-developer-roadmap-header-image (1).jpeg -------------------------------------------------------------------------------- /FlutterCodeReviewGuideline.md: -------------------------------------------------------------------------------- 1 | The following aspects are considered to ensure good quality and high performance deliverables 2 | 3 | ### Naming conventions followed 4 | * Classes, enums, typedefs, and extensions name should in UpperCamelCase 5 | * Libraries, packages, directories, and source files name should be in snake_case(lowercase_with_underscores) 6 | * Variables, constants, parameters, and named parameters should be in lowerCamelCase. 7 | * Proper meaningful names should be followed. 8 | * Private variables names preceded with underscores 9 | 10 | ### Proper folder structure followed 11 | * Segregation of code into a proper folder structure namely providers, models, screens/pages, utils. 12 | * Code is properly formatted with trailing commas used appropriately. 13 | * Adequate comments added for documentation. 14 | * Try to make code reusable with help of helper functions in utility files saved in the utils folder. 15 | * Widgets should also be designed to be reusable and can be saved in a widgets folder separately. 16 | * Avoiding static/hard coded strings in the UI screens. Constants should be derived from a single place including color codes, validation messages etc. all saved in the constants file. 17 | 18 | ### Widget structure and usage 19 | * When working with infinite lists or very large lists, ListView builder is used in order to improve performance 20 | * Split the widget into different Widgets. 21 | * When setState() is called on a State, all descendent widgets will rebuild. Therefore, Split widget into small widgets so the setState() call rebuilds only the part of the subtree, whose UI actually needs to change. 22 | 23 | ### Follow Linting rules 24 | * Use Const in Widgets 25 | * You can cache parts of your widget tree to prevent unnecessary rebuilds. 26 | * The easiest way is to use dart const constructors for parts of the child tree whichwill not change. The widget which will not change when setState is called, we should define it as 27 | 28 | ### Check for boundary cases and handle layout overflows properly 29 | * The widgets should take care of responsiveness of the application. 30 | * Use of widgets which will handle screen overflows like Expanded to avoid overflow errors. 31 | 32 | ### Build method structure 33 | * The build method should be pure, without any side effects. This is because, it may be triggered by many external factors, such as: 34 | - Route pop/push, 35 | - Screen resize, usually due to keyboard appearance or orientation change 36 | - Parent widget recreated its child 37 | - An InheritedWidget the widget depends on (Class.of(context) pattern) change 38 | * The build method should not have any logic to trigger an http call or modify any state. 39 | 40 | ### Using Third party packages 41 | * Validate any third party package being used in the application as sometimes it might break the build or not be in sync with the current flutter version. This is especially required when you are upgrading flutter, so make sure to check all your plugins and third party packages after upgrade. 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /GitGuideline.md: -------------------------------------------------------------------------------- 1 | # Git Guideline 2 | 3 | 4 | ## Commit Message Guidelines 5 | ### Information in commit messages 6 | - Describe why a change is being made. 7 | - How does it address the issue? 8 | - Do not assume the reviewer understands what the original problem was. 9 | - Do not assume the code is self-evident/self-documenting. 10 | 11 | ### Rules of a great Git commit message 12 | - Capitalize the commit message 13 | - This is as simple as it sounds. Begin all subject lines with a capital letter. 14 | - **For example:** ```Fix typo in User model``` 15 | - **Instead of:** ```fix typo in user model``` 16 | - Do not end the subject line with a period 17 | - Trailing punctuation is unnecessary in subject lines. 18 | - **For example:** ```Refactor error handling``` 19 | - **Instead of:** ```Refactor error handling.``` 20 | - Describe what was done 21 | - Don't write a git commit subject line that talks about what you did, or what you are doing. 22 | - For Example: 23 | - ```Fixed onboard page swipe crash``` -- Don't 24 | - ```Fixing onboard page swipe crash``` -- Don't 25 | - ```Fix onboard page swipe crash``` -- Do 26 | - A properly formed Git commit subject line should always be able to complete the following sentence: 27 | - If applied, this commit will **_your subject line here_**: 28 | - If applied, this commit will ```fix onboard page swipe crash``` 29 | - If applied, this commit will ```remove deprecated methods``` 30 | - Notice how this doesn’t work for the other non-imperative forms: 31 | - If applied, this commit will *~~fixing onboard page swipe crash~~* 32 | - If applied, this commit will *~~removed deprecated methods~~* 33 | 34 | - The commit body must not contain more than 72 characters per line. 35 | - The commit subject or body must not contain Emojis. 36 | 37 | 38 | ## MR Guidelines 39 | - The change is as small as possible. 40 | - The MR must include Before and After screenshots if UI changes are made. 41 | - Clear title and description explaining the relevancy of the contribution. 42 | - Description includes any steps or setup required to ensure reviewers can view the changes you’ve made (for example, include any information about feature flags). 43 | - Always review code before committing it 44 | - Name your sub branches by convention 45 | - Use a consistent naming convention for your feature branches to identify the work done in the branch. 46 | - These are all good branch names: 47 | ``` - fix-onboard-screen-crash 48 | - add-author-profile 49 | - feature/app-analytics 50 | - bug/profile-button-editing 51 | -------------------------------------------------------------------------------- /MRSubmissionChecklist.md: -------------------------------------------------------------------------------- 1 | # MR submission Checklist 2 | Before submitting a merge request for review, it is important to ensure that your MR adheres to the following checklist. 3 | 4 | - [ ] 1. Self-review the code: Ensure you have thoroughly reviewed the code yourself and addressed any issues or improvements. 5 | - [ ] 2. MR satisfies all specified requirements in the ticket, including bug fixes and new features. 6 | - [ ] 3. MR description includes the purpose of the MR, relevant ticket(s), and a summary of changes made. 7 | - [ ] 4. Provide test steps: Include steps to reproduce the issue or test the new functionality, ensuring other team members can verify the changes. 8 | - [ ] 5. Adhere to MVVM (or other defined) architecture patterns. 9 | - [ ] 6. Avoid code duplication: Reuse components when possible and avoid duplicating code across the codebase. 10 | - [ ] 7. Follow Dart naming conventions: Ensure proper naming conventions are used for variables, classes, and methods. 11 | - [ ] 8. Localizes user-facing strings 12 | - [ ] 9. Includes screenshots/videos of behavior changes: Provide visual evidence of any changes to UI or behavior for easier review and understanding. 13 | - [ ] 10. Formats code correctly & removes commented code 14 | - [ ] 11. Implements proper error handling: Ensure that the code anticipates and handles potential errors and edge cases gracefully. 15 | - [ ] 12. Avoids introducing technical debt: If the PR introduces technical debt, create and link appropriate tickets for future resolution. 16 | - [ ] 13. Includes relevant unit tests: Write unit tests that focus on testing behavior and functionality, rather than merely covering lines of code. 17 | - [ ] 14. Ensures code is performant and scalable: Verify that the changes do not introduce performance issues or bottlenecks, and can scale as needed. 18 | - [ ] 15. Comments are up-to-date and relevant to the code to describe complex logic and to add understanding for other developers. 19 | - [ ] 16. Make sure to address any issues flagged by the linter before submitting the code for MR review. 20 | - [ ] 17. Segregation of code into a proper folder structure namely providers, models, screens/pages, utils. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

Flutter Developer Roadmap 2024

2 | 3 | ![alt text](https://github.com/canopas/flutter-developer-roadmap-2023/blob/main/Flutter-developer-roadmap-header-image%20(1).jpeg) 4 | 5 | The Flutter Developer Roadmap 2023 includes **Practical exercises** that cover all the essential concepts used in day-to-day development. 6 | # Guidelines 7 | 8 | - Before starting any practical it's important to conduct research and learn the necessary concepts. 9 | 10 | - As you progress through the practical exercises, make sure to apply the new knowledge you've gained in subsequent exercises. Try to allocate a maximum 5 days to each practical. 11 | 12 | 13 | # Table of contents 14 | * [Useful References](https://github.com/canopas/flutter-developer-roadmap-2023/blob/main/README.md#useful-references) 15 | * [Material Component](https://github.com/canopas/flutter-developer-roadmap-2023/blob/main/README.md#material-component) 16 | * [Navigation and Routing](https://github.com/canopas/flutter-developer-roadmap-2023/blob/main/README.md#navigation-and-routing) 17 | * [Networking](https://github.com/canopas/flutter-developer-roadmap-2023/blob/main/README.md#networking) 18 | * [State management](https://github.com/canopas/flutter-developer-roadmap-2023/blob/main/README.md#state-management) 19 | * [Depenedency Injection](https://github.com/canopas/flutter-developer-roadmap-2023/blob/main/README.md#depenedency-injection) 20 | * [Local Storage](https://github.com/canopas/flutter-developer-roadmap-2023/blob/main/README.md#local-storage) 21 | * [Stream](https://github.com/canopas/flutter-developer-roadmap-2023/blob/main/README.md#streams) 22 | * [Firestore Database](https://github.com/canopas/flutter-developer-roadmap-2023/blob/main/README.md#firestore-database) 23 | 24 | 25 | ## Useful References 26 | The references provided are aimed at individuals who have no prior knowledge or experience in developing Flutter apps. They serve as a starting point for beginners in the field, providing basic knowledge that is necessary before diving into Flutter development. 27 | If you already have knowledge and experience in Flutter development, you may not need to refer to the provided resources. 28 | * [Set up Flutter Environment](https://docs.flutter.dev/get-started/install) 29 | * [Dart Language](https://dart.dev/language) 30 | * [Version control with Git](https://www.udacity.com/course/version-control-with-git--ud123) 31 | * [Layout in Flutter](https://docs.flutter.dev/ui/layout#1-select-a-layout-widget) 32 | * [Stateful and Stateless widget](https://docs.flutter.dev/ui/interactive#stateful-and-stateless-widgets) 33 | * [State management approaches in Flutter](https://docs.flutter.dev/data-and-backend/state-mgmt/options) 34 | * [Networking](https://docs.flutter.dev/data-and-backend/networking) 35 | * [Asynchronous programming](https://dart.dev/codelabs/async-await) 36 | * [App architecture in Flutter](https://codewithandrea.com/articles/comparison-flutter-app-architectures/) 37 | 38 | 39 | # Material Component 40 | 41 | ### Practical 1 42 | #### Design a fitness app 43 | * Create a Flutter application and Design [Static UI](https://dribbble.com/shots/21236904-Fitness-App-Design). 44 | * Ensure the app's UI is responsive and adapts smoothly to different screen sizes and resolutions. 45 | * Use Flutter's Materials Design 3 to enhance your design process. 46 | 47 | ### Practical 2 48 | #### Develop a News application 49 | * Home Screen Layout: 50 | - The home screen should include a toolbar, a floating button, and a section to display news content. 51 | - Use dummy text and images for the news articles. 52 | - Toolbar Behavior: 53 | - Initially, the toolbar should display the app's logo and title. 54 | - As the user scrolls down to read the news, the toolbar should collapse, allowing more space for content. 55 | - When the user scrolls back up, the toolbar should expand again, showing the logo and title. 56 | - Floating Button Animation: 57 | - Implement an animation for the floating button similar to the example provided [here](https://dribbble.com/shots/3541588-Play-Button-Microinteraction). 58 | - The button should animate as the user scrolls down and up. 59 | * Use eye-catching images or placeholders for the news content. 60 | * Here's [UI for reference](https://cdn.dribbble.com/users/663782/screenshots/3742414/media/67464fde751beb373b4c6fa962edf718.gif). 61 | 62 | ### Practical 3 63 | #### Implement Survey application 64 | * Home Screen Layout: 65 | - Display a survey form with the following elements: 66 | - A question. 67 | - Four options for each question. 68 | - A button to proceed to the next question. 69 | * Use a PageView to display questions, allowing users to swipe or use the next button to navigate between questions. 70 | * Track progress as the user answers each question, visually indicating the completion status. 71 | * Survey Completion: 72 | - Once the user completes the survey, show a pop-up message thanking them. 73 | * Include at least three questions, each with four options, related to the user's shopping experience. 74 | * Use eye-catching images or placeholders for the news content. 75 | * Here's [UI for reference](https://cubicleninjas.com/wp-content/uploads/2021/01/NA-2021-Web-Questionnaire-3.jpg) 76 | 77 | ### Practical 4 78 | #### Fitness Journal 79 | * Develop an app for users to track their fitness activities. 80 | * Use TextFields to allow users to input the details for their workout type(e.g., running, cycling, etc), duration, date, and notes. 81 | * Show all entered workout entries on the home screen in a list. 82 | * Provide options to filter workout entries b by date, type, duration 83 | 84 | 85 | # Navigation and Routing 86 | 87 | ### Practical 5 88 | #### Implement LeaveTracker App 89 | Create a LeaveTracker application with two screens—Home and Apply-Leave. 90 | * Home Screen: 91 | - Implement the UI based on the provided reference. 92 | - Use a dummy image for the person. 93 | - Add a Floating Action Button (FAB) on the screen. 94 | - On tapping the FAB, navigate the user to the Apply-Leave screen. 95 | * Apply-Leave Screen: 96 | - Create a form with `TextFields` for the user to input: 97 | - Start date of the leave. 98 | - End date of the leave. 99 | - Reason for the leave. 100 | - Add a button to apply for leave. On tapping this button, the user should navigate back to the home screen. 101 | * Show the applied leave details on the home screen after the user submits the form. 102 | * The app should be responsive to different resolutions. 103 | * Use eye-catching images or placeholders for the UI content. 104 | * Here's [UI for reference](https://github.com/canopas/flutter-developer-roadmap-2023/files/11687291/leaveTracher_ui.zip). 105 | 106 | 107 | ### Practical 6 108 | #### SnapCam App 109 | Create an application where users can preview the camera feed, capture images, and save them to the device's gallery. 110 | * Home Screen: 111 | - Show Camera preview 112 | - Add a button to capture an image. 113 | - Add a button to show the captured image preview. 114 | - Include a save button on the toolbar to save the captured image to the device's gallery. 115 | * Preview Screen: 116 | - Show the captured image in fullscreen. 117 | - Add a button to go back to the camera screen. 118 | 119 | 120 | ### Practical 7 121 | #### Implement Navigation for a Messaging application 122 | Create a messaging application with onboard, sign-in, and home screens. 123 | * Onboard Screen: 124 | - Show a brief introduction to the app's features such as messaging, voice and video calls, and file sharing. 125 | - Use images, titles, and subtitles to introduce app functionality. 126 | - Include buttons for navigating to the next/previous features and a skip button to bypass the onboarding flow. 127 | * Sign-In Screen: 128 | - Allow users to enter their email and password. 129 | - Add validation to ensure the user enters a valid email address and password. 130 | - Use a dummy email/password for verification. 131 | - On successful login, redirect the user to the Home screen. 132 | * Home Screen: 133 | - Display a screen with three tabs in the persistent bottom navigation bar. 134 | * Ensure that after a successful login, users cannot navigate back to the login screen. 135 | * Use [go_router](https://pub.dev/packages/go_router) for Navigation. 136 | * Here's [UI for reference](https://cdn4.vectorstock.com/i/1000x1000/55/68/chat-message-app-ui-kit-design-vector-34385568.jpg). 137 | 138 | 139 | ### Practical 8 140 | #### Implement Color Pallate App for the web. 141 | Develop an application with two tabs using Bottom Navigation: Home and Palette. 142 | * Home Screen: 143 | - Display a list of list tiles, each representing numbers from 1 to 100. 144 | - Implement navigation to a detail screen when a list tile is tapped. 145 | - Allow navigation to the detail screen by passing the number in the web URL. 146 | * Detail Screen (Home Detail): 147 | - Show the selected number from the list tile. 148 | * Palette Screen: 149 | - Display a grid list of multiple color palettes. 150 | - Implement navigation to a palette detail screen when a palette is clicked. 151 | * Detail Screen (Palette Detail): 152 | - Display a container with a specific color from the selected palette. 153 | - Add a button to favorite/unfavorite the color. 154 | * Use `go_router` for Navigation. 155 | * Use eye-catching colors to enhance UI. 156 | * Here's [UI for Reference](https://www.pinterest.com/pin/844706473831200541). 157 | 158 | # Networking 159 | 160 | ### Practical 9 161 | #### Implement OnlineUserDirectory 162 | Create an application with two screens: Home screen and Detail screen 163 | * Home Screen: 164 | - Fetch a list of users from the API. 165 | - Display users in a ListView with drag-and-drop support. 166 | - Show user summary including name, image, and email. 167 | - Navigate to the detail screen on user-item click. 168 | - GET API : http://jsonplaceholder.typicode.com/users 169 | * Detail Screen: 170 | - Display detailed information about the selected user. 171 | - Fetch albums for the selected user from the API 172 | - GET API : https://jsonplaceholder.typicode.com/albums?userId=1 173 | - Show albums using `GridView` with placeholder images. 174 | * Use the `http` package for making HTTP requests to fetch data from APIs. 175 | 176 | ### Practical 10 177 | #### Develop RecipeLister application 178 | Create an application with two screens: Home screen and Detail screen 179 | * Home Screen: 180 | - Fetch a list of recipes from the Yummly API (https://yummly2.p.rapidapi.com/feeds/list). 181 | - Display recipes in a ListView. 182 | - Each list item should show the recipe name and a short description. 183 | - Navigate to the Detail screen by tapping a recipe. 184 | * Detail Screen: 185 | - Display detailed information about the selected recipe. 186 | - Show recipe image, name, and full description. 187 | * GET API: https://yummly2.p.rapidapi.com/feeds/list 188 | * To access API, log in or create an account to obtain an API key. 189 | * Use `dio` for networking. 190 | 191 | ### Practical 11 192 | #### Develop ImageSaver application 193 | * Create an application that allows users to download an image from a given URL, display the image on the screen, and store the downloaded image file in the device's internal storage. 194 | * Screen Details: 195 | - Implement a single screen with the following components: 196 | - A TextField to enter the image URL. 197 | - Buttons to initiate image download and cancel download. 198 | - Display download progress using a progress bar. 199 | - Add notification to show downloading progress and add cancel button to cancel downloading 200 | - Display the downloaded image in fullscreen once the download is complete. 201 | - Add a button to save downloaded images to the device's gallery. 202 | * Use `dio` for networking 203 | 204 | ### Practical 12 205 | #### Implement Drink Explorer 206 | Create an application that allows users to search for mocktail details by name using an API. 207 | * Screen Details: 208 | - Implement a single screen with the following components: 209 | - A search bar to allow users to search mocktails by name. 210 | - Default search text in the search bar should be "mocktail" initially, fetching mocktail data upon app launch. 211 | - on search, display the ingredients and details of the mocktail. 212 | * GET API : https://www.thecocktaildb.com/api/json/v1/1/search.php?s={mocktail} 213 | * Use dummy data if required. 214 | 215 | # State Management 216 | Follow the MVVM (Model-View-ViewModel) pattern to separate the business and presentation logic of an application from its user interface (UI). To achieve a clean architecture, it's better to add one StateNotifier class (ViewModel in MVVM) per screen. Refer to [this article series](https://codewithandrea.com/articles/flutter-app-architecture-riverpod-introduction/) to understand MVVM as state management in Flutter. 217 | 218 | 219 | ### Practical 13 220 | #### Develop the TalkEasy application 221 | Develop an application, TalkEasy, allowing users to send and receive messages between two screens: Sender and Receiver. 222 | * Sender screen: 223 | - `TextField` for entering a message and Button to send the message. 224 | - When the user clicks the send button, navigate to the Receiver screen and display the message. 225 | .* Receiver screen: 226 | - `TextField` for entering a message and Button to send the message. 227 | - When the user enters a reply message and clicks on the button, the replied message should be sent back to the Sender screen and displayed on the screen. 228 | * Messages should be displayed dynamically on both screens as they are sent and received. 229 | * Use `Provider` for State Management 230 | 231 | ### Practical 14 232 | #### Implement MovieDirectory Application 233 | Develop an application, with a Persistent bottom navigation bar with two tabs: Home and Favorite. 234 | * Home screen: 235 | - Display a grid of movies fetched from an API. 236 | - Show movie posters with their names. 237 | - Navigate to a detail screen by tapping a movie. 238 | * Detail Screen: 239 | - Show detailed information about a selected movie (e.g., title, description, release year). 240 | - Add a button to add/remove the movie from favorites. 241 | * On the Favorite screen, 242 | - Display a list of movies marked as favorites. 243 | - Provide an option to remove movies from the favorites list. 244 | * Use `flutter_bloc` for State Management. 245 | * GET API: https://netflix54.p.rapidapi.com 246 | 247 | 248 | ### Practical 15 249 | #### Implement University directory application 250 | * Develop an application that allows users to browse and search universities from around the world. 251 | * Home Screen: 252 | - Display a dropdown menu to select a country. 253 | - Fetch and display a list of universities from the selected country using an API. 254 | - Implement search functionality to filter universities based on user input. 255 | * GET API - http://universities.hipolabs.com/search?country={country name} 256 | * Use `riverpod` for state management. 257 | 258 | 259 | ### Practical 16 260 | #### Create My Journal application 261 | Develop an application where users can add and view their daily thoughts, feelings, experiences, and ideas. 262 | - Implement a single screen that displays user entries in a grid format. 263 | - Include a text field for users to input their thoughts. 264 | - Add a button to save the user's thoughts. 265 | * Implement Deep linking: 266 | - On Click of this link https://open.my.app?message={anymessage} from anywhere, the system should open app and show the message from a link 267 | * Use `riverpod` for state management. 268 | 269 | ### Practical 17 270 | #### Develop MathQuest quiz application 271 | Create a quiz application named MathQuest that presents users with a series of math questions. 272 | * Home Screen: 273 | - Provide an introduction to the quiz. 274 | - Add a button to start the quiz. 275 | * Quiz Screen: 276 | - Ask 10 questions one at a time. 277 | - For each question, display four answer options. 278 | - Highlight correct/wrong answers upon submission. 279 | - Show progress as the user answers the questions. 280 | * Result Screen: 281 | - Display the number of correct answers out of 10. 282 | - Show an excellence level based on the score (e.g., poor, good, very good). 283 | - Add a button to restart the quiz. 284 | * Implement a Dark/Light theme in the app. 285 | * You can use any state management library for state management and image to build eye-catching UI. 286 | * Use injectable and getIt for Dependency Injection. 287 | * Here's [UI for reference](https://cdn.dribbble.com/users/2469034/screenshots/8210470/media/f02da6249ee8c25f187432c73d4eec27.png). 288 | * Write unit test for `ViewModel`. 289 | 290 | ### Practical 18 291 | #### Implement VideoHub application 292 | VideoHub is an application designed for users to discover and watch videos. 293 | * Add Sign-in Screen 294 | * Bottom Navigation Bar 295 | - Add a bottom navigation bar with three tabs: Home, Subscriptions and Settings. 296 | * Home Screen: 297 | - Display a list of videos. 298 | - Video content with total duration, thumbnail, uploaded time, Like, and total views. 299 | - Show the video by tapping on it. 300 | * Video detail Screen: 301 | - Add an option to play/pause video. 302 | - Add an option to subscribe and like videos. 303 | * Like Screen: 304 | - Show liked videos with thumbnails and description 305 | - Add option to remove it. 306 | * Settings Screen: 307 | - Show User details on the settings screen 308 | - Add dark/light theme support 309 | * Use dummy data(You can get it from [here](https://gist.githubusercontent.com/poudyalanil/ca84582cbeb4fc123a13290a586da925/raw/14a27bd0bcd0cd323b35ad79cf3b493dddf6216b/videos.json)) 310 | 311 | ### Practical 19 312 | #### Create a Global News Tracker application. 313 | The application will display news articles, and support pagination, sorting, searching, advanced filtering, and multiple languages based on user locale. 314 | * Home Screen: 315 | - Pagination 316 | - Fetch and display news articles in batches of 10. 317 | - Implement infinite scrolling to load more articles as the user scrolls. 318 | - Implement Search Functionality: 319 | - Add a search bar at the top of the screen. 320 | - Implement a search feature that filters the list of news articles based on user input. 321 | - Update the UI dynamically as the user types in the search bar. 322 | - Sorting Functionality: 323 | - Add a sort button next to the search bar that triggers a pop-up for sorting options. 324 | - Implement sorting by popularity and publication date. 325 | - Fetch sorted data from the API based on the selected sorting option. 326 | - Allow Advanced Filters (You can add a `Drawer` or whatever you like to add advanced filter) 327 | - Add options for users to filter news by Categories, Country, and Language 328 | - Possible options by this API: 329 | - Categories: business, entertainment, general, health, science, sports, technology. Default: all categories. 330 | - Languages: ar, de, en, es, fr, he, it, nl, no, pt, ru, sv, ud, zh. Default: all languages. 331 | - country: ae, ar, at, au, be, bg, be, ca, ch, cn, co, cu, cz, de, eg, fr, gb, gr, hk, hu, id, ie, il, in, it, jp, kr, lt, lv, ma, mx, my, ng, nl, no, nz, ph, pl, pt, to, rs, ru, as, se, sg, si, sk, the, tr, tw, ua, us, ve, za. Default: all 332 | countries. 333 | - Detail screen: 334 | - Navigate to a detailed news screen upon tapping a news item. 335 | - Display the full news article with all the details. 336 | - Support multiple languages and display news content based on the user's locale. (No need to add a .arb file for each Locale) 337 | - Use `riverpod` for State management. 338 | - News API: GET `https://newsapi.org/v2/everything` 339 | - generate API key from [here](https://newsapi.org/) 340 | - Add Unit test for `ViewModel` 341 | 342 | # Local Storage 343 | 344 | ### Practical 20 345 | #### Develop Protasker application 346 | * Develop an application with three screens: Login, Home, and Detail screens 347 | * Login Screen: 348 | - Implement a basic login screen 349 | * Home screen: 350 | - Display a list of tasks with subtasks and their creation times. 351 | - Implement a Floating Action Button (FAB) to add a new task. 352 | - Allow users to mark tasks as complete/incomplete with a button on each list item. 353 | - Implement swipe-to-delete functionality for tasks. 354 | - Display a number of pending tasks on the AppBar. 355 | - Navigate to the Detail screen when a task item is tapped. 356 | * Detail screen: 357 | - Allow the user to edit this task and subtask. 358 | - Add a button to save the updated data. 359 | * Use sq_lite to store data 360 | * Display data from SQLite on the home screen. 361 | * You can use any state management library. 362 | 363 | ### Practical 21 364 | #### Develop Authentify 365 | Authentify is an authentication application that allows users to register, login, view their profile details, and log out. 366 | * Registration Screen: 367 | - Collect the user's name, email, password, address, date of birth (DOB), blood group, gender, etc. 368 | - Implement validation for email and password fields. 369 | - Save user details in the local database. 370 | - After registering, show a login form 371 | * Login Form: 372 | - Allow users to log in using their registered email and password. 373 | - Validate email input. 374 | - Notify users to do registration if the email is not registered. 375 | - Take email and password 376 | - Check whether the user is available or not. If the user does not exist, notify the user to do registration. 377 | - Add validation for email. 378 | * Home Screen: 379 | - Display user details retrieved from the local database upon successful login. 380 | - Include options in the toolbar for logging out and deleting the user's account. 381 | - Maintain user session persistently until logout. 382 | * Use `flutter_bloc` for state management. 383 | * Write unit test for Bloc. 384 | 385 | ### Practical 22 386 | #### Implement MinionSpeak Application 387 | The application allows users to translate English text into the Minions' language and displays the translated text on the screen. 388 | * Home Screen: 389 | - Text field to enter English text. 390 | - Button to translate text. 391 | - Display translated text. 392 | - Add an option to listen to the translated word. 393 | - Floating Action Button (FAB) to view translation history. 394 | * History Screen: 395 | - Display a list of previous translations. 396 | - Option to delete translation history. 397 | * GET Request API: https://api.funtranslations.com/translate/minion.json?text={text} 398 | 399 | 400 | ### Practical 23 401 | #### Implement offline-first StoreMate product application 402 | StoreMate is a product browsing application that fetches product data from an API, displays it in a list, and supports offline browsing using local storage. 403 | * Home Screen: 404 | - Retrieve and display a list of products from the API using ListView. 405 | - Show product name, image, and a button to favorite/unfavorite the product. 406 | - Allow users to view product details by clicking on a product item. 407 | - Provide an option to view favorite products. 408 | - Include swipe-to-delete functionality to remove the product. 409 | - Implement swipe-to-refresh functionality to refresh the local database with remote data. 410 | - Pagination 411 | - Fetch and display products in batches of 10. 412 | - Implement infinite scrolling to load more products as the user scrolls. 413 | * Product Detail Screen: 414 | - Display all details of a selected product. 415 | - Include an option to favorite/unfavorite the product. 416 | * Favorites Screen: 417 | - Show a list of favorite products. 418 | - Allow users to remove individual products or all products from favorites. 419 | - Support selecting multiple items with a long click and removing all selected products from favorites. 420 | * The application should have offline functionality, allowing the user to continue browsing products even when they do not have an internet connection. 421 | * The product data should be first fetched from the local database and then synced with remote API data. 422 | * You can use any state management library. 423 | * GET API to fetch all products - https://dummyjson.com/products 424 | Limit and skip - https://dummyjson.com/products?limit=10&skip=10&select=title,price 425 | Delete item - "PUT" - 'https://dummyjson.com/products/1' 426 | * Add unit test for `ViewModel` 427 | 428 | # Streams 429 | 430 | ### Practical 24 431 | #### Implement count-down timer application using Stream 432 | The Countdown Timer application allows users to set a timer by inputting hours, minutes, and seconds, and then start/stop the timer. 433 | * Home screen: 434 | - Text fields for user input (hours, minutes, and seconds). 435 | - A button to start/stop the timer. 436 | - Display remaining and elapsed time. 437 | * The user should be able to set the duration of the timer and start it. 438 | * Display a notification, play sound, and vibrate the device when the timer completes. 439 | * Write Unit test. 440 | 441 | ### Practical 25 442 | #### Implement a VocabVault app 443 | VocabVault allows users to search for the definitions of words in the English language. 444 | * Home Screen: 445 | - A search bar for users to input words. 446 | - Display a list of matching words as the user types. 447 | - Show detailed information for a selected word like Definition, Pronunciation, Parts of speech, and Synonyms. 448 | - Add an option to play pronunciations of words. 449 | * Make sure the app will not make unnecessary API calls while typing in the search view. 450 | * Use Streambuilder to render UI. 451 | * Get API - https://api.dictionaryapi.dev/api/v2/entries/en/$word 452 | 453 | # FireStore Database 454 | 455 | ### Practical 26 456 | #### Develop EmployeeHub application 457 | This practical involves building an EmployeeHub application with Google Sign-In and Firebase for authentication and Firestore for storing employee data. 458 | * Sign-in Screen: 459 | - Display an image, introductory content, and a "Sign in with Google" button. 460 | - Authenticate the user with Google and Firebase Authentication upon button click. 461 | - Navigate the user to the home screen after successful sign-in. 462 | * Home Screen: 463 | - Display a list of employees with basic details (name and job title). 464 | - Show full details of an employee upon selection, including contact information, job title, address, DOB, blood group, etc. 465 | - Allow the user to add new employees with basic information saved locally and to Firestore. 466 | - Allow the user to update an employee's information by selecting them from the list and editing their details. 467 | - Allow the user to delete an employee by swiping. 468 | * Redirect the user to the home screen without asking for authentication if already signed in. 469 | * Use Firestore to store data. 470 | 471 | ### Practical 27 472 | #### Create a Contact Keeper application. 473 | Create an application, Conatact Keeper to allow users to add contacts. 474 | * Home Screen: 475 | - Show all contacts with name, phone number, and profile. 476 | - On clicking a contact, show the contact profile. 477 | - Options to update and delete contact details. 478 | - Swipe to delete a contact. 479 | - Option to add a contact with name, multiple phone numbers, profile image, blood group, and address. 480 | * Contact Detail Screen: 481 | - Show and edit contact details 482 | - Option to delete a contact. 483 | * Fetch all contacts from the user's device and store them in Firestore. 484 | * The app should also update contacts in real-time, so changes made by one user are reflected across all devices. 485 | * Use `rx_dart` for state management. 486 | * Write Unit test. 487 | 488 | 489 | 490 | 491 | 492 | 493 | 494 | 495 | 496 | 497 | 498 | 499 | --------------------------------------------------------------------------------