├── .gitignore ├── .mdc-docsite.yml ├── AUTHORS ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── ISSUE_TEMPLATE.md ├── LICENSE.md ├── PULL_REQUEST_TEMPLATE.md ├── README.md ├── docs └── components │ ├── README.md │ ├── assets │ ├── banners │ │ ├── banners-regular.png │ │ ├── banners-theming.png │ │ ├── banners_anatomy.png │ │ └── banners_hero.png │ ├── bottom_app_bars │ │ ├── bottom-app-bar-anatomy.png │ │ ├── bottom-app-bar-hero.png │ │ ├── bottom_app_bar_example.png │ │ └── bottom_app_bar_example_themed.png │ ├── bottom_navigation │ │ ├── Bottomnavigation_hero.png │ │ ├── bottom-nav-anatomy.png │ │ ├── bottom-nav-generic.png │ │ ├── flutter-bottom-nav-regular.png │ │ └── flutter-bottom-nav-themed.png │ ├── bottom_sheets │ │ ├── SheetsBottom_hero.png │ │ ├── SheetsBottom_modal_screenshot.jpg │ │ ├── SheetsBottom_standard_screenshot.jpg │ │ ├── SheetsBottom_theme_screenshot.jpg │ │ ├── bottom-sheet_types_composite.png │ │ ├── modal-anatomy.png │ │ └── standard-anatomy.png │ ├── buttons │ │ ├── Buttons_hero.png │ │ ├── button_theming_screenshot.png │ │ ├── buttons_types.png │ │ ├── contained-button.png │ │ ├── contained_button_anatomy.png │ │ ├── outlined-button.png │ │ ├── outlined_button_anatomy.png │ │ ├── text-button.png │ │ ├── text_button_anatomy.png │ │ ├── toggle-button-text.png │ │ ├── toggle-button.png │ │ ├── toggle_button_anatomy.png │ │ └── toggle_icon_screenshot_cropped.png │ ├── cards │ │ ├── Cards_hero.png │ │ ├── card-anatomy.png │ │ ├── card-example.png │ │ ├── card-sample-image-2.jpg │ │ ├── card-sample-image.jpg │ │ ├── cards-generic.png │ │ ├── elevated_card.md │ │ ├── generic-card-type-elevated.png │ │ ├── generic-card-type-outlined.png │ │ └── shrine_card.png │ ├── checkboxes │ │ ├── checkbox-hero.png │ │ ├── checkbox-state.png │ │ ├── checkboxes-example.png │ │ └── checkboxes-themed.png │ ├── chips │ │ ├── Chips_anatomy.png │ │ ├── Chips_composite.png │ │ ├── action_chips.png │ │ ├── chips-action.png │ │ ├── chips-anatomy.png │ │ ├── chips-choice.png │ │ ├── chips-filter.png │ │ ├── chips-hero.png │ │ ├── chips-input.png │ │ ├── choice_chips.png │ │ ├── filter_chips.png │ │ ├── input_chips.png │ │ └── theme_chips.png │ ├── data_tables │ │ ├── data-table-anatomy.png │ │ ├── data-table-hero.png │ │ ├── data_table_no_theme.png │ │ └── data_table_theme.png │ ├── date_pickers │ │ ├── date_picker_example.png │ │ ├── date_picker_theme_example.png │ │ ├── date_range_picker_example.png │ │ ├── pickers_anatomy.png │ │ ├── pickers_hero.png │ │ └── range_pickers_anatomy.png │ ├── dialogs │ │ ├── Dialogs_AlertDialog_anatomy.png │ │ ├── Dialogs_Confirmation_anatomy.png │ │ ├── Dialogs_FullScreen_anatomy_no-container.png │ │ ├── Dialogs_SimpleDialog_anatomy.png │ │ ├── alert-dialog-example.png │ │ ├── dialog-theming.png │ │ ├── dialogs_types.png │ │ └── simple-dialog-example.png │ ├── dividers │ │ ├── Dividers_hero.png │ │ ├── divider.png │ │ ├── dividers_anatomy.png │ │ ├── dividers_types_composite.png │ │ ├── full_bleed_divider.png │ │ ├── inset_divider.png │ │ ├── middle_divider.png │ │ └── vertical_divider.png │ ├── fabs │ │ ├── FAB_anatomy-long.png │ │ ├── FAB_types.png │ │ ├── FABs_hero.png │ │ ├── extended-FAB_anatomy-long.png │ │ ├── extended_fab.png │ │ ├── fabs_theming.png │ │ ├── miniFAB_anatomy-long.png │ │ ├── mini_fab.png │ │ └── regular_fab.png │ ├── image_lists │ │ ├── flutter_staggered_grid_view_masonry.png │ │ ├── flutter_staggered_grid_view_quilted.png │ │ └── flutter_staggered_grid_view_woven.png │ ├── lists │ │ ├── combined-list-content.png │ │ ├── list-content-anatomy.png │ │ ├── list-content-controls-anatomy.png │ │ ├── lists-anatomy.png │ │ ├── lists-types.png │ │ ├── single-line-list-example.png │ │ ├── three-line-list-example.png │ │ ├── three-line-list-with-theming-example.png │ │ └── two-line-list-example.png │ ├── menus │ │ ├── dropdown_menu_example.png │ │ ├── dropdown_menu_themed_example.png │ │ ├── exposed_dropdown_menu_example.png │ │ ├── menu_types_composite.png │ │ ├── menus-anatomy-composite.png │ │ └── menus-hero.png │ ├── nav_drawer │ │ ├── NavDrawer-anatomy.png │ │ ├── NavDrawer-hero.png │ │ └── Navigation-drawer_composite.png │ ├── nav_rail │ │ ├── navigation-rail-anatomy.png │ │ └── navigation-rail-default.png │ ├── progress_indicators │ │ ├── LinearProgress_anatomy.png │ │ ├── circular_progress_indicator.png │ │ ├── composite-1.gif │ │ ├── hero-1.gif │ │ ├── linear_progress_indicator.png │ │ └── theme_progress_indicator.png │ ├── radio_buttons │ │ ├── RadioButton-hero.png │ │ ├── RadioButton-states.png │ │ ├── radio-button-regular.png │ │ └── radio-button-theming.png │ ├── sliders │ │ ├── continous_range_slider.png │ │ ├── continous_slider.png │ │ ├── discrete_range_slider.png │ │ ├── discrete_slider.png │ │ ├── sliders_anatomy.png │ │ ├── sliders_hero.png │ │ ├── sliders_types.png │ │ ├── theme_range_sliders.png │ │ └── theme_slider.png │ ├── snackbars │ │ ├── snackbar-background.jpg │ │ ├── snackbars-anatomy.png │ │ ├── snackbars-hero.png │ │ ├── snackbars-regular.png │ │ └── snackbars-themed.png │ ├── switches │ │ ├── switch-anatomy.png │ │ ├── switch-hero.png │ │ ├── switch-regular.png │ │ ├── switch-states.png │ │ └── switch-theming.png │ ├── tabs │ │ ├── tabs-anatomy.png │ │ ├── tabs-fixed-hero.png │ │ ├── tabs-scrollable-hero.png │ │ ├── tabs_fixed.png │ │ ├── tabs_fixed_theme.png │ │ ├── tabs_hero.png │ │ ├── tabs_scrollable.png │ │ └── tabs_scrollable_theme.png │ ├── text_fields │ │ ├── Textfields_hero.png │ │ ├── filled_text_field_form.png │ │ ├── outline_text_field_form.png │ │ ├── shrine_text_field_form.png │ │ ├── text-field-anatomy.png │ │ ├── text-field-generic.png │ │ ├── textfields_filled_anatomy.png │ │ └── textfields_outlined_anatomy.png │ ├── time_pickers │ │ ├── TimePicker_hero.png │ │ ├── TimePicker_types.png │ │ ├── dial_anatomy.png │ │ ├── input_anatomy.png │ │ ├── time_input_picker_example.png │ │ ├── time_picker_example.png │ │ └── time_picker_theme_example.png │ ├── tooltips │ │ ├── Tooltips_hero.png │ │ ├── tooltip_demo.png │ │ └── tooltip_demo_theme.png │ └── top_app_bars │ │ ├── Top-app-bars_types_side-by-side.png │ │ ├── Topappbars_hero.png │ │ ├── contextual_action_bar_anatomy.png │ │ ├── contextual_app_bar_example.png │ │ ├── contextual_screenshot.png │ │ ├── contextual_theming.png │ │ ├── regular_app_bar_example.png │ │ ├── shrine_theme.png │ │ ├── top_app_bar_anatomy.png │ │ └── top_app_bar_screenshot.png │ ├── backdrop.md │ ├── banners.md │ ├── banners_dartpad.md │ ├── bottom_app_bars.md │ ├── bottom_navigation.md │ ├── bottom_sheets.md │ ├── buttons.md │ ├── cards.md │ ├── checkboxes.md │ ├── chips.md │ ├── dartpad │ ├── banners │ │ ├── regular │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ │ └── theme │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ ├── bottom_app_bars │ │ ├── regular │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ │ └── theme │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ ├── bottom_navigation │ │ ├── regular │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ │ └── theme │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ ├── bottom_sheets │ │ ├── modal │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ │ ├── standard │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ │ └── theme │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ ├── buttons │ │ ├── contained │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ │ ├── icon │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ │ ├── outlined │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ │ ├── text │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ │ ├── theme │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ │ └── toggle │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ ├── cards │ │ ├── elevated │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ │ └── theme │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ ├── checkboxes │ │ ├── regular │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ │ └── theme │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ ├── chips │ │ ├── action │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ │ ├── choice │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ │ ├── filter │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ │ ├── input │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ │ └── theme │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ ├── data_tables │ │ ├── normal │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ │ └── theme │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ ├── date_pickers │ │ ├── range │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ │ ├── regular │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ │ └── theme │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ ├── dialogs │ │ ├── alert │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ │ ├── fullscreen │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ │ ├── simple │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ │ └── theme │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ ├── dividers │ │ ├── divider │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ │ ├── full_bleed_divider │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ │ ├── inset_divider │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ │ ├── middle_divider │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ │ ├── theme │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ │ └── vertical_divider │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ ├── fabs │ │ ├── extended │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ │ ├── mini │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ │ ├── regular │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ │ └── theme │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ ├── lists │ │ ├── single │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ │ ├── theme │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ │ ├── three-line │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ │ └── two-line │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ ├── menus │ │ ├── dropdown │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ │ ├── exposed_dropdown │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ │ └── theme │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ ├── nav_drawer │ │ ├── modal │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ │ └── standard │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ ├── progress_indicators │ │ ├── circular │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ │ ├── linear │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ │ └── theme │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ ├── radio_buttons │ │ ├── regular │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ │ └── theme │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ ├── sliders │ │ ├── continous_range_slider │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ │ ├── continous_slider │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ │ ├── discrete_range_slider │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ │ ├── discrete_slider │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ │ └── theme │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ ├── snackbars │ │ ├── regular │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ │ └── theme │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ ├── switches │ │ ├── regular │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ │ └── theme │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ ├── tabs │ │ ├── fixed │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ │ ├── scollable_theme │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ │ ├── scrollable │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ │ └── theme │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ ├── text_fields │ │ ├── filled │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ │ ├── outlined │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ │ └── theme │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ ├── time_pickers │ │ ├── input │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ │ ├── regular │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ │ └── theme │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ ├── tooltips │ │ ├── regular │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ │ └── theme │ │ │ ├── dartpad_metadata.yaml │ │ │ └── main.dart │ └── top-app-bar │ │ ├── contextual │ │ ├── dartpad_metadata.yaml │ │ └── main.dart │ │ ├── contextual_theme │ │ ├── dartpad_metadata.yaml │ │ └── main.dart │ │ ├── regular │ │ ├── dartpad_metadata.yaml │ │ └── main.dart │ │ └── theme │ │ ├── dartpad_metadata.yaml │ │ └── main.dart │ ├── data_tables.md │ ├── date_pickers.md │ ├── dialogs.md │ ├── dividers.md │ ├── expanding-bottom-sheet.md │ ├── fab.md │ ├── image_lists.md │ ├── lists.md │ ├── menus.md │ ├── nav_drawer.md │ ├── nav_rail.md │ ├── progress_indicators.md │ ├── radio_buttons.md │ ├── resources │ ├── crane-backdrop.png │ └── shrine-expanding-bottom-sheet.png │ ├── sliders.md │ ├── snackbars.md │ ├── switches.md │ ├── tabs.md │ ├── text_fields.md │ ├── time_pickers.md │ ├── tooltips.md │ └── top_app_bars.md ├── docsite └── docsite-index.md ├── medium └── material_icons │ ├── dartpad_metadata.yaml │ └── main.dart └── pubspec.yaml /.gitignore: -------------------------------------------------------------------------------- 1 | Miscellaneous 2 | *.class 3 | *.log 4 | *.pyc 5 | *.swp 6 | .DS_Store 7 | .atom/ 8 | .buildlog/ 9 | .history 10 | .svn/ 11 | .firebase/ 12 | .flutter-plugins-dependencies 13 | 14 | # IntelliJ related 15 | *.iml 16 | *.ipr 17 | *.iws 18 | .idea/ 19 | 20 | # The .vscode folder contains launch configuration and tasks you configure in 21 | # VS Code which you may wish to be included in version control, so this line 22 | # is commented out by default. 23 | #.vscode/ 24 | 25 | # Flutter/Dart/Pub related 26 | **/doc/api/ 27 | .dart_tool/ 28 | .flutter-plugins 29 | .flutter-plugins-dependencies 30 | .packages 31 | .pub-cache/ 32 | .pub/ 33 | /build/ 34 | test_goldens/failures/ 35 | 36 | # Other 37 | pubspec.lock 38 | -------------------------------------------------------------------------------- /.mdc-docsite.yml: -------------------------------------------------------------------------------- 1 | # Doc site configuration. 2 | basepath: /flutter 3 | components_url: https://flutter.dev/widgets/material/ 4 | documentation_url: https://docs.flutter.dev/flutter/material/material-library.html 5 | site_platform: flutter 6 | site_title: Material Components for Flutter 7 | site_short_title: Flutter 8 | site_description: > 9 | Material Components for Flutter is a set of user interface components that help Flutter app developers build apps with Material Design. 10 | repo_url: https://github.com/material-components/material-components-flutter/ 11 | repo_stable_branch: stable 12 | -------------------------------------------------------------------------------- /AUTHORS: -------------------------------------------------------------------------------- 1 | # This is the list of Material Components for Flutter authors for copyright 2 | # purposes. 3 | # 4 | # This does not necessarily list everyone who has contributed code, since in 5 | # some cases, their employer may be the copyright holder. To see the full list 6 | # of contributors, see the revision history in source control. 7 | Google LLC 8 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | Please see the [Material Components code of conduct](https://github.com/material-components/material-components/blob/develop/CODE_OF_CONDUCT.md). 2 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | Please see the [Flutter guide on contributing](https://github.com/flutter/flutter/blob/master/CONTRIBUTING.md). 2 | -------------------------------------------------------------------------------- /ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ### Are you sure? 2 | This repository is a reference to the [main Flutter repository](https://github.com/flutter/flutter). Code-level issues should be created there. 3 | 4 | ### Related issues 5 | - Type `#` and the issue number or `#` and select the from the inline drop down. 6 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | Please see the [Flutter license](https://github.com/flutter/flutter/blob/master/CONTRIBUTING.md). -------------------------------------------------------------------------------- /PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ## Thanks for starting a pull request on Material Components! 2 | 3 | #### Don't forget: 4 | - [ ] Are you sure you mean this repo? This repository is a reference to the [main Flutter repository](https://github.com/flutter/flutter). Code-level issues should be created there. 5 | - [ ] Link to GitHub issues it solves. ```closes #1234``` 6 | - [ ] Sign the CLA bot. You can do this once the pull request is opened. 7 | 8 | Be sure to read the [Flutter guide on contributing](https://github.com/flutter/flutter/blob/master/CONTRIBUTING.md). 9 | 10 | ### Related issues 11 | - Type `#` and the issue number or `#` and select the from the inline drop down. 12 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Material Components for Flutter 2 | 3 | Material Components for Flutter (MDC-Flutter) helps developers execute [Material Design](https://www.material.io). Developed by a core team of engineers and UX designers at Google, these components enable a reliable development workflow to build beautiful and functional Android and iOS apps. Learn more about how Material Components for Flutter supports design and usability best practices across platforms in the [Flutter Material Catalog](https://flutter.dev/docs/development/ui/widgets/material). 4 | 5 | ## MDC-Flutter Source Code 6 | 7 | All Material Components for Flutter can be found in the [Flutter repository](https://github.com/flutter/flutter/tree/master/packages/flutter/lib/src/material). 8 | 9 | ## Usage 10 | 11 | Material Components is included by default in Flutter's packages. To add access to MDC widgets in a file, simply `import` the `material.dart` file. 12 | 13 | ``` dart 14 | import 'package:flutter/material.dart'; 15 | ``` 16 | 17 | ## Useful Links 18 | 19 | - [Flutter.dev](https://flutter.dev) (external site) 20 | - [Flutter Repo](https://github.com/flutter/flutter) 21 | - [Material.io](https://www.material.io) (external site) 22 | - [Material Design Guidelines](https://material.io/guidelines) (external site) 23 | -------------------------------------------------------------------------------- /docs/components/README.md: -------------------------------------------------------------------------------- 1 | # Component Docs 2 | 3 | Documents in this directory are engineering guidance for components in the `material.dart` library in Flutter (best viewed on [material.io](https://material.io/develop/flutter/components/floating-action-buttons), as well as components not included in the library (e.g. backdrop). 4 | -------------------------------------------------------------------------------- /docs/components/assets/banners/banners-regular.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/banners/banners-regular.png -------------------------------------------------------------------------------- /docs/components/assets/banners/banners-theming.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/banners/banners-theming.png -------------------------------------------------------------------------------- /docs/components/assets/banners/banners_anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/banners/banners_anatomy.png -------------------------------------------------------------------------------- /docs/components/assets/banners/banners_hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/banners/banners_hero.png -------------------------------------------------------------------------------- /docs/components/assets/bottom_app_bars/bottom-app-bar-anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/bottom_app_bars/bottom-app-bar-anatomy.png -------------------------------------------------------------------------------- /docs/components/assets/bottom_app_bars/bottom-app-bar-hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/bottom_app_bars/bottom-app-bar-hero.png -------------------------------------------------------------------------------- /docs/components/assets/bottom_app_bars/bottom_app_bar_example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/bottom_app_bars/bottom_app_bar_example.png -------------------------------------------------------------------------------- /docs/components/assets/bottom_app_bars/bottom_app_bar_example_themed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/bottom_app_bars/bottom_app_bar_example_themed.png -------------------------------------------------------------------------------- /docs/components/assets/bottom_navigation/Bottomnavigation_hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/bottom_navigation/Bottomnavigation_hero.png -------------------------------------------------------------------------------- /docs/components/assets/bottom_navigation/bottom-nav-anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/bottom_navigation/bottom-nav-anatomy.png -------------------------------------------------------------------------------- /docs/components/assets/bottom_navigation/bottom-nav-generic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/bottom_navigation/bottom-nav-generic.png -------------------------------------------------------------------------------- /docs/components/assets/bottom_navigation/flutter-bottom-nav-regular.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/bottom_navigation/flutter-bottom-nav-regular.png -------------------------------------------------------------------------------- /docs/components/assets/bottom_navigation/flutter-bottom-nav-themed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/bottom_navigation/flutter-bottom-nav-themed.png -------------------------------------------------------------------------------- /docs/components/assets/bottom_sheets/SheetsBottom_hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/bottom_sheets/SheetsBottom_hero.png -------------------------------------------------------------------------------- /docs/components/assets/bottom_sheets/SheetsBottom_modal_screenshot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/bottom_sheets/SheetsBottom_modal_screenshot.jpg -------------------------------------------------------------------------------- /docs/components/assets/bottom_sheets/SheetsBottom_standard_screenshot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/bottom_sheets/SheetsBottom_standard_screenshot.jpg -------------------------------------------------------------------------------- /docs/components/assets/bottom_sheets/SheetsBottom_theme_screenshot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/bottom_sheets/SheetsBottom_theme_screenshot.jpg -------------------------------------------------------------------------------- /docs/components/assets/bottom_sheets/bottom-sheet_types_composite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/bottom_sheets/bottom-sheet_types_composite.png -------------------------------------------------------------------------------- /docs/components/assets/bottom_sheets/modal-anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/bottom_sheets/modal-anatomy.png -------------------------------------------------------------------------------- /docs/components/assets/bottom_sheets/standard-anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/bottom_sheets/standard-anatomy.png -------------------------------------------------------------------------------- /docs/components/assets/buttons/Buttons_hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/buttons/Buttons_hero.png -------------------------------------------------------------------------------- /docs/components/assets/buttons/button_theming_screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/buttons/button_theming_screenshot.png -------------------------------------------------------------------------------- /docs/components/assets/buttons/buttons_types.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/buttons/buttons_types.png -------------------------------------------------------------------------------- /docs/components/assets/buttons/contained-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/buttons/contained-button.png -------------------------------------------------------------------------------- /docs/components/assets/buttons/contained_button_anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/buttons/contained_button_anatomy.png -------------------------------------------------------------------------------- /docs/components/assets/buttons/outlined-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/buttons/outlined-button.png -------------------------------------------------------------------------------- /docs/components/assets/buttons/outlined_button_anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/buttons/outlined_button_anatomy.png -------------------------------------------------------------------------------- /docs/components/assets/buttons/text-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/buttons/text-button.png -------------------------------------------------------------------------------- /docs/components/assets/buttons/text_button_anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/buttons/text_button_anatomy.png -------------------------------------------------------------------------------- /docs/components/assets/buttons/toggle-button-text.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/buttons/toggle-button-text.png -------------------------------------------------------------------------------- /docs/components/assets/buttons/toggle-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/buttons/toggle-button.png -------------------------------------------------------------------------------- /docs/components/assets/buttons/toggle_button_anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/buttons/toggle_button_anatomy.png -------------------------------------------------------------------------------- /docs/components/assets/buttons/toggle_icon_screenshot_cropped.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/buttons/toggle_icon_screenshot_cropped.png -------------------------------------------------------------------------------- /docs/components/assets/cards/Cards_hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/cards/Cards_hero.png -------------------------------------------------------------------------------- /docs/components/assets/cards/card-anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/cards/card-anatomy.png -------------------------------------------------------------------------------- /docs/components/assets/cards/card-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/cards/card-example.png -------------------------------------------------------------------------------- /docs/components/assets/cards/card-sample-image-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/cards/card-sample-image-2.jpg -------------------------------------------------------------------------------- /docs/components/assets/cards/card-sample-image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/cards/card-sample-image.jpg -------------------------------------------------------------------------------- /docs/components/assets/cards/cards-generic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/cards/cards-generic.png -------------------------------------------------------------------------------- /docs/components/assets/cards/generic-card-type-elevated.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/cards/generic-card-type-elevated.png -------------------------------------------------------------------------------- /docs/components/assets/cards/generic-card-type-outlined.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/cards/generic-card-type-outlined.png -------------------------------------------------------------------------------- /docs/components/assets/cards/shrine_card.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/cards/shrine_card.png -------------------------------------------------------------------------------- /docs/components/assets/checkboxes/checkbox-hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/checkboxes/checkbox-hero.png -------------------------------------------------------------------------------- /docs/components/assets/checkboxes/checkbox-state.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/checkboxes/checkbox-state.png -------------------------------------------------------------------------------- /docs/components/assets/checkboxes/checkboxes-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/checkboxes/checkboxes-example.png -------------------------------------------------------------------------------- /docs/components/assets/checkboxes/checkboxes-themed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/checkboxes/checkboxes-themed.png -------------------------------------------------------------------------------- /docs/components/assets/chips/Chips_anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/chips/Chips_anatomy.png -------------------------------------------------------------------------------- /docs/components/assets/chips/Chips_composite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/chips/Chips_composite.png -------------------------------------------------------------------------------- /docs/components/assets/chips/action_chips.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/chips/action_chips.png -------------------------------------------------------------------------------- /docs/components/assets/chips/chips-action.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/chips/chips-action.png -------------------------------------------------------------------------------- /docs/components/assets/chips/chips-anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/chips/chips-anatomy.png -------------------------------------------------------------------------------- /docs/components/assets/chips/chips-choice.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/chips/chips-choice.png -------------------------------------------------------------------------------- /docs/components/assets/chips/chips-filter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/chips/chips-filter.png -------------------------------------------------------------------------------- /docs/components/assets/chips/chips-hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/chips/chips-hero.png -------------------------------------------------------------------------------- /docs/components/assets/chips/chips-input.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/chips/chips-input.png -------------------------------------------------------------------------------- /docs/components/assets/chips/choice_chips.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/chips/choice_chips.png -------------------------------------------------------------------------------- /docs/components/assets/chips/filter_chips.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/chips/filter_chips.png -------------------------------------------------------------------------------- /docs/components/assets/chips/input_chips.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/chips/input_chips.png -------------------------------------------------------------------------------- /docs/components/assets/chips/theme_chips.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/chips/theme_chips.png -------------------------------------------------------------------------------- /docs/components/assets/data_tables/data-table-anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/data_tables/data-table-anatomy.png -------------------------------------------------------------------------------- /docs/components/assets/data_tables/data-table-hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/data_tables/data-table-hero.png -------------------------------------------------------------------------------- /docs/components/assets/data_tables/data_table_no_theme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/data_tables/data_table_no_theme.png -------------------------------------------------------------------------------- /docs/components/assets/data_tables/data_table_theme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/data_tables/data_table_theme.png -------------------------------------------------------------------------------- /docs/components/assets/date_pickers/date_picker_example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/date_pickers/date_picker_example.png -------------------------------------------------------------------------------- /docs/components/assets/date_pickers/date_picker_theme_example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/date_pickers/date_picker_theme_example.png -------------------------------------------------------------------------------- /docs/components/assets/date_pickers/date_range_picker_example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/date_pickers/date_range_picker_example.png -------------------------------------------------------------------------------- /docs/components/assets/date_pickers/pickers_anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/date_pickers/pickers_anatomy.png -------------------------------------------------------------------------------- /docs/components/assets/date_pickers/pickers_hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/date_pickers/pickers_hero.png -------------------------------------------------------------------------------- /docs/components/assets/date_pickers/range_pickers_anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/date_pickers/range_pickers_anatomy.png -------------------------------------------------------------------------------- /docs/components/assets/dialogs/Dialogs_AlertDialog_anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/dialogs/Dialogs_AlertDialog_anatomy.png -------------------------------------------------------------------------------- /docs/components/assets/dialogs/Dialogs_Confirmation_anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/dialogs/Dialogs_Confirmation_anatomy.png -------------------------------------------------------------------------------- /docs/components/assets/dialogs/Dialogs_FullScreen_anatomy_no-container.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/dialogs/Dialogs_FullScreen_anatomy_no-container.png -------------------------------------------------------------------------------- /docs/components/assets/dialogs/Dialogs_SimpleDialog_anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/dialogs/Dialogs_SimpleDialog_anatomy.png -------------------------------------------------------------------------------- /docs/components/assets/dialogs/alert-dialog-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/dialogs/alert-dialog-example.png -------------------------------------------------------------------------------- /docs/components/assets/dialogs/dialog-theming.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/dialogs/dialog-theming.png -------------------------------------------------------------------------------- /docs/components/assets/dialogs/dialogs_types.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/dialogs/dialogs_types.png -------------------------------------------------------------------------------- /docs/components/assets/dialogs/simple-dialog-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/dialogs/simple-dialog-example.png -------------------------------------------------------------------------------- /docs/components/assets/dividers/Dividers_hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/dividers/Dividers_hero.png -------------------------------------------------------------------------------- /docs/components/assets/dividers/divider.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/dividers/divider.png -------------------------------------------------------------------------------- /docs/components/assets/dividers/dividers_anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/dividers/dividers_anatomy.png -------------------------------------------------------------------------------- /docs/components/assets/dividers/dividers_types_composite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/dividers/dividers_types_composite.png -------------------------------------------------------------------------------- /docs/components/assets/dividers/full_bleed_divider.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/dividers/full_bleed_divider.png -------------------------------------------------------------------------------- /docs/components/assets/dividers/inset_divider.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/dividers/inset_divider.png -------------------------------------------------------------------------------- /docs/components/assets/dividers/middle_divider.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/dividers/middle_divider.png -------------------------------------------------------------------------------- /docs/components/assets/dividers/vertical_divider.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/dividers/vertical_divider.png -------------------------------------------------------------------------------- /docs/components/assets/fabs/FAB_anatomy-long.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/fabs/FAB_anatomy-long.png -------------------------------------------------------------------------------- /docs/components/assets/fabs/FAB_types.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/fabs/FAB_types.png -------------------------------------------------------------------------------- /docs/components/assets/fabs/FABs_hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/fabs/FABs_hero.png -------------------------------------------------------------------------------- /docs/components/assets/fabs/extended-FAB_anatomy-long.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/fabs/extended-FAB_anatomy-long.png -------------------------------------------------------------------------------- /docs/components/assets/fabs/extended_fab.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/fabs/extended_fab.png -------------------------------------------------------------------------------- /docs/components/assets/fabs/fabs_theming.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/fabs/fabs_theming.png -------------------------------------------------------------------------------- /docs/components/assets/fabs/miniFAB_anatomy-long.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/fabs/miniFAB_anatomy-long.png -------------------------------------------------------------------------------- /docs/components/assets/fabs/mini_fab.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/fabs/mini_fab.png -------------------------------------------------------------------------------- /docs/components/assets/fabs/regular_fab.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/fabs/regular_fab.png -------------------------------------------------------------------------------- /docs/components/assets/image_lists/flutter_staggered_grid_view_masonry.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/image_lists/flutter_staggered_grid_view_masonry.png -------------------------------------------------------------------------------- /docs/components/assets/image_lists/flutter_staggered_grid_view_quilted.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/image_lists/flutter_staggered_grid_view_quilted.png -------------------------------------------------------------------------------- /docs/components/assets/image_lists/flutter_staggered_grid_view_woven.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/image_lists/flutter_staggered_grid_view_woven.png -------------------------------------------------------------------------------- /docs/components/assets/lists/combined-list-content.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/lists/combined-list-content.png -------------------------------------------------------------------------------- /docs/components/assets/lists/list-content-anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/lists/list-content-anatomy.png -------------------------------------------------------------------------------- /docs/components/assets/lists/list-content-controls-anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/lists/list-content-controls-anatomy.png -------------------------------------------------------------------------------- /docs/components/assets/lists/lists-anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/lists/lists-anatomy.png -------------------------------------------------------------------------------- /docs/components/assets/lists/lists-types.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/lists/lists-types.png -------------------------------------------------------------------------------- /docs/components/assets/lists/single-line-list-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/lists/single-line-list-example.png -------------------------------------------------------------------------------- /docs/components/assets/lists/three-line-list-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/lists/three-line-list-example.png -------------------------------------------------------------------------------- /docs/components/assets/lists/three-line-list-with-theming-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/lists/three-line-list-with-theming-example.png -------------------------------------------------------------------------------- /docs/components/assets/lists/two-line-list-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/lists/two-line-list-example.png -------------------------------------------------------------------------------- /docs/components/assets/menus/dropdown_menu_example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/menus/dropdown_menu_example.png -------------------------------------------------------------------------------- /docs/components/assets/menus/dropdown_menu_themed_example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/menus/dropdown_menu_themed_example.png -------------------------------------------------------------------------------- /docs/components/assets/menus/exposed_dropdown_menu_example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/menus/exposed_dropdown_menu_example.png -------------------------------------------------------------------------------- /docs/components/assets/menus/menu_types_composite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/menus/menu_types_composite.png -------------------------------------------------------------------------------- /docs/components/assets/menus/menus-anatomy-composite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/menus/menus-anatomy-composite.png -------------------------------------------------------------------------------- /docs/components/assets/menus/menus-hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/menus/menus-hero.png -------------------------------------------------------------------------------- /docs/components/assets/nav_drawer/NavDrawer-anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/nav_drawer/NavDrawer-anatomy.png -------------------------------------------------------------------------------- /docs/components/assets/nav_drawer/NavDrawer-hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/nav_drawer/NavDrawer-hero.png -------------------------------------------------------------------------------- /docs/components/assets/nav_drawer/Navigation-drawer_composite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/nav_drawer/Navigation-drawer_composite.png -------------------------------------------------------------------------------- /docs/components/assets/nav_rail/navigation-rail-anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/nav_rail/navigation-rail-anatomy.png -------------------------------------------------------------------------------- /docs/components/assets/nav_rail/navigation-rail-default.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/nav_rail/navigation-rail-default.png -------------------------------------------------------------------------------- /docs/components/assets/progress_indicators/LinearProgress_anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/progress_indicators/LinearProgress_anatomy.png -------------------------------------------------------------------------------- /docs/components/assets/progress_indicators/circular_progress_indicator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/progress_indicators/circular_progress_indicator.png -------------------------------------------------------------------------------- /docs/components/assets/progress_indicators/composite-1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/progress_indicators/composite-1.gif -------------------------------------------------------------------------------- /docs/components/assets/progress_indicators/hero-1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/progress_indicators/hero-1.gif -------------------------------------------------------------------------------- /docs/components/assets/progress_indicators/linear_progress_indicator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/progress_indicators/linear_progress_indicator.png -------------------------------------------------------------------------------- /docs/components/assets/progress_indicators/theme_progress_indicator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/progress_indicators/theme_progress_indicator.png -------------------------------------------------------------------------------- /docs/components/assets/radio_buttons/RadioButton-hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/radio_buttons/RadioButton-hero.png -------------------------------------------------------------------------------- /docs/components/assets/radio_buttons/RadioButton-states.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/radio_buttons/RadioButton-states.png -------------------------------------------------------------------------------- /docs/components/assets/radio_buttons/radio-button-regular.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/radio_buttons/radio-button-regular.png -------------------------------------------------------------------------------- /docs/components/assets/radio_buttons/radio-button-theming.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/radio_buttons/radio-button-theming.png -------------------------------------------------------------------------------- /docs/components/assets/sliders/continous_range_slider.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/sliders/continous_range_slider.png -------------------------------------------------------------------------------- /docs/components/assets/sliders/continous_slider.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/sliders/continous_slider.png -------------------------------------------------------------------------------- /docs/components/assets/sliders/discrete_range_slider.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/sliders/discrete_range_slider.png -------------------------------------------------------------------------------- /docs/components/assets/sliders/discrete_slider.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/sliders/discrete_slider.png -------------------------------------------------------------------------------- /docs/components/assets/sliders/sliders_anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/sliders/sliders_anatomy.png -------------------------------------------------------------------------------- /docs/components/assets/sliders/sliders_hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/sliders/sliders_hero.png -------------------------------------------------------------------------------- /docs/components/assets/sliders/sliders_types.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/sliders/sliders_types.png -------------------------------------------------------------------------------- /docs/components/assets/sliders/theme_range_sliders.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/sliders/theme_range_sliders.png -------------------------------------------------------------------------------- /docs/components/assets/sliders/theme_slider.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/sliders/theme_slider.png -------------------------------------------------------------------------------- /docs/components/assets/snackbars/snackbar-background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/snackbars/snackbar-background.jpg -------------------------------------------------------------------------------- /docs/components/assets/snackbars/snackbars-anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/snackbars/snackbars-anatomy.png -------------------------------------------------------------------------------- /docs/components/assets/snackbars/snackbars-hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/snackbars/snackbars-hero.png -------------------------------------------------------------------------------- /docs/components/assets/snackbars/snackbars-regular.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/snackbars/snackbars-regular.png -------------------------------------------------------------------------------- /docs/components/assets/snackbars/snackbars-themed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/snackbars/snackbars-themed.png -------------------------------------------------------------------------------- /docs/components/assets/switches/switch-anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/switches/switch-anatomy.png -------------------------------------------------------------------------------- /docs/components/assets/switches/switch-hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/switches/switch-hero.png -------------------------------------------------------------------------------- /docs/components/assets/switches/switch-regular.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/switches/switch-regular.png -------------------------------------------------------------------------------- /docs/components/assets/switches/switch-states.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/switches/switch-states.png -------------------------------------------------------------------------------- /docs/components/assets/switches/switch-theming.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/switches/switch-theming.png -------------------------------------------------------------------------------- /docs/components/assets/tabs/tabs-anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/tabs/tabs-anatomy.png -------------------------------------------------------------------------------- /docs/components/assets/tabs/tabs-fixed-hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/tabs/tabs-fixed-hero.png -------------------------------------------------------------------------------- /docs/components/assets/tabs/tabs-scrollable-hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/tabs/tabs-scrollable-hero.png -------------------------------------------------------------------------------- /docs/components/assets/tabs/tabs_fixed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/tabs/tabs_fixed.png -------------------------------------------------------------------------------- /docs/components/assets/tabs/tabs_fixed_theme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/tabs/tabs_fixed_theme.png -------------------------------------------------------------------------------- /docs/components/assets/tabs/tabs_hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/tabs/tabs_hero.png -------------------------------------------------------------------------------- /docs/components/assets/tabs/tabs_scrollable.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/tabs/tabs_scrollable.png -------------------------------------------------------------------------------- /docs/components/assets/tabs/tabs_scrollable_theme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/tabs/tabs_scrollable_theme.png -------------------------------------------------------------------------------- /docs/components/assets/text_fields/Textfields_hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/text_fields/Textfields_hero.png -------------------------------------------------------------------------------- /docs/components/assets/text_fields/filled_text_field_form.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/text_fields/filled_text_field_form.png -------------------------------------------------------------------------------- /docs/components/assets/text_fields/outline_text_field_form.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/text_fields/outline_text_field_form.png -------------------------------------------------------------------------------- /docs/components/assets/text_fields/shrine_text_field_form.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/text_fields/shrine_text_field_form.png -------------------------------------------------------------------------------- /docs/components/assets/text_fields/text-field-anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/text_fields/text-field-anatomy.png -------------------------------------------------------------------------------- /docs/components/assets/text_fields/text-field-generic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/text_fields/text-field-generic.png -------------------------------------------------------------------------------- /docs/components/assets/text_fields/textfields_filled_anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/text_fields/textfields_filled_anatomy.png -------------------------------------------------------------------------------- /docs/components/assets/text_fields/textfields_outlined_anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/text_fields/textfields_outlined_anatomy.png -------------------------------------------------------------------------------- /docs/components/assets/time_pickers/TimePicker_hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/time_pickers/TimePicker_hero.png -------------------------------------------------------------------------------- /docs/components/assets/time_pickers/TimePicker_types.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/time_pickers/TimePicker_types.png -------------------------------------------------------------------------------- /docs/components/assets/time_pickers/dial_anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/time_pickers/dial_anatomy.png -------------------------------------------------------------------------------- /docs/components/assets/time_pickers/input_anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/time_pickers/input_anatomy.png -------------------------------------------------------------------------------- /docs/components/assets/time_pickers/time_input_picker_example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/time_pickers/time_input_picker_example.png -------------------------------------------------------------------------------- /docs/components/assets/time_pickers/time_picker_example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/time_pickers/time_picker_example.png -------------------------------------------------------------------------------- /docs/components/assets/time_pickers/time_picker_theme_example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/time_pickers/time_picker_theme_example.png -------------------------------------------------------------------------------- /docs/components/assets/tooltips/Tooltips_hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/tooltips/Tooltips_hero.png -------------------------------------------------------------------------------- /docs/components/assets/tooltips/tooltip_demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/tooltips/tooltip_demo.png -------------------------------------------------------------------------------- /docs/components/assets/tooltips/tooltip_demo_theme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/tooltips/tooltip_demo_theme.png -------------------------------------------------------------------------------- /docs/components/assets/top_app_bars/Top-app-bars_types_side-by-side.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/top_app_bars/Top-app-bars_types_side-by-side.png -------------------------------------------------------------------------------- /docs/components/assets/top_app_bars/Topappbars_hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/top_app_bars/Topappbars_hero.png -------------------------------------------------------------------------------- /docs/components/assets/top_app_bars/contextual_action_bar_anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/top_app_bars/contextual_action_bar_anatomy.png -------------------------------------------------------------------------------- /docs/components/assets/top_app_bars/contextual_app_bar_example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/top_app_bars/contextual_app_bar_example.png -------------------------------------------------------------------------------- /docs/components/assets/top_app_bars/contextual_screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/top_app_bars/contextual_screenshot.png -------------------------------------------------------------------------------- /docs/components/assets/top_app_bars/contextual_theming.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/top_app_bars/contextual_theming.png -------------------------------------------------------------------------------- /docs/components/assets/top_app_bars/regular_app_bar_example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/top_app_bars/regular_app_bar_example.png -------------------------------------------------------------------------------- /docs/components/assets/top_app_bars/shrine_theme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/top_app_bars/shrine_theme.png -------------------------------------------------------------------------------- /docs/components/assets/top_app_bars/top_app_bar_anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/top_app_bars/top_app_bar_anatomy.png -------------------------------------------------------------------------------- /docs/components/assets/top_app_bars/top_app_bar_screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/assets/top_app_bars/top_app_bar_screenshot.png -------------------------------------------------------------------------------- /docs/components/dartpad/banners/regular/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Regular Banner Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/banners/regular/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return MaterialApp( 9 | title: 'Flutter Demo', 10 | debugShowCheckedModeBanner: false, 11 | home: MyHomePage(), 12 | theme: ThemeData( 13 | colorScheme: ColorScheme.light(), 14 | primaryColor: ColorScheme.light().primary, 15 | primaryColorDark: ColorScheme.light().primary, 16 | ), 17 | ); 18 | } 19 | } 20 | 21 | class MyHomePage extends StatelessWidget { 22 | Widget build(BuildContext context) { 23 | return Scaffold( 24 | appBar: AppBar( 25 | title: Text('Banners'), 26 | ), 27 | body: MaterialBanner( 28 | content: const Text('Error message text'), 29 | leading: CircleAvatar(child: Icon(Icons.delete)), 30 | actions: [ 31 | FlatButton( 32 | child: const Text('ACTION 1'), 33 | onPressed: () {}, 34 | ), 35 | FlatButton( 36 | child: const Text('ACTION 2'), 37 | onPressed: () {}, 38 | ), 39 | ], 40 | ), 41 | ); 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /docs/components/dartpad/banners/theme/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Banner with Shrine Theme Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/bottom_app_bars/regular/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Bottom app bar Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart -------------------------------------------------------------------------------- /docs/components/dartpad/bottom_app_bars/regular/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return MaterialApp( 9 | title: 'Flutter Demo', 10 | home: MyHomePage(), 11 | ); 12 | } 13 | } 14 | 15 | class MyHomePage extends StatelessWidget { 16 | @override 17 | Widget build(BuildContext context) { 18 | return Scaffold( 19 | bottomNavigationBar: BottomAppBar( 20 | child: Row( 21 | children: [ 22 | IconButton(icon: Icon(Icons.menu), onPressed: () {}), 23 | Spacer(), 24 | IconButton(icon: Icon(Icons.search), onPressed: () {}), 25 | IconButton(icon: Icon(Icons.more_vert), onPressed: () {}), 26 | ], 27 | ), 28 | ), 29 | floatingActionButton: 30 | FloatingActionButton(child: Icon(Icons.add), onPressed: () {}), 31 | floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, 32 | ); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /docs/components/dartpad/bottom_app_bars/theme/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Bottom app bar with Theme Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart -------------------------------------------------------------------------------- /docs/components/dartpad/bottom_app_bars/theme/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return MaterialApp( 9 | title: 'Flutter Demo', 10 | home: MyHomePage(), 11 | theme: _buildShrineTheme(), 12 | ); 13 | } 14 | } 15 | 16 | class MyHomePage extends StatelessWidget { 17 | @override 18 | Widget build(BuildContext context) { 19 | return Scaffold( 20 | bottomNavigationBar: BottomAppBar( 21 | child: Row( 22 | children: [ 23 | IconButton(icon: Icon(Icons.menu), onPressed: () {}), 24 | Spacer(), 25 | IconButton(icon: Icon(Icons.search), onPressed: () {}), 26 | IconButton(icon: Icon(Icons.more_vert), onPressed: () {}), 27 | ], 28 | ), 29 | ), 30 | floatingActionButton: 31 | FloatingActionButton(child: Icon(Icons.add), onPressed: () {}), 32 | floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, 33 | ); 34 | } 35 | } 36 | 37 | ThemeData _buildShrineTheme() { 38 | final ThemeData base = ThemeData.light(); 39 | return base.copyWith( 40 | colorScheme: _shrineColorScheme, 41 | textTheme: _buildShrineTextTheme(base.textTheme), 42 | ); 43 | } 44 | 45 | TextTheme _buildShrineTextTheme(TextTheme base) { 46 | return base 47 | .copyWith( 48 | caption: base.caption.copyWith( 49 | fontWeight: FontWeight.w400, 50 | fontSize: 14, 51 | letterSpacing: defaultLetterSpacing, 52 | ), 53 | button: base.button.copyWith( 54 | fontWeight: FontWeight.w500, 55 | fontSize: 14, 56 | letterSpacing: defaultLetterSpacing, 57 | ), 58 | ) 59 | .apply( 60 | fontFamily: 'Rubik', 61 | displayColor: shrineBrown900, 62 | bodyColor: shrineBrown900, 63 | ); 64 | } 65 | 66 | const ColorScheme _shrineColorScheme = ColorScheme( 67 | primary: shrinePink100, 68 | primaryVariant: shrineBrown900, 69 | secondary: shrinePink50, 70 | secondaryVariant: shrineBrown900, 71 | surface: shrineSurfaceWhite, 72 | background: shrineBackgroundWhite, 73 | error: shrineErrorRed, 74 | onPrimary: shrineBrown900, 75 | onSecondary: shrineBrown900, 76 | onSurface: shrineBrown900, 77 | onBackground: shrineBrown900, 78 | onError: shrineSurfaceWhite, 79 | brightness: Brightness.light, 80 | ); 81 | 82 | const Color shrinePink50 = Color(0xFFFEEAE6); 83 | const Color shrinePink100 = Color(0xFFFEDBD0); 84 | const Color shrinePink300 = Color(0xFFFBB8AC); 85 | const Color shrinePink400 = Color(0xFFEAA4A4); 86 | 87 | const Color shrineBrown900 = Color(0xFF442B2D); 88 | const Color shrineBrown600 = Color(0xFF7D4F52); 89 | 90 | const Color shrineErrorRed = Color(0xFFC5032B); 91 | 92 | const Color shrineSurfaceWhite = Color(0xFFFFFBFA); 93 | const Color shrineBackgroundWhite = Colors.white; 94 | 95 | const defaultLetterSpacing = 0.03; 96 | -------------------------------------------------------------------------------- /docs/components/dartpad/bottom_navigation/regular/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Bottom Navigation Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart -------------------------------------------------------------------------------- /docs/components/dartpad/bottom_navigation/regular/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return MaterialApp( 9 | title: 'Flutter Demo', 10 | home: MyHomePage(), 11 | ); 12 | } 13 | } 14 | 15 | class MyHomePage extends StatefulWidget { 16 | @override 17 | _MyHomePageState createState() => _MyHomePageState(); 18 | } 19 | 20 | class _MyHomePageState extends State { 21 | int _currentIndex = 0; 22 | 23 | Widget build(BuildContext context) { 24 | return Scaffold( 25 | bottomNavigationBar: BottomNavigationBar( 26 | type: BottomNavigationBarType.fixed, 27 | currentIndex: _currentIndex, 28 | backgroundColor: Color(0xFF6200EE), 29 | selectedItemColor: Colors.white, 30 | unselectedItemColor: Colors.white.withOpacity(.6), 31 | selectedFontSize: 14, 32 | unselectedFontSize: 14, 33 | onTap: (value) { 34 | // Respond to item press. 35 | setState(() => _currentIndex = value); 36 | }, 37 | items: [ 38 | BottomNavigationBarItem( 39 | label: 'Favorites', 40 | icon: Icon(Icons.favorite), 41 | ), 42 | BottomNavigationBarItem( 43 | label: 'Music', 44 | icon: Icon(Icons.music_note), 45 | ), 46 | BottomNavigationBarItem( 47 | label: 'Places', 48 | icon: Icon(Icons.location_on), 49 | ), 50 | BottomNavigationBarItem( 51 | label: 'News', 52 | icon: Icon(Icons.library_books), 53 | ), 54 | ], 55 | ), 56 | ); 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /docs/components/dartpad/bottom_navigation/theme/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Bottom Navigation with Theme Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart -------------------------------------------------------------------------------- /docs/components/dartpad/bottom_navigation/theme/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return MaterialApp( 9 | theme: _buildShrineTheme(), 10 | title: 'Flutter Demo', 11 | home: MyHomePage(), 12 | ); 13 | } 14 | } 15 | 16 | class MyHomePage extends StatefulWidget { 17 | @override 18 | _MyHomePageState createState() => _MyHomePageState(); 19 | } 20 | 21 | class _MyHomePageState extends State { 22 | int _currentIndex = 0; 23 | 24 | Widget build(BuildContext context) { 25 | final colorScheme = Theme.of(context).colorScheme; 26 | final textTheme = Theme.of(context).textTheme; 27 | return Scaffold( 28 | bottomNavigationBar: BottomNavigationBar( 29 | type: BottomNavigationBarType.fixed, 30 | currentIndex: _currentIndex, 31 | backgroundColor: colorScheme.surface, 32 | selectedItemColor: colorScheme.onSurface, 33 | unselectedItemColor: colorScheme.onSurface.withOpacity(.60), 34 | selectedLabelStyle: textTheme.caption, 35 | unselectedLabelStyle: textTheme.caption, 36 | onTap: (value) { 37 | // Respond to item press. 38 | setState(() => _currentIndex = value); 39 | }, 40 | items: [ 41 | BottomNavigationBarItem( 42 | label: 'Favorites', 43 | icon: Icon(Icons.favorite), 44 | ), 45 | BottomNavigationBarItem( 46 | label: 'Music', 47 | icon: Icon(Icons.music_note), 48 | ), 49 | BottomNavigationBarItem( 50 | label: 'Places', 51 | icon: Icon(Icons.location_on), 52 | ), 53 | BottomNavigationBarItem( 54 | label: 'News', 55 | icon: Icon(Icons.library_books), 56 | ), 57 | ], 58 | ), 59 | ); 60 | } 61 | } 62 | 63 | ThemeData _buildShrineTheme() { 64 | final ThemeData base = ThemeData.light(); 65 | return base.copyWith( 66 | colorScheme: _shrineColorScheme, 67 | textTheme: _buildShrineTextTheme(base.textTheme), 68 | ); 69 | } 70 | 71 | TextTheme _buildShrineTextTheme(TextTheme base) { 72 | return base 73 | .copyWith( 74 | caption: base.caption.copyWith( 75 | fontWeight: FontWeight.w400, 76 | fontSize: 14, 77 | letterSpacing: defaultLetterSpacing, 78 | ), 79 | button: base.button.copyWith( 80 | fontWeight: FontWeight.w500, 81 | fontSize: 14, 82 | letterSpacing: defaultLetterSpacing, 83 | ), 84 | ) 85 | .apply( 86 | fontFamily: 'Rubik', 87 | displayColor: shrineBrown900, 88 | bodyColor: shrineBrown900, 89 | ); 90 | } 91 | 92 | const ColorScheme _shrineColorScheme = ColorScheme( 93 | primary: shrinePink100, 94 | primaryVariant: shrineBrown900, 95 | secondary: shrinePink50, 96 | secondaryVariant: shrineBrown900, 97 | surface: shrineSurfaceWhite, 98 | background: shrineBackgroundWhite, 99 | error: shrineErrorRed, 100 | onPrimary: shrineBrown900, 101 | onSecondary: shrineBrown900, 102 | onSurface: shrineBrown900, 103 | onBackground: shrineBrown900, 104 | onError: shrineSurfaceWhite, 105 | brightness: Brightness.light, 106 | ); 107 | 108 | const Color shrinePink50 = Color(0xFFFEEAE6); 109 | const Color shrinePink100 = Color(0xFFFEDBD0); 110 | const Color shrinePink300 = Color(0xFFFBB8AC); 111 | const Color shrinePink400 = Color(0xFFEAA4A4); 112 | 113 | const Color shrineBrown900 = Color(0xFF442B2D); 114 | const Color shrineBrown600 = Color(0xFF7D4F52); 115 | 116 | const Color shrineErrorRed = Color(0xFFC5032B); 117 | 118 | const Color shrineSurfaceWhite = Color(0xFFFFFBFA); 119 | const Color shrineBackgroundWhite = Colors.white; 120 | 121 | const defaultLetterSpacing = 0.03; 122 | -------------------------------------------------------------------------------- /docs/components/dartpad/bottom_sheets/modal/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Modal Bottom Sheet Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart -------------------------------------------------------------------------------- /docs/components/dartpad/bottom_sheets/modal/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() { 4 | runApp(MyApp()); 5 | } 6 | 7 | class MyApp extends StatelessWidget { 8 | @override 9 | Widget build(BuildContext context) { 10 | return MaterialApp( 11 | title: 'Standard Bottom Sheet Demo', 12 | home: Scaffold( 13 | // Use a Builder to get a context within the Scaffold. 14 | body: Builder( 15 | builder: (context) { 16 | return Center( 17 | child: TextButton( 18 | child: Text('SHOW BOTTOM SHEET'), 19 | onPressed: () { 20 | showModalBottomSheet( 21 | context: context, 22 | builder: (context) { 23 | // Using Wrap makes the bottom sheet height the height of the content. 24 | // Otherwise, the height will be half the height of the screen. 25 | return Wrap( 26 | children: [ 27 | ListTile( 28 | leading: Icon(Icons.share), 29 | title: Text('Share'), 30 | ), 31 | ListTile( 32 | leading: Icon(Icons.link), 33 | title: Text('Get link'), 34 | ), 35 | ListTile( 36 | leading: Icon(Icons.edit), 37 | title: Text('Edit name'), 38 | ), 39 | ListTile( 40 | leading: Icon(Icons.delete), 41 | title: Text('Delete collection'), 42 | ), 43 | ], 44 | ); 45 | }, 46 | ); 47 | }, 48 | ), 49 | ); 50 | }, 51 | ), 52 | ), 53 | ); 54 | } 55 | } -------------------------------------------------------------------------------- /docs/components/dartpad/bottom_sheets/standard/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Standard Bottom Sheet Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart -------------------------------------------------------------------------------- /docs/components/dartpad/bottom_sheets/standard/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() { 4 | runApp(MyApp()); 5 | } 6 | 7 | class MyApp extends StatelessWidget { 8 | @override 9 | Widget build(BuildContext context) { 10 | return MaterialApp( 11 | title: 'Standard Bottom Sheet Demo', 12 | debugShowCheckedModeBanner: false, 13 | theme: ThemeData( 14 | colorScheme: Theme.of(context).colorScheme.copyWith( 15 | primary: Color(0xFF6200EE), 16 | ), 17 | ), 18 | home: Scaffold( 19 | // Use a Builder to get a context within the Scaffold. 20 | body: Builder( 21 | builder: (context) { 22 | return Center( 23 | child: TextButton( 24 | child: Text('SHOW BOTTOM SHEET'), 25 | onPressed: () { 26 | showBottomSheet( 27 | context: context, 28 | builder: (context) { 29 | final theme = Theme.of(context); 30 | // Using Wrap makes the bottom sheet height the height of the content. 31 | // Otherwise, the height will be half the height of the screen. 32 | return Wrap( 33 | children: [ 34 | ListTile( 35 | title: Text( 36 | 'Header', 37 | style: theme.textTheme.subtitle1 38 | .copyWith(color: theme.colorScheme.onPrimary), 39 | ), 40 | tileColor: theme.colorScheme.primary, 41 | ), 42 | ListTile( 43 | title: Text('Title 1'), 44 | ), 45 | ListTile( 46 | title: Text('Title 2'), 47 | ), 48 | ListTile( 49 | title: Text('Title 3'), 50 | ), 51 | ListTile( 52 | title: Text('Title 4'), 53 | ), 54 | ListTile( 55 | title: Text('Title 5'), 56 | ), 57 | ], 58 | ); 59 | }, 60 | ); 61 | }, 62 | ), 63 | ); 64 | }, 65 | ), 66 | ), 67 | ); 68 | } 69 | } -------------------------------------------------------------------------------- /docs/components/dartpad/bottom_sheets/theme/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Standard Bottom Sheet with Theme Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart -------------------------------------------------------------------------------- /docs/components/dartpad/buttons/contained/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Contained Buttons Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart -------------------------------------------------------------------------------- /docs/components/dartpad/buttons/contained/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return MaterialApp( 9 | title: 'Flutter Demo', 10 | debugShowCheckedModeBanner: false, 11 | theme: ThemeData(colorScheme: ColorScheme.light()), 12 | home: MyHomePage(), 13 | ); 14 | } 15 | } 16 | 17 | class MyHomePage extends StatelessWidget { 18 | Widget build(BuildContext context) { 19 | return Scaffold( 20 | body: Center( 21 | child: Column( 22 | mainAxisAlignment: MainAxisAlignment.center, 23 | children: [ 24 | ElevatedButton( 25 | onPressed: () { 26 | // Respond to button press 27 | }, 28 | child: Text('CONTAINED BUTTON'), 29 | ), 30 | SizedBox(height: 8.0), 31 | ElevatedButton.icon( 32 | onPressed: () { 33 | // Respond to button press 34 | }, 35 | icon: Icon(Icons.add, size: 18), 36 | label: Text("CONTAINED BUTTON"), 37 | ), 38 | ], 39 | ), 40 | ), 41 | ); 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /docs/components/dartpad/buttons/icon/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Icon Buttons Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart -------------------------------------------------------------------------------- /docs/components/dartpad/buttons/icon/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return MaterialApp( 9 | title: 'Flutter Demo', 10 | debugShowCheckedModeBanner: false, 11 | home: MyHomePage(title: 'Flutter Demo Text Page'), 12 | ); 13 | } 14 | } 15 | 16 | class MyHomePage extends StatefulWidget { 17 | MyHomePage({Key key, this.title}) : super(key: key); 18 | 19 | final String title; 20 | 21 | @override 22 | _MyHomePageState createState() => _MyHomePageState(); 23 | } 24 | 25 | class _MyHomePageState extends State { 26 | final isSelected = [false, false, false]; 27 | 28 | Widget build(BuildContext context) { 29 | return Scaffold( 30 | body: Center( 31 | child: Column( 32 | mainAxisAlignment: MainAxisAlignment.center, 33 | children: [ 34 | ToggleButtons( 35 | color: Colors.black.withOpacity(0.60), 36 | selectedColor: Color(0xFF6200EE), 37 | selectedBorderColor: Color(0xFF6200EE), 38 | fillColor: Color(0xFF6200EE).withOpacity(0.08), 39 | splashColor: Color(0xFF6200EE).withOpacity(0.12), 40 | hoverColor: Color(0xFF6200EE).withOpacity(0.04), 41 | borderRadius: BorderRadius.circular(4.0), 42 | constraints: BoxConstraints(minHeight: 36.0), 43 | isSelected: isSelected, 44 | highlightColor: Colors.transparent, 45 | onPressed: (index) { 46 | // Respond to button selection 47 | setState(() { 48 | isSelected[index] = !isSelected[index]; 49 | }); 50 | }, 51 | children: [ 52 | Padding( 53 | padding: EdgeInsets.symmetric(horizontal: 16.0), 54 | child: Text('BUTTON 1'), 55 | ), 56 | Padding( 57 | padding: EdgeInsets.symmetric(horizontal: 16.0), 58 | child: Text('BUTTON 2'), 59 | ), 60 | Padding( 61 | padding: EdgeInsets.symmetric(horizontal: 16.0), 62 | child: Text('BUTTON 3'), 63 | ), 64 | ], 65 | ), 66 | ToggleButtons( 67 | color: Colors.black.withOpacity(0.60), 68 | selectedColor: Color(0xFF6200EE), 69 | selectedBorderColor: Color(0xFF6200EE), 70 | fillColor: Color(0xFF6200EE).withOpacity(0.08), 71 | splashColor: Color(0xFF6200EE).withOpacity(0.12), 72 | hoverColor: Color(0xFF6200EE).withOpacity(0.04), 73 | borderRadius: BorderRadius.circular(4.0), 74 | isSelected: isSelected, 75 | highlightColor: Colors.transparent, 76 | onPressed: (index) { 77 | // Respond to button selection 78 | setState(() { 79 | isSelected[index] = !isSelected[index]; 80 | }); 81 | }, 82 | children: [ 83 | Icon(Icons.favorite), 84 | Icon(Icons.visibility), 85 | Icon(Icons.notifications), 86 | ], 87 | ), 88 | ], 89 | ), 90 | ), 91 | ); 92 | } 93 | } 94 | -------------------------------------------------------------------------------- /docs/components/dartpad/buttons/outlined/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Outlined Buttons Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart -------------------------------------------------------------------------------- /docs/components/dartpad/buttons/outlined/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return MaterialApp( 9 | title: 'Flutter Demo', 10 | debugShowCheckedModeBanner: false, 11 | theme: ThemeData(colorScheme: ColorScheme.light()), 12 | home: MyHomePage(), 13 | ); 14 | } 15 | } 16 | 17 | class MyHomePage extends StatelessWidget { 18 | Widget build(BuildContext context) { 19 | return Scaffold( 20 | body: Center( 21 | child: Column( 22 | mainAxisAlignment: MainAxisAlignment.center, 23 | children: [ 24 | OutlinedButton( 25 | onPressed: () { 26 | // Respond to button press 27 | }, 28 | child: Text("OUTLINED BUTTON"), 29 | ), 30 | SizedBox(height: 8.0), 31 | OutlinedButton.icon( 32 | onPressed: () { 33 | // Respond to button press 34 | }, 35 | icon: Icon(Icons.add, size: 18), 36 | label: Text("OUTLINED BUTTON"), 37 | ), 38 | ], 39 | ), 40 | ), 41 | ); 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /docs/components/dartpad/buttons/text/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Text Buttons Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart -------------------------------------------------------------------------------- /docs/components/dartpad/buttons/text/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return MaterialApp( 9 | title: 'Flutter Demo', 10 | debugShowCheckedModeBanner: false, 11 | theme: ThemeData(colorScheme: ColorScheme.light()), 12 | home: MyHomePage(), 13 | ); 14 | } 15 | } 16 | 17 | class MyHomePage extends StatelessWidget { 18 | @override 19 | Widget build(BuildContext context) { 20 | return Scaffold( 21 | body: Center( 22 | child: Column( 23 | mainAxisAlignment: MainAxisAlignment.center, 24 | children: [ 25 | TextButton( 26 | onPressed: () { 27 | // Respond to button press 28 | }, 29 | child: Text("TEXT BUTTON"), 30 | ), 31 | SizedBox(height: 8.0), 32 | TextButton.icon( 33 | onPressed: () { 34 | // Respond to button press 35 | }, 36 | icon: Icon(Icons.add, size: 18), 37 | label: Text("TEXT BUTTON"), 38 | ), 39 | ], 40 | ), 41 | ), 42 | ); 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /docs/components/dartpad/buttons/theme/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Buttons with Theme Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart -------------------------------------------------------------------------------- /docs/components/dartpad/buttons/toggle/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Toggle Buttons Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart -------------------------------------------------------------------------------- /docs/components/dartpad/buttons/toggle/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return MaterialApp( 9 | title: 'Flutter Demo', 10 | debugShowCheckedModeBanner: false, 11 | home: MyHomePage(title: 'Flutter Demo Text Page'), 12 | ); 13 | } 14 | } 15 | 16 | class MyHomePage extends StatefulWidget { 17 | MyHomePage({Key key, this.title}) : super(key: key); 18 | 19 | final String title; 20 | 21 | @override 22 | _MyHomePageState createState() => _MyHomePageState(); 23 | } 24 | 25 | class _MyHomePageState extends State { 26 | final isSelected = [false, false, false]; 27 | 28 | Widget build(BuildContext context) { 29 | return Scaffold( 30 | body: Center( 31 | child: Column( 32 | mainAxisAlignment: MainAxisAlignment.center, 33 | children: [ 34 | ToggleButtons( 35 | color: Colors.black.withOpacity(0.60), 36 | selectedColor: Color(0xFF6200EE), 37 | selectedBorderColor: Color(0xFF6200EE), 38 | fillColor: Color(0xFF6200EE).withOpacity(0.08), 39 | splashColor: Color(0xFF6200EE).withOpacity(0.12), 40 | hoverColor: Color(0xFF6200EE).withOpacity(0.04), 41 | borderRadius: BorderRadius.circular(4.0), 42 | constraints: BoxConstraints(minHeight: 36.0), 43 | isSelected: isSelected, 44 | highlightColor: Colors.transparent, 45 | onPressed: (index) { 46 | // Respond to button selection 47 | setState(() { 48 | isSelected[index] = !isSelected[index]; 49 | }); 50 | }, 51 | children: [ 52 | Padding( 53 | padding: EdgeInsets.symmetric(horizontal: 16.0), 54 | child: Text('BUTTON 1'), 55 | ), 56 | Padding( 57 | padding: EdgeInsets.symmetric(horizontal: 16.0), 58 | child: Text('BUTTON 2'), 59 | ), 60 | Padding( 61 | padding: EdgeInsets.symmetric(horizontal: 16.0), 62 | child: Text('BUTTON 3'), 63 | ), 64 | ], 65 | ), 66 | ToggleButtons( 67 | color: Colors.black.withOpacity(0.60), 68 | selectedColor: Color(0xFF6200EE), 69 | selectedBorderColor: Color(0xFF6200EE), 70 | fillColor: Color(0xFF6200EE).withOpacity(0.08), 71 | splashColor: Color(0xFF6200EE).withOpacity(0.12), 72 | hoverColor: Color(0xFF6200EE).withOpacity(0.04), 73 | borderRadius: BorderRadius.circular(4.0), 74 | isSelected: isSelected, 75 | highlightColor: Colors.transparent, 76 | onPressed: (index) { 77 | // Respond to button selection 78 | setState(() { 79 | isSelected[index] = !isSelected[index]; 80 | }); 81 | }, 82 | children: [ 83 | Icon(Icons.favorite), 84 | Icon(Icons.visibility), 85 | Icon(Icons.notifications), 86 | ], 87 | ), 88 | ], 89 | ), 90 | ), 91 | ); 92 | } 93 | } 94 | -------------------------------------------------------------------------------- /docs/components/dartpad/cards/elevated/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Elevated Cards Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart -------------------------------------------------------------------------------- /docs/components/dartpad/cards/theme/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Elevated Cards with Theme Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart -------------------------------------------------------------------------------- /docs/components/dartpad/checkboxes/regular/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Checkboxes Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/checkboxes/regular/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() { 4 | runApp(App()); 5 | } 6 | 7 | class App extends StatelessWidget { 8 | @override 9 | Widget build(BuildContext context) { 10 | return MaterialApp( 11 | title: 'Checkboxes Demo', 12 | debugShowCheckedModeBanner: false, 13 | home: CheckboxesDemo(), 14 | ); 15 | } 16 | } 17 | 18 | class CheckboxesDemo extends StatefulWidget { 19 | @override 20 | _CheckboxesDemoState createState() => _CheckboxesDemoState(); 21 | } 22 | 23 | class _CheckboxesDemoState extends State { 24 | List checked = [true, true, false, false, true]; 25 | 26 | @override 27 | Widget build(BuildContext context) { 28 | return Scaffold( 29 | appBar: AppBar( 30 | title: Text('Checkboxes Demo'), 31 | backgroundColor: Color(0xFF6200EE), 32 | ), 33 | body: Container( 34 | margin: EdgeInsets.symmetric(vertical: 40), 35 | child: Column( 36 | children: [ 37 | for (var i = 0; i < 5; i += 1) 38 | Row( 39 | children: [ 40 | Checkbox( 41 | onChanged: i == 4 42 | ? null 43 | : (bool value) { 44 | setState(() { 45 | checked[i] = value; 46 | }); 47 | }, 48 | tristate: i == 1, 49 | value: checked[i], 50 | activeColor: Color(0xFF6200EE), 51 | ), 52 | Text( 53 | 'Checkbox ${i + 1}', 54 | style: Theme.of(context).textTheme.subtitle1.copyWith( 55 | color: i == 4 ? Colors.black38 : Colors.black, 56 | ), 57 | ), 58 | ], 59 | mainAxisAlignment: MainAxisAlignment.center, 60 | ), 61 | ], 62 | ), 63 | ), 64 | ); 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /docs/components/dartpad/checkboxes/theme/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Themed Checkboxes Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/chips/action/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Action Chips Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/chips/action/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() { 4 | runApp(App()); 5 | } 6 | 7 | class App extends StatelessWidget { 8 | @override 9 | Widget build(BuildContext context) { 10 | return MaterialApp( 11 | title: 'Action Chip Demo', 12 | debugShowCheckedModeBanner: false, 13 | home: Scaffold( 14 | appBar: AppBar( 15 | title: Text('Action Chips Demo'), 16 | ), 17 | body: Center( 18 | child: Column( 19 | children: [ 20 | ActionChip( 21 | avatar: Icon(Icons.favorite), 22 | label: Text('Action 1'), 23 | onPressed: () {}, 24 | ), 25 | ActionChip( 26 | avatar: Icon(Icons.delete), 27 | label: Text('Action 2'), 28 | onPressed: () {}, 29 | ), 30 | ActionChip( 31 | avatar: Icon(Icons.alarm), 32 | label: Text('Action 3'), 33 | onPressed: () {}, 34 | ), 35 | ActionChip( 36 | avatar: Icon(Icons.location_on), 37 | label: Text('Action 4'), 38 | onPressed: () {}, 39 | ), 40 | ], 41 | ), 42 | ), 43 | ), 44 | ); 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /docs/components/dartpad/chips/choice/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Choice Chips Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/chips/choice/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() { 4 | runApp(App()); 5 | } 6 | 7 | class App extends StatelessWidget { 8 | @override 9 | Widget build(BuildContext context) { 10 | return MaterialApp( 11 | title: 'Choice Chips Demo', 12 | debugShowCheckedModeBanner: false, 13 | home: Scaffold( 14 | appBar: AppBar( 15 | title: Text('Choice Chips Demo'), 16 | ), 17 | body: Center( 18 | child: Column( 19 | children: [ 20 | ChoiceChip( 21 | label: Text('Choice 1'), 22 | selected: true, 23 | ), 24 | ChoiceChip( 25 | label: Text('Choice 2'), 26 | selected: false, 27 | ), 28 | ChoiceChip( 29 | label: Text('Choice 3'), 30 | selected: false, 31 | ), 32 | ChoiceChip( 33 | label: Text('Choice 4'), 34 | selected: false, 35 | ), 36 | ], 37 | ), 38 | ), 39 | ), 40 | ); 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /docs/components/dartpad/chips/filter/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Filter Chips Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/chips/filter/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() { 4 | runApp(App()); 5 | } 6 | 7 | class App extends StatelessWidget { 8 | @override 9 | Widget build(BuildContext context) { 10 | return MaterialApp( 11 | title: 'Filter Chips Demo', 12 | debugShowCheckedModeBanner: false, 13 | home: Scaffold( 14 | appBar: AppBar( 15 | title: Text('Filter Chips Demo'), 16 | ), 17 | body: Center( 18 | child: Column( 19 | children: [ 20 | FilterChip( 21 | label: Text('Filter 1'), 22 | selected: true, 23 | onSelected: (bool value) {}, 24 | ), 25 | FilterChip( 26 | label: Text('Filter 2'), 27 | onSelected: (bool value) {}, 28 | ), 29 | FilterChip( 30 | label: Text('Filter 3'), 31 | selected: true, 32 | onSelected: (bool value) {}, 33 | ), 34 | FilterChip( 35 | label: Text('Filter 4'), 36 | onSelected: (bool value) {}, 37 | ), 38 | FilterChip( 39 | label: Text('Filter 5'), 40 | onSelected: (bool value) {}, 41 | ), 42 | FilterChip( 43 | label: Text('Filter 6'), 44 | onSelected: (bool value) {}, 45 | ), 46 | ], 47 | ), 48 | ), 49 | ), 50 | ); 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /docs/components/dartpad/chips/input/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Input Chips Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/chips/input/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() { 4 | runApp(App()); 5 | } 6 | 7 | class App extends StatelessWidget { 8 | @override 9 | Widget build(BuildContext context) { 10 | return MaterialApp( 11 | title: 'Input Chips Demo', 12 | debugShowCheckedModeBanner: false, 13 | home: Scaffold( 14 | appBar: AppBar( 15 | title: Text('Input Chips Demo'), 16 | ), 17 | body: Center( 18 | child: Column( 19 | children: [ 20 | InputChip( 21 | avatar: Icon(Icons.remove), 22 | label: Text('Input 1'), 23 | onSelected: (bool value) {}, 24 | ), 25 | InputChip( 26 | avatar: Icon(Icons.remove), 27 | label: Text('Input 2'), 28 | onSelected: (bool value) {}, 29 | ), 30 | InputChip( 31 | avatar: Icon(Icons.remove), 32 | label: Text('Input 3'), 33 | onSelected: (bool value) {}, 34 | ), 35 | ], 36 | ), 37 | ), 38 | ), 39 | ); 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /docs/components/dartpad/chips/theme/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Theme Chips Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/chips/theme/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() { 4 | runApp(App()); 5 | } 6 | 7 | class App extends StatelessWidget { 8 | @override 9 | Widget build(BuildContext context) { 10 | return MaterialApp( 11 | title: 'Checkboxes Demo', 12 | debugShowCheckedModeBanner: false, 13 | theme: _buildShrineTheme(), 14 | home: Scaffold( 15 | appBar: AppBar( 16 | title: Text('Input Theme Chips Demo'), 17 | ), 18 | body: Center( 19 | child: Column( 20 | children: [ 21 | InputChip( 22 | avatar: Icon(Icons.add_shopping_cart), 23 | label: Text('Input 1'), 24 | onSelected: (bool value) {}, 25 | ), 26 | InputChip( 27 | avatar: Icon(Icons.card_giftcard), 28 | label: Text('Input 2'), 29 | onSelected: (bool value) {}, 30 | ), 31 | InputChip( 32 | avatar: Icon(Icons.credit_card), 33 | label: Text('Input 3'), 34 | onSelected: (bool value) {}, 35 | ), 36 | ], 37 | ), 38 | ), 39 | ), 40 | ); 41 | } 42 | } 43 | 44 | ThemeData _buildShrineTheme() { 45 | final ThemeData base = ThemeData.light(); 46 | return base.copyWith( 47 | colorScheme: _shrineColorScheme, 48 | toggleableActiveColor: shrinePink400, 49 | accentColor: shrineBrown900, 50 | primaryColor: shrinePink100, 51 | buttonColor: shrinePink100, 52 | scaffoldBackgroundColor: shrineBackgroundWhite, 53 | cardColor: shrineBackgroundWhite, 54 | textSelectionTheme: TextSelectionThemeData(selectionColor: shrinePink100), 55 | errorColor: shrineErrorRed, 56 | primaryIconTheme: _customIconTheme(base.iconTheme), 57 | textTheme: _buildShrineTextTheme(base.textTheme), 58 | primaryTextTheme: _buildShrineTextTheme(base.primaryTextTheme), 59 | accentTextTheme: _buildShrineTextTheme(base.accentTextTheme), 60 | iconTheme: _customIconTheme(base.iconTheme), 61 | ); 62 | } 63 | 64 | IconThemeData _customIconTheme(IconThemeData original) { 65 | return original.copyWith(color: shrineBrown900); 66 | } 67 | 68 | TextTheme _buildShrineTextTheme(TextTheme base) { 69 | return base.apply( 70 | fontFamily: 'Rubik', 71 | displayColor: shrineBrown900, 72 | bodyColor: shrineBrown900, 73 | ); 74 | } 75 | 76 | const ColorScheme _shrineColorScheme = ColorScheme( 77 | primary: shrinePink100, 78 | primaryVariant: shrineBrown900, 79 | secondary: shrinePink50, 80 | secondaryVariant: shrineBrown900, 81 | surface: shrineSurfaceWhite, 82 | background: shrineBackgroundWhite, 83 | error: shrineErrorRed, 84 | onPrimary: shrineBrown900, 85 | onSecondary: shrineBrown900, 86 | onSurface: shrineBrown900, 87 | onBackground: shrineBrown900, 88 | onError: shrineSurfaceWhite, 89 | brightness: Brightness.light, 90 | ); 91 | 92 | const Color shrinePink50 = Color(0xFFFEEAE6); 93 | const Color shrinePink100 = Color(0xFFFEDBD0); 94 | const Color shrinePink300 = Color(0xFFFBB8AC); 95 | const Color shrinePink400 = Color(0xFFEAA4A4); 96 | 97 | const Color shrineBrown900 = Color(0xFF442B2D); 98 | const Color shrineBrown600 = Color(0xFF7D4F52); 99 | 100 | const Color shrineErrorRed = Color(0xFFC5032B); 101 | 102 | const Color shrineSurfaceWhite = Color(0xFFFFFBFA); 103 | const Color shrineBackgroundWhite = Colors.white; 104 | -------------------------------------------------------------------------------- /docs/components/dartpad/data_tables/normal/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Data Tables Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart -------------------------------------------------------------------------------- /docs/components/dartpad/data_tables/normal/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return MaterialApp( 9 | title: 'Flutter Demo', 10 | debugShowCheckedModeBanner: false, 11 | home: DataTableDemo(), 12 | ); 13 | } 14 | } 15 | 16 | class DataTableDemo extends StatelessWidget { 17 | Widget build(BuildContext context) { 18 | return Scaffold( 19 | appBar: AppBar( 20 | title: Text('Data Tables'), 21 | ), 22 | body: ListView( 23 | padding: const EdgeInsets.all(16), 24 | children: [ 25 | PaginatedDataTable( 26 | header: Text('Header Text'), 27 | rowsPerPage: 4, 28 | columns: [ 29 | DataColumn(label: Text('Header A')), 30 | DataColumn(label: Text('Header B')), 31 | DataColumn(label: Text('Header C')), 32 | DataColumn(label: Text('Header D')), 33 | ], 34 | source: _DataSource(context), 35 | ), 36 | ], 37 | ), 38 | ); 39 | } 40 | } 41 | 42 | class _Row { 43 | _Row( 44 | this.valueA, 45 | this.valueB, 46 | this.valueC, 47 | this.valueD, 48 | ); 49 | 50 | final String valueA; 51 | final String valueB; 52 | final String valueC; 53 | final int valueD; 54 | 55 | bool selected = false; 56 | } 57 | 58 | class _DataSource extends DataTableSource { 59 | _DataSource(this.context) { 60 | _rows = <_Row>[ 61 | _Row('Cell A1', 'CellB1', 'CellC1', 1), 62 | _Row('Cell A2', 'CellB2', 'CellC2', 2), 63 | _Row('Cell A3', 'CellB3', 'CellC3', 3), 64 | _Row('Cell A4', 'CellB4', 'CellC4', 4), 65 | ]; 66 | } 67 | 68 | final BuildContext context; 69 | List<_Row> _rows; 70 | 71 | int _selectedCount = 0; 72 | 73 | @override 74 | DataRow getRow(int index) { 75 | assert(index >= 0); 76 | if (index >= _rows.length) return null; 77 | final row = _rows[index]; 78 | return DataRow.byIndex( 79 | index: index, 80 | selected: row.selected, 81 | onSelectChanged: (value) { 82 | if (row.selected != value) { 83 | _selectedCount += value ? 1 : -1; 84 | assert(_selectedCount >= 0); 85 | row.selected = value; 86 | notifyListeners(); 87 | } 88 | }, 89 | cells: [ 90 | DataCell(Text(row.valueA)), 91 | DataCell(Text(row.valueB)), 92 | DataCell(Text(row.valueC)), 93 | DataCell(Text(row.valueD.toString())), 94 | ], 95 | ); 96 | } 97 | 98 | @override 99 | int get rowCount => _rows.length; 100 | 101 | @override 102 | bool get isRowCountApproximate => false; 103 | 104 | @override 105 | int get selectedRowCount => _selectedCount; 106 | } 107 | -------------------------------------------------------------------------------- /docs/components/dartpad/data_tables/theme/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Data Tables with Theme Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart -------------------------------------------------------------------------------- /docs/components/dartpad/date_pickers/range/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Regular Date Range Pickers Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/date_pickers/range/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return MaterialApp( 9 | title: 'Time Picker Demo', 10 | debugShowCheckedModeBanner: false, 11 | theme: ThemeData( 12 | colorScheme: ColorScheme.light(), 13 | primaryColor: ColorScheme.light().primary, 14 | ), 15 | home: MyHomePage(), 16 | ); 17 | } 18 | } 19 | 20 | class MyHomePage extends StatefulWidget { 21 | @override 22 | _MyHomePageState createState() => _MyHomePageState(); 23 | } 24 | 25 | class _MyHomePageState extends State { 26 | DateTimeRange _date = DateTimeRange( 27 | start: DateTime(2020, 11, 17), 28 | end: DateTime(2020, 11, 24), 29 | ); 30 | 31 | void _selectDate() async { 32 | final DateTimeRange newDate = await showDateRangePicker( 33 | context: context, 34 | initialDateRange: _date, 35 | firstDate: DateTime(2017, 1), 36 | lastDate: DateTime(2022, 7), 37 | helpText: 'Select a date range', 38 | ); 39 | if (newDate != null) { 40 | setState(() { 41 | _date = newDate; 42 | }); 43 | } 44 | } 45 | 46 | @override 47 | Widget build(BuildContext context) { 48 | return Scaffold( 49 | body: Center( 50 | child: Column( 51 | mainAxisAlignment: MainAxisAlignment.center, 52 | children: [ 53 | ElevatedButton( 54 | onPressed: _selectDate, 55 | child: Text('SELECT DATE RANGE'), 56 | ), 57 | SizedBox(height: 8), 58 | Center( 59 | child: Text( 60 | 'Selected date range: \n$_date', 61 | textAlign: TextAlign.center, 62 | ), 63 | ), 64 | ], 65 | ), 66 | ), 67 | ); 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /docs/components/dartpad/date_pickers/regular/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Regular Date Pickers Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/date_pickers/regular/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return MaterialApp( 9 | title: 'Time Picker Demo', 10 | debugShowCheckedModeBanner: false, 11 | theme: ThemeData(colorScheme: ColorScheme.light()), 12 | home: MyHomePage(), 13 | ); 14 | } 15 | } 16 | 17 | class MyHomePage extends StatefulWidget { 18 | @override 19 | _MyHomePageState createState() => _MyHomePageState(); 20 | } 21 | 22 | class _MyHomePageState extends State { 23 | DateTime _date = DateTime(2020, 11, 17); 24 | 25 | void _selectDate() async { 26 | final DateTime newDate = await showDatePicker( 27 | context: context, 28 | initialDate: _date, 29 | firstDate: DateTime(2017, 1), 30 | lastDate: DateTime(2022, 7), 31 | helpText: 'Select a date', 32 | ); 33 | if (newDate != null) { 34 | setState(() { 35 | _date = newDate; 36 | }); 37 | } 38 | } 39 | 40 | @override 41 | Widget build(BuildContext context) { 42 | return Scaffold( 43 | body: Center( 44 | child: Column( 45 | mainAxisAlignment: MainAxisAlignment.center, 46 | children: [ 47 | ElevatedButton( 48 | onPressed: _selectDate, 49 | child: Text('SELECT DATE'), 50 | ), 51 | SizedBox(height: 8), 52 | Text( 53 | 'Selected date: $_date', 54 | ), 55 | ], 56 | ), 57 | ), 58 | ); 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /docs/components/dartpad/date_pickers/theme/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Date Pickers with Shrine Theme Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/dialogs/alert/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Alert Dialog Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/dialogs/alert/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return MaterialApp( 9 | title: 'Flutter Demo', 10 | debugShowCheckedModeBanner: false, 11 | home: MyHomePage(), 12 | ); 13 | } 14 | } 15 | 16 | class MyHomePage extends StatelessWidget { 17 | @override 18 | Widget build(BuildContext context) { 19 | final AlertDialog dialog = AlertDialog( 20 | title: Text('Reset settings?'), 21 | content: 22 | Text('This will reset your device to its default factory settings.'), 23 | actions: [ 24 | FlatButton( 25 | textColor: Color(0xFF6200EE), 26 | onPressed: () => Navigator.pop(context), 27 | child: Text('CANCEL'), 28 | ), 29 | FlatButton( 30 | textColor: Color(0xFF6200EE), 31 | onPressed: () => Navigator.pop(context), 32 | child: Text('ACCEPT'), 33 | ), 34 | ], 35 | ); 36 | return Scaffold( 37 | body: Center( 38 | child: FlatButton( 39 | textColor: Color(0xFF6200EE), 40 | highlightColor: Colors.transparent, 41 | onPressed: () { 42 | showDialog(context: context, builder: (context) => dialog); 43 | }, 44 | child: Text("SHOW DIALOG"), 45 | ), 46 | ), 47 | ); 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /docs/components/dartpad/dialogs/fullscreen/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Full-screen Dialog Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/dialogs/fullscreen/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return MaterialApp( 9 | title: 'Flutter Demo', 10 | debugShowCheckedModeBanner: false, 11 | home: MyHomePage(), 12 | ); 13 | } 14 | } 15 | 16 | class MyHomePage extends StatelessWidget { 17 | @override 18 | Widget build(BuildContext context) { 19 | return Scaffold( 20 | body: Center( 21 | child: FlatButton( 22 | textColor: Color(0xFF6200EE), 23 | highlightColor: Colors.transparent, 24 | onPressed: () { 25 | Navigator.push( 26 | context, 27 | MaterialPageRoute( 28 | builder: (BuildContext context) => FullScreenDialog(), 29 | fullscreenDialog: true, 30 | ), 31 | ); 32 | }, 33 | child: Text("SHOW DIALOG"), 34 | ), 35 | ), 36 | ); 37 | } 38 | } 39 | 40 | class FullScreenDialog extends StatelessWidget { 41 | @override 42 | Widget build(BuildContext context) { 43 | return Scaffold( 44 | appBar: AppBar( 45 | backgroundColor: Color(0xFF6200EE), 46 | title: Text('Full-screen Dialog'), 47 | ), 48 | body: Center( 49 | child: Text("Full-screen dialog"), 50 | ), 51 | ); 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /docs/components/dartpad/dialogs/simple/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Simple Dialog Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/dialogs/simple/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return MaterialApp( 9 | title: 'Flutter Demo', 10 | debugShowCheckedModeBanner: false, 11 | home: MyHomePage(), 12 | ); 13 | } 14 | } 15 | 16 | class MyHomePage extends StatelessWidget { 17 | @override 18 | Widget build(BuildContext context) { 19 | final SimpleDialog dialog = SimpleDialog( 20 | title: Text('Set backup account'), 21 | children: [ 22 | SimpleDialogItem( 23 | icon: Icons.account_circle, 24 | color: Colors.orange, 25 | text: 'user01@gmail.com', 26 | onPressed: () { 27 | Navigator.pop(context, 'user01@gmail.com'); 28 | }, 29 | ), 30 | SimpleDialogItem( 31 | icon: Icons.account_circle, 32 | color: Colors.green, 33 | text: 'user02@gmail.com', 34 | onPressed: () { 35 | Navigator.pop(context, 'user02@gmail.com'); 36 | }, 37 | ), 38 | SimpleDialogItem( 39 | icon: Icons.add_circle, 40 | color: Colors.grey, 41 | text: 'Add account', 42 | onPressed: () { 43 | Navigator.pop(context, 'Add account'); 44 | }, 45 | ), 46 | ], 47 | ); 48 | 49 | return Scaffold( 50 | body: Center( 51 | child: FlatButton( 52 | textColor: Color(0xFF6200EE), 53 | highlightColor: Colors.transparent, 54 | onPressed: () { 55 | showDialog(context: context, builder: (context) => dialog); 56 | }, 57 | child: Text("SHOW DIALOG"), 58 | ), 59 | ), 60 | ); 61 | } 62 | } 63 | 64 | class SimpleDialogItem extends StatelessWidget { 65 | const SimpleDialogItem( 66 | {Key key, this.icon, this.color, this.text, this.onPressed}) 67 | : super(key: key); 68 | 69 | final IconData icon; 70 | final Color color; 71 | final String text; 72 | final VoidCallback onPressed; 73 | 74 | @override 75 | Widget build(BuildContext context) { 76 | return SimpleDialogOption( 77 | onPressed: onPressed, 78 | child: Row( 79 | mainAxisAlignment: MainAxisAlignment.start, 80 | crossAxisAlignment: CrossAxisAlignment.center, 81 | children: [ 82 | Icon(icon, size: 36.0, color: color), 83 | Padding( 84 | padding: const EdgeInsetsDirectional.only(start: 16.0), 85 | child: Text(text), 86 | ), 87 | ], 88 | ), 89 | ); 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /docs/components/dartpad/dialogs/theme/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Dialog with Shrine Theme Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/dividers/divider/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Divider Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart -------------------------------------------------------------------------------- /docs/components/dartpad/dividers/divider/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return MaterialApp( 9 | home: Scaffold( 10 | body: MyStatelessWidget(), 11 | ), 12 | ); 13 | } 14 | } 15 | 16 | class MyStatelessWidget extends StatelessWidget { 17 | MyStatelessWidget({Key key}) : super(key: key); 18 | 19 | @override 20 | Widget build(BuildContext context) { 21 | return Center( 22 | child: Column( 23 | children: [ 24 | Expanded( 25 | child: Container( 26 | child: const Center( 27 | child: Text('Start'), 28 | ), 29 | ), 30 | ), 31 | const Divider(), 32 | Expanded( 33 | child: Container( 34 | child: const Center( 35 | child: Text('End'), 36 | ), 37 | ), 38 | ), 39 | ], 40 | ), 41 | ); 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /docs/components/dartpad/dividers/full_bleed_divider/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Full bleed Divider Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/dividers/full_bleed_divider/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return MaterialApp( 9 | home: Scaffold( 10 | body: FullBleedDemonstration(), 11 | ), 12 | ); 13 | } 14 | } 15 | 16 | class FullBleedDemonstration extends StatelessWidget { 17 | FullBleedDemonstration({Key key}) : super(key: key); 18 | 19 | @override 20 | Widget build(BuildContext context) { 21 | return Center( 22 | child: Column( 23 | children: [ 24 | Expanded( 25 | child: Container( 26 | color: Theme.of(context).scaffoldBackgroundColor, 27 | child: const Center( 28 | child: Text('Item 1'), 29 | ), 30 | ), 31 | ), 32 | const Divider(), 33 | Expanded( 34 | child: Container( 35 | color: Theme.of(context).scaffoldBackgroundColor, 36 | child: const Center( 37 | child: Text('Item 2'), 38 | ), 39 | ), 40 | ), 41 | const Divider(), 42 | Expanded( 43 | child: Container( 44 | color: Theme.of(context).scaffoldBackgroundColor, 45 | child: const Center( 46 | child: Text('Item 3'), 47 | ), 48 | ), 49 | ), 50 | const Divider(), 51 | Expanded( 52 | child: Container( 53 | color: Theme.of(context).scaffoldBackgroundColor, 54 | child: const Center( 55 | child: Text('Item 4'), 56 | ), 57 | ), 58 | ), 59 | const Divider(), 60 | Expanded( 61 | child: Container( 62 | color: Theme.of(context).scaffoldBackgroundColor, 63 | child: const Center( 64 | child: Text('Item 5'), 65 | ), 66 | ), 67 | ), 68 | const Divider(), 69 | Expanded( 70 | child: Container( 71 | color: Theme.of(context).scaffoldBackgroundColor, 72 | child: const Center( 73 | child: Text('Item 6'), 74 | ), 75 | ), 76 | ), 77 | const Divider(), 78 | Expanded( 79 | child: Container( 80 | color: Theme.of(context).scaffoldBackgroundColor, 81 | child: const Center( 82 | child: Text('Item 7'), 83 | ), 84 | ), 85 | ), 86 | ], 87 | ), 88 | ); 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /docs/components/dartpad/dividers/inset_divider/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Inset Divider Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/dividers/inset_divider/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return MaterialApp( 9 | home: Scaffold( 10 | body: InsetDividerDemonstration(), 11 | ), 12 | ); 13 | } 14 | } 15 | 16 | class InsetDividerDemonstration extends StatelessWidget { 17 | InsetDividerDemonstration({Key key}) : super(key: key); 18 | 19 | @override 20 | Widget build(BuildContext context) { 21 | return Column( 22 | children: [ 23 | Expanded( 24 | child: Container( 25 | color: Theme.of(context).scaffoldBackgroundColor, 26 | child: const Center( 27 | child: Text('A1'), 28 | ), 29 | ), 30 | ), 31 | Expanded( 32 | child: Container( 33 | color: Theme.of(context).scaffoldBackgroundColor, 34 | child: const Center( 35 | child: Text('A2'), 36 | ), 37 | ), 38 | ), 39 | Expanded( 40 | child: Container( 41 | color: Theme.of(context).scaffoldBackgroundColor, 42 | child: const Center( 43 | child: Text('A3'), 44 | ), 45 | ), 46 | ), 47 | const Divider(indent: 16), 48 | Container( 49 | padding: EdgeInsets.only(left: 16), 50 | child: Align( 51 | alignment: Alignment.centerLeft, 52 | child: Text( 53 | 'Subheader', 54 | style: Theme.of(context).textTheme.bodyText2.copyWith( 55 | fontSize: 12.0, 56 | color: Theme.of(context).textTheme.caption.color), 57 | textAlign: TextAlign.start, 58 | ), 59 | ), 60 | ), 61 | Expanded( 62 | child: Container( 63 | color: Theme.of(context).scaffoldBackgroundColor, 64 | child: const Center( 65 | child: Text('B1'), 66 | ), 67 | ), 68 | ), 69 | Expanded( 70 | child: Container( 71 | color: Theme.of(context).scaffoldBackgroundColor, 72 | child: const Center( 73 | child: Text('B2'), 74 | ), 75 | ), 76 | ), 77 | Expanded( 78 | child: Container( 79 | color: Theme.of(context).scaffoldBackgroundColor, 80 | child: const Center( 81 | child: Text('B3'), 82 | ), 83 | ), 84 | ), 85 | ], 86 | ); 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /docs/components/dartpad/dividers/middle_divider/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Middle Divider Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/dividers/middle_divider/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return MaterialApp( 9 | home: Scaffold( 10 | body: MiddleDividerDemonstration(), 11 | ), 12 | ); 13 | } 14 | } 15 | 16 | class MiddleDividerDemonstration extends StatelessWidget { 17 | MiddleDividerDemonstration({Key key}) : super(key: key); 18 | 19 | @override 20 | Widget build(BuildContext context) { 21 | return Center( 22 | child: Column( 23 | children: [ 24 | Expanded( 25 | child: Container( 26 | color: Theme.of(context).scaffoldBackgroundColor, 27 | child: const Center( 28 | child: Text('Item 1'), 29 | ), 30 | ), 31 | ), 32 | Expanded( 33 | child: Container( 34 | color: Theme.of(context).scaffoldBackgroundColor, 35 | child: const Center( 36 | child: Text('Item 2'), 37 | ), 38 | ), 39 | ), 40 | Expanded( 41 | child: Container( 42 | color: Theme.of(context).scaffoldBackgroundColor, 43 | child: const Center( 44 | child: Text('Item 3'), 45 | ), 46 | ), 47 | ), 48 | Expanded( 49 | child: Container( 50 | color: Theme.of(context).scaffoldBackgroundColor, 51 | child: const Center( 52 | child: Text('Item 4'), 53 | ), 54 | ), 55 | ), 56 | const Divider( 57 | indent: 16, 58 | endIndent: 16, 59 | ), 60 | Expanded( 61 | child: Container( 62 | color: Theme.of(context).scaffoldBackgroundColor, 63 | child: const Center( 64 | child: Text('Tota: \$10'), 65 | ), 66 | ), 67 | ), 68 | ], 69 | ), 70 | ); 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /docs/components/dartpad/dividers/theme/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Divider Theme Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/dividers/theme/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatefulWidget { 6 | @override 7 | _MyAppState createState() => _MyAppState(); 8 | } 9 | 10 | class _MyAppState extends State { 11 | @override 12 | Widget build(BuildContext context) { 13 | return MaterialApp( 14 | theme: _buildShrineTheme(), 15 | home: Scaffold( 16 | body: DividerThemeDemo(), 17 | ), 18 | ); 19 | } 20 | } 21 | 22 | class DividerThemeDemo extends StatelessWidget { 23 | @override 24 | Widget build(BuildContext context) { 25 | return Center( 26 | child: Column( 27 | children: [ 28 | Expanded( 29 | child: Container( 30 | child: const Center( 31 | child: Text('Start'), 32 | ), 33 | ), 34 | ), 35 | const Divider(), 36 | Expanded( 37 | child: Container( 38 | child: const Center( 39 | child: Text('End'), 40 | ), 41 | ), 42 | ), 43 | ], 44 | ), 45 | ); 46 | } 47 | } 48 | 49 | ThemeData _buildShrineTheme() { 50 | final ThemeData base = ThemeData.light(); 51 | return base.copyWith( 52 | colorScheme: _shrineColorScheme, 53 | accentColor: shrineBrown900, 54 | primaryColor: shrinePink100, 55 | buttonColor: shrinePink100, 56 | scaffoldBackgroundColor: shrineBackgroundWhite, 57 | cardColor: shrineBackgroundWhite, 58 | textSelectionTheme: TextSelectionThemeData(selectionColor: shrinePink100), 59 | errorColor: shrineErrorRed, 60 | buttonTheme: const ButtonThemeData( 61 | colorScheme: _shrineColorScheme, 62 | textTheme: ButtonTextTheme.normal, 63 | ), 64 | primaryIconTheme: _customIconTheme(base.iconTheme), 65 | textTheme: _buildShrineTextTheme(base.textTheme), 66 | primaryTextTheme: _buildShrineTextTheme(base.primaryTextTheme), 67 | accentTextTheme: _buildShrineTextTheme(base.accentTextTheme), 68 | iconTheme: _customIconTheme(base.iconTheme), 69 | ); 70 | } 71 | 72 | IconThemeData _customIconTheme(IconThemeData original) { 73 | return original.copyWith(color: shrineBrown900); 74 | } 75 | 76 | TextTheme _buildShrineTextTheme(TextTheme base) { 77 | return base 78 | .copyWith( 79 | caption: base.caption.copyWith( 80 | fontWeight: FontWeight.w400, 81 | fontSize: 14, 82 | letterSpacing: defaultLetterSpacing, 83 | ), 84 | button: base.button.copyWith( 85 | fontWeight: FontWeight.w500, 86 | fontSize: 14, 87 | letterSpacing: defaultLetterSpacing, 88 | ), 89 | ) 90 | .apply( 91 | fontFamily: 'Rubik', 92 | displayColor: shrineBrown900, 93 | bodyColor: shrineBrown900, 94 | ); 95 | } 96 | 97 | const ColorScheme _shrineColorScheme = ColorScheme( 98 | primary: shrinePink100, 99 | primaryVariant: shrineBrown900, 100 | secondary: shrinePink50, 101 | secondaryVariant: shrineBrown900, 102 | surface: shrineSurfaceWhite, 103 | background: shrineBackgroundWhite, 104 | error: shrineErrorRed, 105 | onPrimary: shrineBrown900, 106 | onSecondary: shrineBrown900, 107 | onSurface: shrineBrown900, 108 | onBackground: shrineBrown900, 109 | onError: shrineSurfaceWhite, 110 | brightness: Brightness.light, 111 | ); 112 | 113 | const Color shrinePink50 = Color(0xFFFEEAE6); 114 | const Color shrinePink100 = Color(0xFFFEDBD0); 115 | const Color shrinePink300 = Color(0xFFFBB8AC); 116 | const Color shrinePink400 = Color(0xFFEAA4A4); 117 | 118 | const Color shrineBrown900 = Color(0xFF442B2D); 119 | const Color shrineBrown600 = Color(0xFF7D4F52); 120 | 121 | const Color shrineErrorRed = Color(0xFFC5032B); 122 | 123 | const Color shrineSurfaceWhite = Color(0xFFFFFBFA); 124 | const Color shrineBackgroundWhite = Colors.white; 125 | 126 | const defaultLetterSpacing = 0.03; 127 | -------------------------------------------------------------------------------- /docs/components/dartpad/dividers/vertical_divider/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Vertical Divider Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart -------------------------------------------------------------------------------- /docs/components/dartpad/dividers/vertical_divider/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return MaterialApp( 9 | home: Scaffold( 10 | body: MyStatelessWidget(), 11 | ), 12 | ); 13 | } 14 | } 15 | 16 | class MyStatelessWidget extends StatelessWidget { 17 | MyStatelessWidget({Key key}) : super(key: key); 18 | 19 | @override 20 | Widget build(BuildContext context) { 21 | return Center( 22 | child: Row( 23 | children: [ 24 | Expanded( 25 | child: Container( 26 | child: const Center( 27 | child: Text('Start'), 28 | ), 29 | ), 30 | ), 31 | const VerticalDivider(), 32 | Expanded( 33 | child: Container( 34 | child: const Center( 35 | child: Text('End'), 36 | ), 37 | ), 38 | ), 39 | ], 40 | ), 41 | ); 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /docs/components/dartpad/fabs/extended/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Extended FAB Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/fabs/extended/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return MaterialApp( 9 | title: 'Flutter Demo', 10 | home: MyHomePage(), 11 | ); 12 | } 13 | } 14 | 15 | class MyHomePage extends StatelessWidget { 16 | Widget build(BuildContext context) { 17 | return Scaffold( 18 | body: Center( 19 | child: FloatingActionButton.extended( 20 | backgroundColor: const Color(0xff03dac6), 21 | foregroundColor: Colors.black, 22 | onPressed: () { 23 | // Respond to button press 24 | }, 25 | icon: Icon(Icons.add), 26 | label: Text('EXTENDED'), 27 | ), 28 | ), 29 | ); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /docs/components/dartpad/fabs/mini/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Mini FAB Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/fabs/mini/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return MaterialApp( 9 | title: 'Flutter Demo', 10 | home: MyHomePage(), 11 | ); 12 | } 13 | } 14 | 15 | class MyHomePage extends StatelessWidget { 16 | Widget build(BuildContext context) { 17 | return Scaffold( 18 | body: Center( 19 | child: FloatingActionButton( 20 | backgroundColor: const Color(0xff03dac6), 21 | foregroundColor: Colors.black, 22 | mini: true, 23 | onPressed: () { 24 | // Respond to button press 25 | }, 26 | child: Icon(Icons.add), 27 | ), 28 | ), 29 | ); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /docs/components/dartpad/fabs/regular/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Regular FAB Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/fabs/regular/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return MaterialApp( 9 | title: 'Flutter Demo', 10 | home: MyHomePage(), 11 | ); 12 | } 13 | } 14 | 15 | class MyHomePage extends StatelessWidget { 16 | Widget build(BuildContext context) { 17 | return Scaffold( 18 | body: Center( 19 | child: FloatingActionButton( 20 | backgroundColor: const Color(0xff03dac6), 21 | foregroundColor: Colors.black, 22 | onPressed: () { 23 | // Respond to button press 24 | }, 25 | child: Icon(Icons.add), 26 | ), 27 | ), 28 | ); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /docs/components/dartpad/fabs/theme/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material FABs with Shrine Theme Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/lists/single/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Single-line List Demo 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/lists/single/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() { 4 | runApp(App()); 5 | } 6 | 7 | class App extends StatelessWidget { 8 | @override 9 | Widget build(BuildContext context) { 10 | return MaterialApp( 11 | title: 'List Demo', 12 | debugShowCheckedModeBanner: false, 13 | theme: ThemeData( 14 | primaryColor: Color(0xFF6200EE), 15 | ), 16 | home: ListDemo(), 17 | ); 18 | } 19 | } 20 | 21 | class ListDemo extends StatelessWidget { 22 | @override 23 | Widget build(BuildContext context) { 24 | return Scaffold( 25 | appBar: AppBar( 26 | title: Text('Single-line list'), 27 | ), 28 | body: ListView( 29 | children: [ 30 | for (int count in List.generate(9, (index) => index + 1)) 31 | ListTile( 32 | title: Text('List item $count'), 33 | leading: Icon(Icons.label), 34 | trailing: Text("0$count"), 35 | ), 36 | ], 37 | ), 38 | ); 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /docs/components/dartpad/lists/theme/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Three-line Theming List Demo 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/lists/three-line/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Three-line List Demo 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/lists/three-line/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() { 4 | runApp(App()); 5 | } 6 | 7 | class App extends StatelessWidget { 8 | @override 9 | Widget build(BuildContext context) { 10 | return MaterialApp( 11 | title: 'List Demo', 12 | debugShowCheckedModeBanner: false, 13 | theme: ThemeData( 14 | primaryColor: Color(0xFF6200EE), 15 | ), 16 | home: ListDemo(), 17 | ); 18 | } 19 | } 20 | 21 | class ListDemo extends StatefulWidget { 22 | @override 23 | _ListDemoState createState() => _ListDemoState(); 24 | } 25 | 26 | class _ListDemoState extends State { 27 | Map countToValue = {}; 28 | 29 | @override 30 | Widget build(BuildContext context) { 31 | return Scaffold( 32 | appBar: AppBar( 33 | title: Text('Three-line list'), 34 | ), 35 | body: ListView( 36 | children: [ 37 | for (int count in List.generate(9, (index) => index + 1)) 38 | ListTile( 39 | title: Text('List item $count'), 40 | isThreeLine: true, 41 | subtitle: Text('Secondary text\nTertiary text'), 42 | leading: Icon(Icons.label), 43 | selected: countToValue[count] ?? false, 44 | trailing: Checkbox( 45 | value: countToValue[count] ?? false, 46 | onChanged: (bool value) { 47 | setState(() { 48 | countToValue[count] = value; 49 | }); 50 | }, 51 | ), 52 | ), 53 | ], 54 | ), 55 | ); 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /docs/components/dartpad/lists/two-line/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Two-line List Demo 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/lists/two-line/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() { 4 | runApp(App()); 5 | } 6 | 7 | class App extends StatelessWidget { 8 | @override 9 | Widget build(BuildContext context) { 10 | return MaterialApp( 11 | title: 'List Demo', 12 | debugShowCheckedModeBanner: false, 13 | theme: ThemeData( 14 | primaryColor: Color(0xFF6200EE), 15 | ), 16 | home: ListDemo(), 17 | ); 18 | } 19 | } 20 | 21 | class ListDemo extends StatefulWidget { 22 | @override 23 | _ListDemoState createState() => _ListDemoState(); 24 | } 25 | 26 | class _ListDemoState extends State { 27 | int groupValue = 1; 28 | 29 | @override 30 | Widget build(BuildContext context) { 31 | return Scaffold( 32 | appBar: AppBar( 33 | title: Text('Two-line list'), 34 | ), 35 | body: ListView( 36 | children: [ 37 | for (int count in List.generate(9, (index) => index + 1)) 38 | ListTile( 39 | title: Text('List item $count'), 40 | subtitle: Text('Secondary text'), 41 | leading: Icon(Icons.label), 42 | selected: count == groupValue, 43 | trailing: Radio( 44 | value: count, 45 | groupValue: groupValue, 46 | onChanged: (value) { 47 | setState(() { 48 | groupValue = value; 49 | }); 50 | }, 51 | ), 52 | ), 53 | ], 54 | ), 55 | ); 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /docs/components/dartpad/menus/dropdown/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Dropdown Menu Demo 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/menus/dropdown/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return MaterialApp( 9 | title: 'Dropdown Menu Demo', 10 | debugShowCheckedModeBanner: false, 11 | theme: ThemeData( 12 | primaryColor: Colors.purple, 13 | ), 14 | home: DropdownMenuDemo(), 15 | ); 16 | } 17 | } 18 | 19 | class DropdownMenuDemo extends StatelessWidget { 20 | @override 21 | Widget build(BuildContext context) { 22 | return Scaffold( 23 | appBar: AppBar( 24 | title: Text('Dropdown Menu Button'), 25 | actions: [ 26 | PopupMenuButton( 27 | icon: Icon(Icons.more_vert), 28 | itemBuilder: (BuildContext context) => [ 29 | const PopupMenuItem( 30 | child: ListTile( 31 | leading: Icon(Icons.add), 32 | title: Text('Item 1'), 33 | ), 34 | ), 35 | const PopupMenuItem( 36 | child: ListTile( 37 | leading: Icon(Icons.anchor), 38 | title: Text('Item 2'), 39 | ), 40 | ), 41 | const PopupMenuItem( 42 | child: ListTile( 43 | leading: Icon(Icons.article), 44 | title: Text('Item 3'), 45 | ), 46 | ), 47 | const PopupMenuDivider(), 48 | const PopupMenuItem(child: Text('Item A')), 49 | const PopupMenuItem(child: Text('Item B')), 50 | ], 51 | ), 52 | ], 53 | ), 54 | body: Center(), 55 | ); 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /docs/components/dartpad/menus/exposed_dropdown/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Exposed Dropdown Menu Demo 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/menus/exposed_dropdown/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return MaterialApp( 9 | title: 'Exposed Menu Demo', 10 | debugShowCheckedModeBanner: false, 11 | home: ExposedDropdownMenuDemo(), 12 | ); 13 | } 14 | } 15 | 16 | class ExposedDropdownMenuDemo extends StatefulWidget { 17 | @override 18 | _ExposedDropdownMenuDemoState createState() => 19 | _ExposedDropdownMenuDemoState(); 20 | } 21 | 22 | class _ExposedDropdownMenuDemoState extends State { 23 | String dropdownValue = 'Option 1'; 24 | 25 | @override 26 | Widget build(BuildContext context) { 27 | return Scaffold( 28 | appBar: AppBar( 29 | title: Text('Exposed Menu Demo'), 30 | ), 31 | body: Center( 32 | child: DropdownButton( 33 | value: dropdownValue, 34 | items: [ 35 | DropdownMenuItem( 36 | value: 'Option 1', 37 | child: Text('Option 1'), 38 | ), 39 | DropdownMenuItem( 40 | value: 'Option 2', 41 | child: Text('Option 2'), 42 | ), 43 | DropdownMenuItem( 44 | value: 'Option 3', 45 | child: Text('Option 3'), 46 | ), 47 | DropdownMenuItem( 48 | value: 'Option 4', 49 | child: Text('Option 4'), 50 | ), 51 | DropdownMenuItem( 52 | value: 'Option 5', 53 | child: Text('Option 5'), 54 | ), 55 | DropdownMenuItem( 56 | value: 'Option 6', 57 | child: Text('Option 6'), 58 | ), 59 | ], 60 | onChanged: (value) { 61 | setState(() { 62 | dropdownValue = value; 63 | }); 64 | }, 65 | ), 66 | ), 67 | ); 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /docs/components/dartpad/menus/theme/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material DropDown Themed Demo 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/nav_drawer/modal/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Modal Navigation Drawer Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/nav_drawer/modal/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | final appTitle = 'Drawer Demo'; 7 | 8 | @override 9 | Widget build(BuildContext context) { 10 | return MaterialApp( 11 | title: appTitle, 12 | home: MyHomePage(title: appTitle), 13 | theme: ThemeData( 14 | primaryColor: Color(0xFF6200EE), 15 | ), 16 | ); 17 | } 18 | } 19 | 20 | class MyHomePage extends StatefulWidget { 21 | final String title; 22 | 23 | MyHomePage({Key key, this.title}) : super(key: key); 24 | 25 | @override 26 | _MyHomePageState createState() => _MyHomePageState(); 27 | } 28 | 29 | class _MyHomePageState extends State { 30 | int _selectedDestination = 0; 31 | 32 | @override 33 | Widget build(BuildContext context) { 34 | final theme = Theme.of(context); 35 | final textTheme = theme.textTheme; 36 | 37 | return Scaffold( 38 | appBar: AppBar( 39 | title: Text(widget.title), 40 | ), 41 | drawer: Drawer( 42 | child: ListView( 43 | // Important: Remove any padding from the ListView. 44 | padding: EdgeInsets.zero, 45 | children: [ 46 | Padding( 47 | padding: const EdgeInsets.all(16.0), 48 | child: Text( 49 | 'Header', 50 | style: textTheme.headline6, 51 | ), 52 | ), 53 | Divider( 54 | height: 1, 55 | thickness: 1, 56 | ), 57 | ListTile( 58 | leading: Icon(Icons.favorite), 59 | title: Text('Item 1'), 60 | selected: _selectedDestination == 0, 61 | onTap: () => selectDestination(0), 62 | ), 63 | ListTile( 64 | leading: Icon(Icons.delete), 65 | title: Text('Item 2'), 66 | selected: _selectedDestination == 1, 67 | onTap: () => selectDestination(1), 68 | ), 69 | ListTile( 70 | leading: Icon(Icons.label), 71 | title: Text('Item 3'), 72 | selected: _selectedDestination == 2, 73 | onTap: () => selectDestination(2), 74 | ), 75 | Divider( 76 | height: 1, 77 | thickness: 1, 78 | ), 79 | Padding( 80 | padding: const EdgeInsets.all(16.0), 81 | child: Text( 82 | 'Label', 83 | ), 84 | ), 85 | ListTile( 86 | leading: Icon(Icons.bookmark), 87 | title: Text('Item A'), 88 | selected: _selectedDestination == 3, 89 | onTap: () => selectDestination(3), 90 | ), 91 | ], 92 | ), 93 | ), 94 | body: GridView.count( 95 | crossAxisCount: 2, 96 | crossAxisSpacing: 20, 97 | mainAxisSpacing: 20, 98 | padding: EdgeInsets.all(20), 99 | childAspectRatio: 3 / 2, 100 | children: [ 101 | Container(color: Colors.green), 102 | Container(color: Colors.blue), 103 | Container(color: Colors.pinkAccent), 104 | Container(color: Colors.purpleAccent), 105 | ], 106 | ), 107 | ); 108 | } 109 | 110 | void selectDestination(int index) { 111 | setState(() { 112 | _selectedDestination = index; 113 | }); 114 | } 115 | } 116 | -------------------------------------------------------------------------------- /docs/components/dartpad/nav_drawer/standard/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Standard Navigation Drawer Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/nav_drawer/standard/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | final appTitle = 'Drawer Demo'; 7 | 8 | @override 9 | Widget build(BuildContext context) { 10 | return MaterialApp( 11 | title: appTitle, 12 | home: MyHomePage(title: appTitle), 13 | theme: ThemeData( 14 | primaryColor: Color(0xFF6200EE), 15 | ), 16 | ); 17 | } 18 | } 19 | 20 | class MyHomePage extends StatefulWidget { 21 | final String title; 22 | 23 | MyHomePage({Key key, this.title}) : super(key: key); 24 | 25 | @override 26 | _MyHomePageState createState() => _MyHomePageState(); 27 | } 28 | 29 | class _MyHomePageState extends State { 30 | int _selectedDestination = 0; 31 | 32 | @override 33 | Widget build(BuildContext context) { 34 | final theme = Theme.of(context); 35 | final textTheme = theme.textTheme; 36 | 37 | return Row( 38 | children: [ 39 | Drawer( 40 | child: ListView( 41 | // Important: Remove any padding from the ListView. 42 | padding: EdgeInsets.zero, 43 | children: [ 44 | Padding( 45 | padding: const EdgeInsets.all(16.0), 46 | child: Text( 47 | 'Header', 48 | style: textTheme.headline6, 49 | ), 50 | ), 51 | Divider( 52 | height: 1, 53 | thickness: 1, 54 | ), 55 | ListTile( 56 | leading: Icon(Icons.favorite), 57 | title: Text('Item 1'), 58 | selected: _selectedDestination == 0, 59 | onTap: () => selectDestination(0), 60 | ), 61 | ListTile( 62 | leading: Icon(Icons.delete), 63 | title: Text('Item 2'), 64 | selected: _selectedDestination == 1, 65 | onTap: () => selectDestination(1), 66 | ), 67 | ListTile( 68 | leading: Icon(Icons.label), 69 | title: Text('Item 3'), 70 | selected: _selectedDestination == 2, 71 | onTap: () => selectDestination(2), 72 | ), 73 | Divider( 74 | height: 1, 75 | thickness: 1, 76 | ), 77 | Padding( 78 | padding: const EdgeInsets.all(16.0), 79 | child: Text( 80 | 'Label', 81 | ), 82 | ), 83 | ListTile( 84 | leading: Icon(Icons.bookmark), 85 | title: Text('Item A'), 86 | selected: _selectedDestination == 3, 87 | onTap: () => selectDestination(3), 88 | ), 89 | ], 90 | ), 91 | ), 92 | VerticalDivider( 93 | width: 1, 94 | thickness: 1, 95 | ), 96 | Expanded( 97 | child: Scaffold( 98 | appBar: AppBar( 99 | title: Text(widget.title), 100 | ), 101 | body: GridView.count( 102 | crossAxisCount: 2, 103 | crossAxisSpacing: 20, 104 | mainAxisSpacing: 20, 105 | padding: EdgeInsets.all(20), 106 | childAspectRatio: 3 / 2, 107 | children: [ 108 | Container(color: Colors.green), 109 | Container(color: Colors.blue), 110 | Container(color: Colors.pinkAccent), 111 | Container(color: Colors.purpleAccent), 112 | ], 113 | ), 114 | ), 115 | ), 116 | ], 117 | ); 118 | } 119 | 120 | void selectDestination(int index) { 121 | setState(() { 122 | _selectedDestination = index; 123 | }); 124 | } 125 | } 126 | -------------------------------------------------------------------------------- /docs/components/dartpad/progress_indicators/circular/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Circular Progress Indicator Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/progress_indicators/circular/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() { 4 | runApp(App()); 5 | } 6 | 7 | class App extends StatelessWidget { 8 | @override 9 | Widget build(BuildContext context) { 10 | return MaterialApp( 11 | title: 'Circular Progress Indicator Demo', 12 | debugShowCheckedModeBanner: false, 13 | home: Scaffold( 14 | appBar: AppBar( 15 | title: Text('Circular Progress Indicator Demo'), 16 | ), 17 | body: Center( 18 | child: CircularProgressIndicator(), 19 | ), 20 | ), 21 | ); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /docs/components/dartpad/progress_indicators/linear/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Linear Progress Indicator Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/progress_indicators/linear/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() { 4 | runApp(App()); 5 | } 6 | 7 | class App extends StatelessWidget { 8 | @override 9 | Widget build(BuildContext context) { 10 | return MaterialApp( 11 | title: 'Linear Progress Indicator Demo', 12 | debugShowCheckedModeBanner: false, 13 | home: Scaffold( 14 | appBar: AppBar( 15 | title: Text('Linear Progress Indicator Demo'), 16 | ), 17 | body: Center( 18 | child: LinearProgressIndicator(), 19 | ), 20 | ), 21 | ); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /docs/components/dartpad/progress_indicators/theme/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Theme Progress Indicator Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/progress_indicators/theme/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() { 4 | runApp(App()); 5 | } 6 | 7 | class App extends StatelessWidget { 8 | @override 9 | Widget build(BuildContext context) { 10 | return MaterialApp( 11 | title: 'Theme Progress Indicator Demo', 12 | debugShowCheckedModeBanner: false, 13 | theme: _buildShrineTheme(), 14 | home: Scaffold( 15 | appBar: AppBar( 16 | title: Text('Theme Progress Indicator Demo'), 17 | ), 18 | body: Center( 19 | child: Column( 20 | children: [ 21 | LinearProgressIndicator(), 22 | SizedBox(height: 100), 23 | CircularProgressIndicator(), 24 | ], 25 | ), 26 | ), 27 | ), 28 | ); 29 | } 30 | } 31 | 32 | ThemeData _buildShrineTheme() { 33 | final ThemeData base = ThemeData.light(); 34 | return base.copyWith( 35 | colorScheme: _shrineColorScheme, 36 | toggleableActiveColor: shrinePink400, 37 | accentColor: shrineBrown900, 38 | primaryColor: shrinePink100, 39 | buttonColor: shrinePink100, 40 | scaffoldBackgroundColor: shrineBackgroundWhite, 41 | cardColor: shrineBackgroundWhite, 42 | textSelectionTheme: TextSelectionThemeData(selectionColor: shrinePink100), 43 | errorColor: shrineErrorRed, 44 | primaryIconTheme: _customIconTheme(base.iconTheme), 45 | textTheme: _buildShrineTextTheme(base.textTheme), 46 | primaryTextTheme: _buildShrineTextTheme(base.primaryTextTheme), 47 | accentTextTheme: _buildShrineTextTheme(base.accentTextTheme), 48 | iconTheme: _customIconTheme(base.iconTheme), 49 | backgroundColor: shrinePink100, 50 | ); 51 | } 52 | 53 | IconThemeData _customIconTheme(IconThemeData original) { 54 | return original.copyWith(color: shrineBrown900); 55 | } 56 | 57 | TextTheme _buildShrineTextTheme(TextTheme base) { 58 | return base.apply( 59 | fontFamily: 'Rubik', 60 | displayColor: shrineBrown900, 61 | bodyColor: shrineBrown900, 62 | ); 63 | } 64 | 65 | const ColorScheme _shrineColorScheme = ColorScheme( 66 | primary: shrinePink100, 67 | primaryVariant: shrineBrown900, 68 | secondary: shrinePink50, 69 | secondaryVariant: shrineBrown900, 70 | surface: shrineSurfaceWhite, 71 | background: shrineBackgroundWhite, 72 | error: shrineErrorRed, 73 | onPrimary: shrineBrown900, 74 | onSecondary: shrineBrown900, 75 | onSurface: shrineBrown900, 76 | onBackground: shrineBrown900, 77 | onError: shrineSurfaceWhite, 78 | brightness: Brightness.light, 79 | ); 80 | 81 | const Color shrinePink50 = Color(0xFFFEEAE6); 82 | const Color shrinePink100 = Color(0xFFFEDBD0); 83 | const Color shrinePink300 = Color(0xFFFBB8AC); 84 | const Color shrinePink400 = Color(0xFFEAA4A4); 85 | 86 | const Color shrineBrown900 = Color(0xFF442B2D); 87 | const Color shrineBrown600 = Color(0xFF7D4F52); 88 | 89 | const Color shrineErrorRed = Color(0xFFC5032B); 90 | 91 | const Color shrineSurfaceWhite = Color(0xFFFFFBFA); 92 | const Color shrineBackgroundWhite = Colors.white; 93 | -------------------------------------------------------------------------------- /docs/components/dartpad/radio_buttons/regular/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Regular Radio Button Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/radio_buttons/regular/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return MaterialApp( 9 | title: 'Flutter Demo', 10 | debugShowCheckedModeBanner: false, 11 | home: MyHomePage(), 12 | ); 13 | } 14 | } 15 | 16 | class MyHomePage extends StatefulWidget { 17 | @override 18 | _MyHomePageState createState() => _MyHomePageState(); 19 | } 20 | 21 | class _MyHomePageState extends State { 22 | int _value = 1; 23 | 24 | Widget build(BuildContext context) { 25 | return Scaffold( 26 | body: Column( 27 | children: [ 28 | for (int i = 1; i <= 5; i++) 29 | ListTile( 30 | title: Text( 31 | 'Radio $i', 32 | style: Theme.of(context) 33 | .textTheme 34 | .subtitle1 35 | .copyWith(color: i == 5 ? Colors.black38 : Colors.black), 36 | ), 37 | leading: Radio( 38 | value: i, 39 | groupValue: _value, 40 | activeColor: Color(0xFF6200EE), 41 | onChanged: i == 5 42 | ? null 43 | : (int value) { 44 | setState(() { 45 | _value = value; 46 | }); 47 | }, 48 | ), 49 | ), 50 | ], 51 | ), 52 | ); 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /docs/components/dartpad/radio_buttons/theme/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Radio Button with Shrine Theme Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/sliders/continous_range_slider/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Continous Range Sliders Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart -------------------------------------------------------------------------------- /docs/components/dartpad/sliders/continous_range_slider/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatefulWidget { 6 | @override 7 | _MyAppState createState() => _MyAppState(); 8 | } 9 | 10 | class _MyAppState extends State { 11 | RangeValues _rangeSliderDiscreteValues = const RangeValues(40, 80); 12 | 13 | @override 14 | Widget build(BuildContext context) { 15 | return MaterialApp( 16 | home: Scaffold( 17 | body: Column( 18 | children: [ 19 | Expanded( 20 | child: RangeSlider( 21 | values: _rangeSliderDiscreteValues, 22 | min: 0, 23 | max: 100, 24 | labels: RangeLabels( 25 | _rangeSliderDiscreteValues.start.round().toString(), 26 | _rangeSliderDiscreteValues.end.round().toString(), 27 | ), 28 | onChanged: (values) { 29 | setState(() { 30 | _rangeSliderDiscreteValues = values; 31 | }); 32 | }, 33 | ), 34 | ), 35 | ], 36 | ), 37 | ), 38 | ); 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /docs/components/dartpad/sliders/continous_slider/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Continous Sliders Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart -------------------------------------------------------------------------------- /docs/components/dartpad/sliders/continous_slider/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatefulWidget { 6 | @override 7 | _MyAppState createState() => _MyAppState(); 8 | } 9 | 10 | class _MyAppState extends State { 11 | double _sliderDiscreteValue = 20; 12 | 13 | @override 14 | Widget build(BuildContext context) { 15 | return MaterialApp( 16 | home: Scaffold( 17 | body: Column( 18 | children: [ 19 | Expanded( 20 | child: Slider( 21 | value: _sliderDiscreteValue, 22 | min: 0, 23 | max: 100, 24 | label: _sliderDiscreteValue.round().toString(), 25 | onChanged: (value) { 26 | setState(() { 27 | _sliderDiscreteValue = value; 28 | }); 29 | }, 30 | ), 31 | ), 32 | ], 33 | ), 34 | ), 35 | ); 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /docs/components/dartpad/sliders/discrete_range_slider/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Discrete Range Sliders Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart -------------------------------------------------------------------------------- /docs/components/dartpad/sliders/discrete_range_slider/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatefulWidget { 6 | @override 7 | _MyAppState createState() => _MyAppState(); 8 | } 9 | 10 | class _MyAppState extends State { 11 | RangeValues _rangeSliderDiscreteValues = const RangeValues(40, 80); 12 | 13 | @override 14 | Widget build(BuildContext context) { 15 | return MaterialApp( 16 | home: Scaffold( 17 | body: Column( 18 | children: [ 19 | Expanded( 20 | child: RangeSlider( 21 | values: _rangeSliderDiscreteValues, 22 | min: 0, 23 | max: 100, 24 | divisions: 5, 25 | labels: RangeLabels( 26 | _rangeSliderDiscreteValues.start.round().toString(), 27 | _rangeSliderDiscreteValues.end.round().toString(), 28 | ), 29 | onChanged: (values) { 30 | setState(() { 31 | _rangeSliderDiscreteValues = values; 32 | }); 33 | }, 34 | ), 35 | ), 36 | ], 37 | ), 38 | ), 39 | ); 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /docs/components/dartpad/sliders/discrete_slider/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Discrete Sliders Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart -------------------------------------------------------------------------------- /docs/components/dartpad/sliders/discrete_slider/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatefulWidget { 6 | @override 7 | _MyAppState createState() => _MyAppState(); 8 | } 9 | 10 | class _MyAppState extends State { 11 | double _sliderDiscreteValue = 20; 12 | 13 | @override 14 | Widget build(BuildContext context) { 15 | return MaterialApp( 16 | home: Scaffold( 17 | body: Column( 18 | children: [ 19 | Expanded( 20 | child: Slider( 21 | value: _sliderDiscreteValue, 22 | min: 0, 23 | max: 100, 24 | divisions: 5, 25 | label: _sliderDiscreteValue.round().toString(), 26 | onChanged: (value) { 27 | setState(() { 28 | _sliderDiscreteValue = value; 29 | }); 30 | }, 31 | ), 32 | ), 33 | ], 34 | ), 35 | ), 36 | ); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /docs/components/dartpad/sliders/theme/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Sliders with Shrine Theme Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/snackbars/regular/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Snackbars Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart -------------------------------------------------------------------------------- /docs/components/dartpad/snackbars/regular/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return MaterialApp( 9 | title: 'Flutter Demo', 10 | debugShowCheckedModeBanner: false, 11 | home: SnackBarsDemo(), 12 | ); 13 | } 14 | } 15 | 16 | class SnackBarsDemo extends StatelessWidget { 17 | Widget build(BuildContext context) { 18 | return Scaffold( 19 | appBar: AppBar( 20 | title: Text('Snackbars'), 21 | actions: [SnackbarButton()], 22 | ), 23 | body: Container( 24 | decoration: BoxDecoration( 25 | image: DecorationImage( 26 | image: NetworkImage( 27 | 'replace with url for snackbars-background.jpg after merge'), 28 | fit: BoxFit.cover, 29 | ), 30 | ), 31 | ), 32 | ); 33 | } 34 | } 35 | 36 | class SnackbarButton extends StatelessWidget { 37 | Widget build(BuildContext context) { 38 | return RaisedButton( 39 | onPressed: () { 40 | final snackBar = SnackBar( 41 | behavior: SnackBarBehavior.floating, 42 | content: Text('Text label'), 43 | action: SnackBarAction( 44 | label: 'Action', 45 | onPressed: () {}, 46 | ), 47 | ); 48 | 49 | // Find the Scaffold in the widget tree and use 50 | // it to show a SnackBar. 51 | ScaffoldMessenger.of(context).showSnackBar(snackBar); 52 | }, 53 | child: Text('Show SnackBar'), 54 | ); 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /docs/components/dartpad/snackbars/theme/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Snackbars with Shrine Theme Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/switches/regular/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Regular Switches Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/switches/regular/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return MaterialApp( 9 | title: 'Flutter Demo', 10 | debugShowCheckedModeBanner: false, 11 | home: MyHomePage(), 12 | ); 13 | } 14 | } 15 | 16 | class MyHomePage extends StatefulWidget { 17 | @override 18 | _MyHomePageState createState() => _MyHomePageState(); 19 | } 20 | 21 | class _MyHomePageState extends State { 22 | List _values = [true, false, true, false, false]; 23 | 24 | Widget build(BuildContext context) { 25 | final int count = 4; 26 | 27 | return Scaffold( 28 | body: Column( 29 | children: [ 30 | for (int i = 0; i <= count; i++) 31 | ListTile( 32 | title: Text( 33 | 'Switch ${i + 1}', 34 | style: Theme.of(context).textTheme.subtitle1.copyWith( 35 | color: i == count ? Colors.black38 : Colors.black), 36 | ), 37 | leading: Switch( 38 | value: _values[i], 39 | activeColor: Color(0xFF6200EE), 40 | onChanged: i == count 41 | ? null 42 | : (bool value) { 43 | setState(() { 44 | _values[i] = value; 45 | }); 46 | }, 47 | ), 48 | ), 49 | ], 50 | ), 51 | ); 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /docs/components/dartpad/switches/theme/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Switches with Shrine Theme Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/tabs/fixed/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Fixed Tabs Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/tabs/fixed/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return MaterialApp( 9 | title: 'Flutter Demo', 10 | home: DefaultTabController( 11 | length: 3, 12 | child: Scaffold( 13 | appBar: AppBar( 14 | title: Text('Fixed Tabs'), 15 | automaticallyImplyLeading: false, 16 | backgroundColor: Color(0xff5808e5), 17 | bottom: TabBar( 18 | indicatorColor: Colors.white, 19 | tabs: [ 20 | Tab(text: 'DOGS', icon: Icon(Icons.favorite)), 21 | Tab(text: 'CATS', icon: Icon(Icons.music_note)), 22 | Tab(text: 'BIRDS', icon: Icon(Icons.search)), 23 | ], 24 | ), 25 | ), 26 | body: TabBarView( 27 | children: [ 28 | Center(child: Text('DOGS')), 29 | Center(child: Text('CATS')), 30 | Center(child: Text('BIRDS')), 31 | ], 32 | ), 33 | ), 34 | ), 35 | ); 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /docs/components/dartpad/tabs/scollable_theme/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Scrollable Tab swith Shrine Theme Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/tabs/scrollable/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Scrollable Tabs Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/tabs/scrollable/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | final tabs = [ 9 | 'Tab 1', 10 | 'Tab 2', 11 | 'Tab 3', 12 | 'Tab 4', 13 | 'Tab 5', 14 | 'Tab 6', 15 | 'Tab 7', 16 | 'Tab 8', 17 | 'Tab 9', 18 | ]; 19 | 20 | return MaterialApp( 21 | title: 'Flutter Demo', 22 | home: DefaultTabController( 23 | length: tabs.length, 24 | child: Scaffold( 25 | appBar: AppBar( 26 | title: Text('Scrollable Tabs'), 27 | automaticallyImplyLeading: false, 28 | backgroundColor: Color(0xff5808e5), 29 | bottom: TabBar( 30 | indicatorColor: Colors.white, 31 | isScrollable: true, 32 | tabs: [ 33 | for (final tab in tabs) Tab(text: tab), 34 | ], 35 | ), 36 | ), 37 | body: TabBarView( 38 | children: [ 39 | for (final tab in tabs) 40 | Center( 41 | child: Text(tab), 42 | ), 43 | ], 44 | ), 45 | ), 46 | ), 47 | ); 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /docs/components/dartpad/tabs/theme/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Tabs with Shrine Theme Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/tabs/theme/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return MaterialApp( 9 | title: 'Flutter Demo', 10 | theme: _buildShrineTheme(), 11 | home: DefaultTabController( 12 | length: 3, 13 | child: Scaffold( 14 | appBar: AppBar( 15 | title: Text('Fixed Tabs'), 16 | automaticallyImplyLeading: false, 17 | bottom: TabBar( 18 | tabs: [ 19 | Tab(text: 'DOGS', icon: Icon(Icons.favorite)), 20 | Tab(text: 'CATS', icon: Icon(Icons.music_note)), 21 | Tab(text: 'BIRDS', icon: Icon(Icons.search)), 22 | ], 23 | ), 24 | ), 25 | body: TabBarView( 26 | children: [ 27 | Center(child: Text('DOGS')), 28 | Center(child: Text('CATS')), 29 | Center(child: Text('BIRDS')), 30 | ], 31 | ), 32 | ), 33 | ), 34 | ); 35 | } 36 | } 37 | 38 | ThemeData _buildShrineTheme() { 39 | final ThemeData base = ThemeData.light(); 40 | return base.copyWith( 41 | colorScheme: _shrineColorScheme, 42 | accentColor: shrineBrown900, 43 | primaryColor: shrinePink100, 44 | buttonColor: shrinePink100, 45 | scaffoldBackgroundColor: shrineBackgroundWhite, 46 | cardColor: shrineBackgroundWhite, 47 | textSelectionTheme: TextSelectionThemeData(selectionColor: shrinePink100), 48 | errorColor: shrineErrorRed, 49 | buttonTheme: const ButtonThemeData( 50 | colorScheme: _shrineColorScheme, 51 | textTheme: ButtonTextTheme.normal, 52 | ), 53 | primaryIconTheme: _customIconTheme(base.iconTheme), 54 | textTheme: _buildShrineTextTheme(base.textTheme), 55 | primaryTextTheme: _buildShrineTextTheme(base.primaryTextTheme), 56 | accentTextTheme: _buildShrineTextTheme(base.accentTextTheme), 57 | iconTheme: _customIconTheme(base.iconTheme), 58 | indicatorColor: shrineBrown600, 59 | ); 60 | } 61 | 62 | IconThemeData _customIconTheme(IconThemeData original) { 63 | return original.copyWith(color: shrineBrown900); 64 | } 65 | 66 | TextTheme _buildShrineTextTheme(TextTheme base) { 67 | return base 68 | .copyWith( 69 | caption: base.caption.copyWith( 70 | fontWeight: FontWeight.w400, 71 | fontSize: 14, 72 | letterSpacing: defaultLetterSpacing, 73 | ), 74 | button: base.button.copyWith( 75 | fontWeight: FontWeight.w500, 76 | fontSize: 14, 77 | letterSpacing: defaultLetterSpacing, 78 | ), 79 | ) 80 | .apply( 81 | fontFamily: 'Rubik', 82 | displayColor: shrineBrown900, 83 | bodyColor: shrineBrown900, 84 | ); 85 | } 86 | 87 | const ColorScheme _shrineColorScheme = ColorScheme( 88 | primary: shrinePink100, 89 | primaryVariant: shrineBrown900, 90 | secondary: shrinePink50, 91 | secondaryVariant: shrineBrown900, 92 | surface: shrineSurfaceWhite, 93 | background: shrineBackgroundWhite, 94 | error: shrineErrorRed, 95 | onPrimary: shrineBrown900, 96 | onSecondary: shrineBrown900, 97 | onSurface: shrineBrown900, 98 | onBackground: shrineBrown900, 99 | onError: shrineSurfaceWhite, 100 | brightness: Brightness.light, 101 | ); 102 | 103 | const Color shrinePink50 = Color(0xFFFEEAE6); 104 | const Color shrinePink100 = Color(0xFFFEDBD0); 105 | const Color shrinePink300 = Color(0xFFFBB8AC); 106 | const Color shrinePink400 = Color(0xFFEAA4A4); 107 | 108 | const Color shrineBrown900 = Color(0xFF442B2D); 109 | const Color shrineBrown600 = Color(0xFF7D4F52); 110 | 111 | const Color shrineErrorRed = Color(0xFFC5032B); 112 | 113 | const Color shrineSurfaceWhite = Color(0xFFFFFBFA); 114 | const Color shrineBackgroundWhite = Colors.white; 115 | 116 | const defaultLetterSpacing = 0.03; 117 | -------------------------------------------------------------------------------- /docs/components/dartpad/text_fields/filled/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Filled Text Field Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart -------------------------------------------------------------------------------- /docs/components/dartpad/text_fields/filled/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return MaterialApp( 9 | title: 'Flutter Demo', 10 | debugShowCheckedModeBanner: false, 11 | home: MyHomePage(), 12 | ); 13 | } 14 | } 15 | 16 | class MyHomePage extends StatelessWidget { 17 | Widget build(BuildContext context) { 18 | return Scaffold( 19 | body: TextFormField( 20 | initialValue: 'Input text', 21 | maxLength: 20, 22 | decoration: InputDecoration( 23 | icon: Icon(Icons.favorite), 24 | labelText: 'Label text', 25 | labelStyle: TextStyle( 26 | color: Color(0xFF6200EE), 27 | ), 28 | helperText: 'Helper text', 29 | suffixIcon: Icon( 30 | Icons.check_circle, 31 | ), 32 | enabledBorder: UnderlineInputBorder( 33 | borderSide: BorderSide(color: Color(0xFF6200EE)), 34 | ), 35 | ), 36 | ), 37 | ); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /docs/components/dartpad/text_fields/outlined/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Outlined Text Field Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart -------------------------------------------------------------------------------- /docs/components/dartpad/text_fields/outlined/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return MaterialApp( 9 | title: 'Flutter Demo', 10 | debugShowCheckedModeBanner: false, 11 | home: MyHomePage(), 12 | ); 13 | } 14 | } 15 | 16 | class MyHomePage extends StatelessWidget { 17 | Widget build(BuildContext context) { 18 | return Scaffold( 19 | body: TextFormField( 20 | initialValue: 'Input text', 21 | decoration: InputDecoration( 22 | labelText: 'Label text', 23 | errorText: 'Error message', 24 | border: OutlineInputBorder(), 25 | suffixIcon: Icon( 26 | Icons.error, 27 | ), 28 | ), 29 | ), 30 | ); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /docs/components/dartpad/text_fields/theme/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Text Field with Theme Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart -------------------------------------------------------------------------------- /docs/components/dartpad/time_pickers/input/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Regular Time Input Pickers Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/time_pickers/input/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return MaterialApp( 9 | title: 'Time Input Picker Demo', 10 | debugShowCheckedModeBanner: false, 11 | theme: ThemeData(colorScheme: ColorScheme.light()), 12 | home: MyHomePage(), 13 | ); 14 | } 15 | } 16 | 17 | class MyHomePage extends StatefulWidget { 18 | @override 19 | _MyHomePageState createState() => _MyHomePageState(); 20 | } 21 | 22 | class _MyHomePageState extends State { 23 | TimeOfDay _time = TimeOfDay(hour: 7, minute: 15); 24 | 25 | void _selectTime() async { 26 | final TimeOfDay newTime = await showTimePicker( 27 | context: context, 28 | initialTime: _time, 29 | initialEntryMode: TimePickerEntryMode.input, 30 | ); 31 | if (newTime != null) { 32 | setState(() { 33 | _time = newTime; 34 | }); 35 | } 36 | } 37 | 38 | Widget build(BuildContext context) { 39 | return Scaffold( 40 | body: Center( 41 | child: Column( 42 | mainAxisAlignment: MainAxisAlignment.center, 43 | children: [ 44 | ElevatedButton( 45 | onPressed: _selectTime, 46 | child: Text('SELECT TIME'), 47 | ), 48 | SizedBox(height: 8), 49 | Text( 50 | 'Selected time: ${_time.format(context)}', 51 | ), 52 | ], 53 | ), 54 | ), 55 | ); 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /docs/components/dartpad/time_pickers/regular/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Regular Time Pickers Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/time_pickers/regular/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return MaterialApp( 9 | title: 'Time Picker Demo', 10 | debugShowCheckedModeBanner: false, 11 | theme: ThemeData(colorScheme: ColorScheme.light()), 12 | home: MyHomePage(), 13 | ); 14 | } 15 | } 16 | 17 | class MyHomePage extends StatefulWidget { 18 | @override 19 | _MyHomePageState createState() => _MyHomePageState(); 20 | } 21 | 22 | class _MyHomePageState extends State { 23 | TimeOfDay _time = TimeOfDay(hour: 7, minute: 15); 24 | 25 | void _selectTime() async { 26 | final TimeOfDay newTime = await showTimePicker( 27 | context: context, 28 | initialTime: _time, 29 | ); 30 | if (newTime != null) { 31 | setState(() { 32 | _time = newTime; 33 | }); 34 | } 35 | } 36 | 37 | Widget build(BuildContext context) { 38 | return Scaffold( 39 | body: Center( 40 | child: Column( 41 | mainAxisAlignment: MainAxisAlignment.center, 42 | children: [ 43 | ElevatedButton( 44 | onPressed: _selectTime, 45 | child: Text('SELECT TIME'), 46 | ), 47 | SizedBox(height: 8), 48 | Text( 49 | 'Selected time: ${_time.format(context)}', 50 | ), 51 | ], 52 | ), 53 | ), 54 | ); 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /docs/components/dartpad/time_pickers/theme/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Time Pickers with Shrine Theme Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/tooltips/regular/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Tooltips Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/tooltips/regular/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return MaterialApp( 9 | title: 'Tooltip Demo', 10 | debugShowCheckedModeBanner: false, 11 | home: Scaffold( 12 | body: Center( 13 | child: Tooltip( 14 | message: 'Play', 15 | child: Icon(Icons.play_arrow), 16 | ), 17 | ), 18 | ), 19 | ); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /docs/components/dartpad/tooltips/theme/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Tooltips with Rally Theme Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/tooltips/theme/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return MaterialApp( 9 | title: 'Tooltip Demo', 10 | debugShowCheckedModeBanner: false, 11 | theme: ThemeData( 12 | tooltipTheme: TooltipThemeData( 13 | decoration: ShapeDecoration( 14 | color: Color(0xFF232F34), 15 | shape: StadiumBorder(), 16 | ), 17 | textStyle: TextStyle(color: Colors.white), 18 | ), 19 | ), 20 | home: Scaffold( 21 | body: Center( 22 | child: Tooltip( 23 | message: 'Play', 24 | child: Icon(Icons.play_arrow), 25 | ), 26 | ), 27 | ), 28 | ); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /docs/components/dartpad/top-app-bar/contextual/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Contextual Action Bar Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/top-app-bar/contextual/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return MaterialApp( 9 | title: 'Flutter Demo', 10 | home: MyHomePage(), 11 | ); 12 | } 13 | } 14 | 15 | class MyHomePage extends StatelessWidget { 16 | Widget build(BuildContext context) { 17 | return Scaffold( 18 | appBar: AppBar( 19 | leading: Icon(Icons.close), 20 | title: Text('1 selected'), 21 | actions: [ 22 | Icon(Icons.file_upload), 23 | Padding( 24 | padding: EdgeInsets.symmetric(horizontal: 16), 25 | child: Icon(Icons.delete), 26 | ), 27 | Icon(Icons.more_vert), 28 | ], 29 | backgroundColor: Colors.black87, 30 | ), 31 | body: Container(), 32 | ); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /docs/components/dartpad/top-app-bar/contextual_theme/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Contextual Action Bar with Shrine Theme Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/top-app-bar/contextual_theme/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return MaterialApp( 9 | title: 'Flutter Demo', 10 | home: MyHomePage(), 11 | theme: _buildShrineTheme(), 12 | ); 13 | } 14 | } 15 | 16 | class MyHomePage extends StatelessWidget { 17 | Widget build(BuildContext context) { 18 | return Scaffold( 19 | appBar: AppBar( 20 | leading: Icon(Icons.close), 21 | title: Text('1 selected'), 22 | actions: [ 23 | Icon( 24 | Icons.file_upload, 25 | ), 26 | Padding( 27 | padding: EdgeInsets.symmetric(horizontal: 16), 28 | child: Icon(Icons.delete), 29 | ), 30 | Icon(Icons.more_vert), 31 | ], 32 | ), 33 | body: Container(), 34 | ); 35 | } 36 | } 37 | 38 | ThemeData _buildShrineTheme() { 39 | final ThemeData base = ThemeData.light(); 40 | return base.copyWith( 41 | colorScheme: _shrineColorScheme, 42 | accentColor: shrineBrown900, 43 | primaryColor: shrinePink100, 44 | buttonColor: shrinePink100, 45 | scaffoldBackgroundColor: shrineBackgroundWhite, 46 | cardColor: shrineBackgroundWhite, 47 | textSelectionTheme: TextSelectionThemeData(selectionColor: shrinePink100), 48 | errorColor: shrineErrorRed, 49 | buttonTheme: const ButtonThemeData( 50 | colorScheme: _shrineColorScheme, 51 | textTheme: ButtonTextTheme.normal, 52 | ), 53 | primaryIconTheme: _customIconTheme(base.iconTheme), 54 | textTheme: _buildShrineTextTheme(base.textTheme), 55 | primaryTextTheme: _buildShrineTextTheme(base.primaryTextTheme), 56 | accentTextTheme: _buildShrineTextTheme(base.accentTextTheme), 57 | iconTheme: _customIconTheme(base.iconTheme), 58 | ); 59 | } 60 | 61 | IconThemeData _customIconTheme(IconThemeData original) { 62 | return original.copyWith(color: shrineBrown900); 63 | } 64 | 65 | TextTheme _buildShrineTextTheme(TextTheme base) { 66 | return base 67 | .copyWith( 68 | caption: base.caption.copyWith( 69 | fontWeight: FontWeight.w400, 70 | fontSize: 14, 71 | letterSpacing: defaultLetterSpacing, 72 | ), 73 | button: base.button.copyWith( 74 | fontWeight: FontWeight.w500, 75 | fontSize: 14, 76 | letterSpacing: defaultLetterSpacing, 77 | ), 78 | ) 79 | .apply( 80 | fontFamily: 'Rubik', 81 | displayColor: shrineBrown900, 82 | bodyColor: shrineBrown900, 83 | ); 84 | } 85 | 86 | const ColorScheme _shrineColorScheme = ColorScheme( 87 | primary: shrinePink100, 88 | primaryVariant: shrineBrown900, 89 | secondary: shrinePink50, 90 | secondaryVariant: shrineBrown900, 91 | surface: shrineSurfaceWhite, 92 | background: shrineBackgroundWhite, 93 | error: shrineErrorRed, 94 | onPrimary: shrineBrown900, 95 | onSecondary: shrineBrown900, 96 | onSurface: shrineBrown900, 97 | onBackground: shrineBrown900, 98 | onError: shrineSurfaceWhite, 99 | brightness: Brightness.light, 100 | ); 101 | 102 | const Color shrinePink50 = Color(0xFFFEEAE6); 103 | const Color shrinePink100 = Color(0xFFFEDBD0); 104 | const Color shrinePink300 = Color(0xFFFBB8AC); 105 | const Color shrinePink400 = Color(0xFFEAA4A4); 106 | 107 | const Color shrineBrown900 = Color(0xFF442B2D); 108 | const Color shrineBrown600 = Color(0xFF7D4F52); 109 | 110 | const Color shrineErrorRed = Color(0xFFC5032B); 111 | 112 | const Color shrineSurfaceWhite = Color(0xFFFFFBFA); 113 | const Color shrineBackgroundWhite = Colors.white; 114 | 115 | const defaultLetterSpacing = 0.03; 116 | -------------------------------------------------------------------------------- /docs/components/dartpad/top-app-bar/regular/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Top App Bar Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/top-app-bar/regular/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return MaterialApp( 9 | title: 'Flutter Demo', 10 | home: MyHomePage(), 11 | ); 12 | } 13 | } 14 | 15 | class MyHomePage extends StatelessWidget { 16 | Widget build(BuildContext context) { 17 | return Scaffold( 18 | appBar: AppBar( 19 | leading: Icon( 20 | Icons.menu, 21 | ), 22 | title: Text('Page title'), 23 | actions: [ 24 | Icon(Icons.favorite), 25 | Padding( 26 | padding: EdgeInsets.symmetric(horizontal: 16), 27 | child: Icon(Icons.search), 28 | ), 29 | Icon(Icons.more_vert), 30 | ], 31 | backgroundColor: Colors.purple, 32 | ), 33 | body: Container(), 34 | ); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /docs/components/dartpad/top-app-bar/theme/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Top App Bar with Shrine Theme Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /docs/components/dartpad/top-app-bar/theme/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return MaterialApp( 9 | title: 'Flutter Demo', 10 | home: MyHomePage(), 11 | theme: _buildShrineTheme(), 12 | ); 13 | } 14 | } 15 | 16 | class MyHomePage extends StatelessWidget { 17 | Widget build(BuildContext context) { 18 | return Scaffold( 19 | appBar: AppBar( 20 | leading: Icon(Icons.menu), 21 | title: Text('Page title'), 22 | actions: [ 23 | Icon(Icons.favorite), 24 | Padding( 25 | padding: EdgeInsets.symmetric(horizontal: 16), 26 | child: Icon(Icons.search), 27 | ), 28 | Icon(Icons.more_vert), 29 | ], 30 | ), 31 | body: Container(), 32 | ); 33 | } 34 | } 35 | 36 | ThemeData _buildShrineTheme() { 37 | final ThemeData base = ThemeData.light(); 38 | return base.copyWith( 39 | colorScheme: _shrineColorScheme, 40 | accentColor: shrineBrown900, 41 | primaryColor: shrinePink100, 42 | buttonColor: shrinePink100, 43 | scaffoldBackgroundColor: shrineBackgroundWhite, 44 | cardColor: shrineBackgroundWhite, 45 | textSelectionTheme: TextSelectionThemeData(selectionColor: shrinePink100), 46 | errorColor: shrineErrorRed, 47 | buttonTheme: const ButtonThemeData( 48 | colorScheme: _shrineColorScheme, 49 | textTheme: ButtonTextTheme.normal, 50 | ), 51 | primaryIconTheme: _customIconTheme(base.iconTheme), 52 | textTheme: _buildShrineTextTheme(base.textTheme), 53 | primaryTextTheme: _buildShrineTextTheme(base.primaryTextTheme), 54 | accentTextTheme: _buildShrineTextTheme(base.accentTextTheme), 55 | iconTheme: _customIconTheme(base.iconTheme), 56 | ); 57 | } 58 | 59 | IconThemeData _customIconTheme(IconThemeData original) { 60 | return original.copyWith(color: shrineBrown900); 61 | } 62 | 63 | TextTheme _buildShrineTextTheme(TextTheme base) { 64 | return base 65 | .copyWith( 66 | caption: base.caption.copyWith( 67 | fontWeight: FontWeight.w400, 68 | fontSize: 14, 69 | letterSpacing: defaultLetterSpacing, 70 | ), 71 | button: base.button.copyWith( 72 | fontWeight: FontWeight.w500, 73 | fontSize: 14, 74 | letterSpacing: defaultLetterSpacing, 75 | ), 76 | ) 77 | .apply( 78 | fontFamily: 'Rubik', 79 | displayColor: shrineBrown900, 80 | bodyColor: shrineBrown900, 81 | ); 82 | } 83 | 84 | const ColorScheme _shrineColorScheme = ColorScheme( 85 | primary: shrinePink100, 86 | primaryVariant: shrineBrown900, 87 | secondary: shrinePink50, 88 | secondaryVariant: shrineBrown900, 89 | surface: shrineSurfaceWhite, 90 | background: shrineBackgroundWhite, 91 | error: shrineErrorRed, 92 | onPrimary: shrineBrown900, 93 | onSecondary: shrineBrown900, 94 | onSurface: shrineBrown900, 95 | onBackground: shrineBrown900, 96 | onError: shrineSurfaceWhite, 97 | brightness: Brightness.light, 98 | ); 99 | 100 | const Color shrinePink50 = Color(0xFFFEEAE6); 101 | const Color shrinePink100 = Color(0xFFFEDBD0); 102 | const Color shrinePink300 = Color(0xFFFBB8AC); 103 | const Color shrinePink400 = Color(0xFFEAA4A4); 104 | 105 | const Color shrineBrown900 = Color(0xFF442B2D); 106 | const Color shrineBrown600 = Color(0xFF7D4F52); 107 | 108 | const Color shrineErrorRed = Color(0xFFC5032B); 109 | 110 | const Color shrineSurfaceWhite = Color(0xFFFFFBFA); 111 | const Color shrineBackgroundWhite = Colors.white; 112 | 113 | const defaultLetterSpacing = 0.03; 114 | -------------------------------------------------------------------------------- /docs/components/image_lists.md: -------------------------------------------------------------------------------- 1 | 9 | 10 | # Image lists 11 | 12 | [Image lists](https://material.io/components/image-lists/) display a collection of images in an organized grid. 13 | 14 | We recommend the https://pub.dev/packages/flutter_staggered_grid_view package, which supports the following types of image lists: 15 | 16 | ### Masonry 17 | 18 | ![masonry](assets/image_lists/flutter_staggered_grid_view_masonry.png) 19 | 20 | ### Quilted 21 | 22 | ![quilted](assets/image_lists/flutter_staggered_grid_view_quilted.png) 23 | 24 | ### Woven 25 | 26 | ![woven](assets/image_lists/flutter_staggered_grid_view_woven.png) 27 | 28 | -------------------------------------------------------------------------------- /docs/components/resources/crane-backdrop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/resources/crane-backdrop.png -------------------------------------------------------------------------------- /docs/components/resources/shrine-expanding-bottom-sheet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-flutter/88477d28b116a2937f99ae2b752753ffc794f532/docs/components/resources/shrine-expanding-bottom-sheet.png -------------------------------------------------------------------------------- /docsite/docsite-index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Material Components for Flutter" 3 | layout: "homepage" 4 | path: / 5 | --- 6 | 7 | {% contentfor benefits %} 8 |
    9 |
  • 10 |

    Accurate & up to date

    11 |

    Implement Material Design with pixel-perfect components, maintained by Google engineers and designers

    12 |
    • 13 |
  • 14 |

    Flexible development

    15 |

    Develop apps using components that support Android and iOS

    16 |
    • 17 |
  • 18 |

    Industry standards

    19 |

    Take advantage of the same designs used in Google’s apps

    20 |
    • 21 |
22 | {% endcontentfor %} 23 | 24 | ## MDC-Flutter Source Code 25 | 26 | All Material Components for Flutter can be found in the [Flutter repository](https://github.com/flutter/flutter/tree/master/packages/flutter/lib/src/material). 27 | 28 | ## Usage 29 | 30 | Material Components is included by default in Flutter's packages. To add access to MDC widgets in a file, simply import the `material.dart` file. 31 | 32 | ``` dart 33 | import 'package:flutter/material.dart'; 34 | ``` 35 | 36 | -------------------------------------------------------------------------------- /medium/material_icons/dartpad_metadata.yaml: -------------------------------------------------------------------------------- 1 | name: Material Icons Demonstration 2 | mode: flutter 3 | files: 4 | - name: main.dart 5 | -------------------------------------------------------------------------------- /pubspec.yaml: -------------------------------------------------------------------------------- 1 | # This file enables Dart Analysis 2 | name: material_components_flutter 3 | publish_to: none 4 | 5 | environment: 6 | sdk: '>=2.10.0 <3.0.0' 7 | 8 | dependencies: 9 | flutter: 10 | sdk: flutter 11 | --------------------------------------------------------------------------------