material-components / material-components-flutter-gallery

Material Components: Shared Documentation and Policies

Material Components for Android, iOS, web and Flutter help developers execute Material Design with modular and customizable UI components. Developed by a core team of engineers and UX designers at Google, these components enable a reliable development workflow to build beautiful and functional user experiences.

This repo contains all common documentation for Material Components projects across the different platforms.

Repos

• Material Components Android
• Material Components iOS
• Material Components Web
• Material Components Flutter

Useful Links

• Contributing
• Filing an Issue
• Components Request Policy
• Code of Conduct
• Stack Overflow (external site)
• Material.io (external site)
• Material Design Guidelines (external site)
• Discord Chat Rooms (external site)

material-components-flutter-gallery's Issues

Implement colors style demo

Acceptance Criteria

• Build demo (based on Flutter Gallery one but with updated specs) and include in the reference styles demo list

Desktop layout for Rally

Acceptance Criteria

• Update rally to have a desktop layout
• Spec is at go/m2-rally

Implement typography demo

Acceptance Criteria

• Build demo (based on Flutter Gallery one but with updated specs) and include in the reference styles demo list

Merge Rally into flutter/flutter

Acceptance Criteria

• Studies -> Rally
• Add icon and link in the flutter_gallery app, try to make it possible to get back to the gallery app from the rally app
• First do code review in the flutter/samples repo (with Hans). Then a PR to add it to the flutter/flutter repo.

Implement visual fidelity of demo screen

Acceptance Criteria

• Use correct colors/typography/sizes/icons from the spec
• Do not worry about the desktop layout or demo content yet

Implement Dialogs demo

Acceptance Criteria

• Build demo (based on Flutter Gallery one but with updated specs) and include in the demo list

Implement Bottom Navigation demo

Acceptance Criteria

• Build demo (based on Flutter Gallery one but with updated specs) and include in the demo list

Merge Rally into this repo

Acceptance Criteria

• After any outstanding Rally work is done, merge shrine into this repo

Implement settings for locale

Acceptance Criteria

• Allows user to toggle locale for the app from system to any supported language
• Uses a list view

Move gallery3 from experimental to here

Acceptance Criteria:

• Project is moved into this repo from https://github.com/material-components/material-components-flutter-experimental/tree/master/gallery
• CI still works

Implement settings for dark theme

Acceptance Criteria

• Allows user to toggle text scale for the app from system to dark to light theme using radio buttons

Implement settings for slow motion

Acceptance Criteria

• Allows user to toggle slow motion for the app using a switch

Build initial home screen animation

Acceptance Criteria

• After splash screen animation completes and home screen is displayed, the content animates in according to the spec
• Carousel slides in from the right
• Categories stagger in

Desktop layout for Shrine

Acceptance Criteria

