├── README.md ├── _config.yml ├── accessibility ├── cheatsheet.md └── workshop_instructions.md ├── adapting_to_devices ├── cheatsheet.md └── workshop_instructions.md ├── animations ├── cheatsheet.md └── workshop_instructions.md ├── app_uis ├── cheatsheet.md └── workshop_instructions.md ├── communication_between_widgets ├── cheatsheet.md └── workshop_instructions.md ├── dart ├── cheatsheet.md └── workshop_instructions.md ├── debugging_animations ├── cheatsheet.md └── workshop_instructions.md ├── finale └── workshop_instructions.md ├── http_and_json ├── cheatsheet.md └── workshop_instructions.md ├── index.md ├── lists_and_grids ├── cheatsheet.md └── workshop_instructions.md ├── localization_and_internationalization ├── cheatsheet.md └── workshop_instructions.md ├── navigation ├── cheatsheet.md └── workshop_instructions.md ├── platform_integrations ├── cheatsheet.md └── workshop_instructions.md ├── state_management ├── cheatsheet.md └── workshop_instructions.md ├── theming ├── cheatsheet.md └── workshop_instructions.md ├── user_input ├── cheatsheet.md └── workshop_instructions.md ├── widget_tests ├── cheatsheet.md └── workshop_instructions.md └── widgets ├── cheatsheet.md ├── widgets_exercise-1_screenshot.png ├── widgets_exercise-2_after.png ├── widgets_exercise-2_before.png └── workshop_instructions.md /README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matthew-carroll/flutter-training-references/13089ee00f3edb01eda490302544364e28cbff5d/README.md -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-midnight 2 | title: Flutter Training 3 | description: Cheatsheets & Instructions for Flutter training 4 | -------------------------------------------------------------------------------- /accessibility/cheatsheet.md: -------------------------------------------------------------------------------- 1 | # Cheatsheet: Accessibility 2 | -------------------------------------------------------------------------------- /accessibility/workshop_instructions.md: -------------------------------------------------------------------------------- 1 | # Workshop Instructions: Accessibility -------------------------------------------------------------------------------- /adapting_to_devices/cheatsheet.md: -------------------------------------------------------------------------------- 1 | # Cheatsheet: Adapting to Devices 2 | -------------------------------------------------------------------------------- /adapting_to_devices/workshop_instructions.md: -------------------------------------------------------------------------------- 1 | # Workshop Instructions: Adapting to Devices -------------------------------------------------------------------------------- /animations/cheatsheet.md: -------------------------------------------------------------------------------- 1 | # Cheatsheet: Animations 2 | -------------------------------------------------------------------------------- /animations/workshop_instructions.md: -------------------------------------------------------------------------------- 1 | # Workshop Instructions: Animations -------------------------------------------------------------------------------- /app_uis/cheatsheet.md: -------------------------------------------------------------------------------- 1 | # Cheatsheet: App UIs 2 | -------------------------------------------------------------------------------- /app_uis/workshop_instructions.md: -------------------------------------------------------------------------------- 1 | # Workshop Instructions: App UIs -------------------------------------------------------------------------------- /communication_between_widgets/cheatsheet.md: -------------------------------------------------------------------------------- 1 | # Cheatsheet: Communication Between Widgets 2 | -------------------------------------------------------------------------------- /communication_between_widgets/workshop_instructions.md: -------------------------------------------------------------------------------- 1 | # Workshop Instructions: Communication Between Widgets -------------------------------------------------------------------------------- /dart/cheatsheet.md: -------------------------------------------------------------------------------- 1 | # Cheatsheet: Dart -------------------------------------------------------------------------------- /dart/workshop_instructions.md: -------------------------------------------------------------------------------- 1 | # Workshop Instructions: Dart -------------------------------------------------------------------------------- /debugging_animations/cheatsheet.md: -------------------------------------------------------------------------------- 1 | # Cheatsheet: Debugging Animations 2 | -------------------------------------------------------------------------------- /debugging_animations/workshop_instructions.md: -------------------------------------------------------------------------------- 1 | # Workshop Instructions: Debugging Animations -------------------------------------------------------------------------------- /finale/workshop_instructions.md: -------------------------------------------------------------------------------- 1 | # Workshop Instructions: Finale -------------------------------------------------------------------------------- /http_and_json/cheatsheet.md: -------------------------------------------------------------------------------- 1 | # Cheatsheet: HTTP + JSON 2 | -------------------------------------------------------------------------------- /http_and_json/workshop_instructions.md: -------------------------------------------------------------------------------- 1 | # Workshop Instructions: HTTP + JSON -------------------------------------------------------------------------------- /index.md: -------------------------------------------------------------------------------- 1 | js: 2 | - defer: true 3 | url: https://dartpad.dev/experimental/inject_embed.dart.js 4 | 5 | # Cheatsheets 6 | 7 | ```run-dartpad:theme-light:mode-flutter:run-true 8 | main() => print("Hello, World!"); 9 | ``` 10 | 11 | ### Painting 12 | 13 | * [Dart](/dart/cheatsheet.md) 14 | * [Widgets](/widgets/cheatsheet.md) 15 | * [Widget Tests](/widget_tests/cheatsheet.md) 16 | * [User Input](/user_input/cheatsheet.md) 17 | * [Animations](/animations/cheatsheet.md) 18 | * [Debugging Animations](/debugging_animations/cheatsheet.md) 19 | * [Communication Between Widgets](/communication_between_widgets/cheatsheet.md) 20 | 21 | ### App UIs 22 | 23 | * [App UIs](/app_uis/cheatsheet.md) 24 | * [Theming](/theming/cheatsheet.md) 25 | * [Navigation](/navigation/cheatsheet.md) 26 | * [Lists & Grids](/lists_and_grids/cheatsheet.md) 27 | * [Adapting to Devices](/adapting_to_devices/cheatsheet.md) 28 | * [Accessibility](/accessibility/cheatsheet.md) 29 | * [Localization & Internationalization](/localization_and_internationalization/cheatsheet.md) 30 | 31 | ### App Development 32 | 33 | * [Platform Integrations](/platform_integrations/cheatsheet.md) 34 | * [State Management](/state_management/cheatsheet.md) 35 | * [HTTP + JSON](/http_and_json/cheatsheet.md) 36 | 37 | 38 | # Workshops 39 | 40 | ### Painting 41 | 42 | * [Dart](/dart/workshop_instructions.md) 43 | * [Widgets](/widgets/workshop_instructions.md) 44 | * [Widget Tests](/widget_tests/workshop_instructions.md) 45 | * [User Input](/user_input/workshop_instructions.md) 46 | * [Animations](/animations/workshop_instructions.md) 47 | * [Debugging Animations](/debugging_animations/workshop_instructions.md) 48 | * [Communication Between Widgets](/communication_between_widgets/workshop_instructions.md) 49 | 50 | ### App UIs 51 | 52 | * [App UIs](/app_uis/workshop_instructions.md) 53 | * [Theming](/theming/workshop_instructions.md) 54 | * [Navigation](/navigation/workshop_instructions.md) 55 | * [Lists & Grids](/lists_and_grids/workshop_instructions.md) 56 | * [Adapting to Devices](/adapting_to_devices/workshop_instructions.md) 57 | * [Accessibility](/accessibility/workshop_instructions.md) 58 | * [Localization & Internationalization](/localization_and_internationalization/workshop_instructions.md) 59 | 60 | ### App Development 61 | 62 | * [Platform Integrations](/platform_integrations/workshop_instructions.md) 63 | * [State Management](/state_management/workshop_instructions.md) 64 | * [HTTP + JSON](/http_and_json/workshop_instructions.md) -------------------------------------------------------------------------------- /lists_and_grids/cheatsheet.md: -------------------------------------------------------------------------------- 1 | # Cheatsheet: Lists & Grids -------------------------------------------------------------------------------- /lists_and_grids/workshop_instructions.md: -------------------------------------------------------------------------------- 1 | # Workshop Instructions: Lists & Grids -------------------------------------------------------------------------------- /localization_and_internationalization/cheatsheet.md: -------------------------------------------------------------------------------- 1 | # Cheatsheet: Localization & Internationalization 2 | -------------------------------------------------------------------------------- /localization_and_internationalization/workshop_instructions.md: -------------------------------------------------------------------------------- 1 | # Workshop Instructions: Localization a& Internationalization -------------------------------------------------------------------------------- /navigation/cheatsheet.md: -------------------------------------------------------------------------------- 1 | # Cheatsheet: Navigation -------------------------------------------------------------------------------- /navigation/workshop_instructions.md: -------------------------------------------------------------------------------- 1 | # Workshop Instructions: Navigation -------------------------------------------------------------------------------- /platform_integrations/cheatsheet.md: -------------------------------------------------------------------------------- 1 | # Cheatsheet: Platform Integrations -------------------------------------------------------------------------------- /platform_integrations/workshop_instructions.md: -------------------------------------------------------------------------------- 1 | # Workshop Instructions: Platform Integrations -------------------------------------------------------------------------------- /state_management/cheatsheet.md: -------------------------------------------------------------------------------- 1 | # Cheatsheet: State Management -------------------------------------------------------------------------------- /state_management/workshop_instructions.md: -------------------------------------------------------------------------------- 1 | # Workshop Instructions: State Management -------------------------------------------------------------------------------- /theming/cheatsheet.md: -------------------------------------------------------------------------------- 1 | # Cheatsheet: Theming -------------------------------------------------------------------------------- /theming/workshop_instructions.md: -------------------------------------------------------------------------------- 1 | # Workshop Instructions: Theming -------------------------------------------------------------------------------- /user_input/cheatsheet.md: -------------------------------------------------------------------------------- 1 | # Cheatsheet: User Input -------------------------------------------------------------------------------- /user_input/workshop_instructions.md: -------------------------------------------------------------------------------- 1 | # Workshop Instructions: User Input -------------------------------------------------------------------------------- /widget_tests/cheatsheet.md: -------------------------------------------------------------------------------- 1 | # Cheatsheet: Widget Tests -------------------------------------------------------------------------------- /widget_tests/workshop_instructions.md: -------------------------------------------------------------------------------- 1 | # Workshop Instructions: Widget Tests -------------------------------------------------------------------------------- /widgets/cheatsheet.md: -------------------------------------------------------------------------------- 1 | # Cheatsheet: Widgets -------------------------------------------------------------------------------- /widgets/widgets_exercise-1_screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matthew-carroll/flutter-training-references/13089ee00f3edb01eda490302544364e28cbff5d/widgets/widgets_exercise-1_screenshot.png -------------------------------------------------------------------------------- /widgets/widgets_exercise-2_after.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matthew-carroll/flutter-training-references/13089ee00f3edb01eda490302544364e28cbff5d/widgets/widgets_exercise-2_after.png -------------------------------------------------------------------------------- /widgets/widgets_exercise-2_before.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matthew-carroll/flutter-training-references/13089ee00f3edb01eda490302544364e28cbff5d/widgets/widgets_exercise-2_before.png -------------------------------------------------------------------------------- /widgets/workshop_instructions.md: -------------------------------------------------------------------------------- 1 | # Workshop Instructions: Widgets 2 | 3 | ### Exercise 1: Break-up a big widget tree 4 | 5 | When you run Exercise 1, you will see a UI that displays a dialog in the center of the screen. That dialog includes an avatar image, 3 small buttons to contorl the shape of the avatar, and a button to upload the avatar. 6 | 7 |
8 | 9 | This entire UI was created with a single, unwieldy widget tree. This is bad for readability, re-usability, and generally encourages bugs. 10 | 11 | Your job is to breakdown this widget tree into a combination of custom stateless widgets and local methods to help reduce the complexity of the tree. 12 | 13 | ### Exercise 2: Finish an app bar implementation 14 | 15 | When you run Exercise 2, you will see a wide, narrow rectangle with rounded corners. 16 | 17 |
18 | 19 | We want this rectangle to look like a kind of app bar. 20 | 21 | We'd like a menu icon button on the left side this rectangle, a search icon button on the right side of this menu, and we'd like a text field to sit beteen these two buttons, taking up all available space. 22 | 23 |
24 | 25 | Add the widgets necessary to create the desired end-product. --------------------------------------------------------------------------------