• Update shrine to have a desktop layout
• Spec is at go/m2-shrine (motion https://direct.googleplex.com/#/group/Shrine)

Include the 2 fonts and map them to TextTheme

Acceptance Criteria

• Include assets for Montserrat and Oswald in the various weights required
• Map these fonts to TextTheme as best as we can

Test localization/internationalization for the app

Acceptance Criteria:

• Ensure everything is translated
• Ensure RTL support is correct

Build the settings backdrop behavior

Acceptance Criteria

• Tapping the settings button pushes home screen down with backdrop behavior
• Don't worry about the contents of the settings screen just yet
• Don't worry about desktop behavior just yet.

Implement basic settings layout

Acceptance Criteria

• Utilize correct colors/typography
• Implement footer with links to ABOUT, Send Feeback, and attribution for Toaster
• Create expanding list tile

Implement code viewer for demo screen

Acceptance Criteria

• Use the one in flutter/flutter as a base
• Use correct colors/typography from the spec

Breakdown of Task

• Automate generating code asset files from code
• Automate storing code asset files
• Use font and color in spec
• Use layout in spec
• Add copy button
• Switch to dark theme whenever code is displayed
• Display different code under different settings?

Merge Shrine into this repo

Acceptance Criteria

• After any outstanding Shrine work is done, merge shrine into this repo

Build additional screens for Crane (8)

Acceptance Criteria

• animated loading screen
• people selection
• location selection
• date selection
• time selection
• navigation backdrop

(internal) animations are at go/direct/#/spec/42090001+20620001+228960001+242880001+260840001+246850001

Add Android/iOS app icons

Acceptance Criteria

• Export app icons from Sketch and import them for both Android and iOS
• Requires utilizing platform dependent app icon mechanics

Build desktop layout for home screen

Acceptance Criteria

• Study carousel to become row of the 4 items
• Categories becomes 3 columns with a vertically scrolling list within each

Display a carousel of generative art on splash screen

Acceptance Criteria

• On app launch, a random piece of generative art is displayed
• When the home screen is pulled down and splash screen is visible, the art is displayed in an interactive carousel that allows user to swipe between pieces of art
• The art has an attribution with a link to the artist

Build settings icon animation

Acceptance Criteria

• Icon animates from settings to close and back
• Might require using Flare

Implement Cupertino buttons demo

Acceptance Criteria

• Similar to the existing gallery one

Implement List demo

Acceptance Criteria

• Build demo (based on Flutter Gallery one but with updated specs) and include in the demo list

Implement options section for demo screen

Acceptance Criteria

• Build in a reusable way for all demos
• A list with single selection
• Use correct colors/typography/sizes from the spec

Import analysis_options.yaml from flutter/samples to ensure correct analysis checks

Acceptance Criteria:

• Copy over this file:
  https://github.com/flutter/samples/blob/master/material_studies/rally/analysis_options.yaml
• Verify that its analysis checks are run

Implement text fields demo

Acceptance Criteria

• Build demo (based on Flutter Gallery one but with updated specs) and include in the demo list

Merge Crane into this repo

Acceptance Criteria

• After any outstanding Crane work is done, merge Crane into this repo

Build desktop layout for demo screen

Acceptance Criteria

• Includes additional fullscreen button to allow demo to appear fullscreen

Implement settings for text scale

Acceptance Criteria

• Allows user to toggle text scale for the app from system to custom
• Custom uses slider to allow for 4 different scales

Build desktop layout for settings screen

Acceptance Criteria

• Settings displays in a popup dialog instead of moving content down

Build the demo wrapper page

Acceptance Criteria

• Basic wireframes with the layout
• Do not worry about themes and visual fidelity and desktop yet
• Just build the basic UI with space to place a demo inside, and the app bar actions.

Implement BottomSheet demo

Acceptance Criteria

• Build demo (based on Flutter Gallery one but with updated specs) and include in the demo list

Implement settings for text direction

Acceptance Criteria

• Allows user to toggle text direction for the app from system to LTR to RTL using radio buttons

Implement Buttons demo

Acceptance Criteria

• Build demo (based on Flutter Gallery one but with updated specs) and include in the demo list

Implement and ensure text scaling support - Home screen

Acceptance Criteria

• Test and ensure text scaling is supported and does not break layouts
• Follow the Toaster-provided mock-ups

Implement Grid demo

Acceptance Criteria

• Build demo (based on Flutter Gallery one but with updated specs) and include in the demo list

Implement and ensure voiceover/talkback support - Home screen

Acceptance Criteria:

• Test and ensure voiceover/talkback allows full navigation

Implement ColorScheme for Material component demos

Acceptance Criteria

• Create a ColorSchemes to use for the Material Component demos based on the spec

Implement settings for platform mechanics

Acceptance Criteria

• Allows user to toggle platform mechanics for the app from system to Android to iOS using radio buttons

Desktop layout for Crane

Acceptance Criteria

• Update crane to have a desktop layout
• Spec is at go/m2-crane (motion https://direct.googleplex.com/#/group/Crane)

Implement Chips demo

Acceptance Criteria

• Build demo (based on Flutter Gallery one but with updated specs) and include in the demo list

Build the animated splash screen

Acceptance Criteria

• The app launches and displays the toaster provided art
• The app chooses one of the 12 gifs at random to display
• After 2s the home screen slides in from the bottom
• On desktop the home screen still exposes a small part of the black splash screen along the top

Implement Selection Controls demo

Acceptance Criteria

• Build demo (based on Flutter Gallery one but with updated specs) and include in the demo list
• Options:
  • Checkboxes
  • Radio buttons
  • Switches

Implement visual fidelity of home screen

Acceptance Criteria

• Use correct colors/typography/sizes/icons from the spec
• Do not worry about the backdrop settings or expanding list tiles yet
• The category tile background is white at 5% opacity in dark mode. white at 80% in light mode

Build settings screen animation (3)

Acceptance Criteria

• Tapping the settings icon will slide the home screen content down to reveal the settings panel
• Settings panel content staggers into view

Include the colors and map them to ColorScheme

Acceptance Criteria

• Include all the colors for dark/light theme
• Map these to ColorSchemes as best as we can