Add a Material Design widget page #285
Conversation
basic-widgets.md
Outdated
| You can see many of the Material Design widgets in action in our | ||
| [Flutter Gallery](https://github.com/flutter/flutter/tree/master/examples/flutter_gallery) | ||
| demo app, and you can check out the | ||
| demo app, and you can check out the [Catalog of Material Design widgets](/md-catalog) and |
There was a problem hiding this comment.
Please break this sentence, e.g.
"You can see many of the material design widgets in action in the Flutter Gallery. To learn about Flutter's implementation of material design components, take a look at the material widgets design catalog, and the API docs for the material widgets library."
index.md
Outdated
| See these topics to understand how the Flutter framework works. | ||
|
|
||
| - [Basic widgets overview](basic-widgets) | ||
| - [Material Design widgets](md-catalog) |
There was a problem hiding this comment.
Title should be: "Material design catalog"
|
Please use a fully qualified filename, like material-design-catalog |
md-catalog.md
Outdated
| @@ -0,0 +1,25 @@ | |||
| --- | |||
| layout: page | |||
| title: Material Design widgets | |||
There was a problem hiding this comment.
Ditto. Title should be "Material Design Catalog"
md-catalog.md
Outdated
|
|
||
| <div class="catalog-end"></div> | ||
|
|
||
| Again, you can see the above widgets in action in our [Flutter Gallery](https://github.com/flutter/flutter/tree/master/examples/flutter_gallery) demo app. |
There was a problem hiding this comment.
You can remove the last paragraph (starting from "Again") since it's redundant.
_data/sidebars/home_sidebar.yml
Outdated
| url: /basic-widgets/ | ||
| output: web | ||
|
|
||
| - title: Material Design widgets |
There was a problem hiding this comment.
Title should be "Material design catalog" (note capitalization for sidenav items).
There was a problem hiding this comment.
Shouldn't "design" also be capitalized, since "Material Design" is a technical term?
There was a problem hiding this comment.
When documenting material design for the Android developer site, the official guidance that we received from Roman Nurik was to use lowercase "material design". This is consistent with usage in the external Google spec.
There was a problem hiding this comment.
I see, thanks for clarifying it!
|
@InMatrix Thanks for putting this together! Please see my comments. |
Tweaked the material design catalog page based on PR feedback.
|
I've addressed the feedback. Please take another look. Thanks! |
|
Please use a longer filename, such as material-design-catalog. Thanks! (it's easier to manage when the filename matches the link we use) |
material-design-catalog.md
Outdated
| permalink: /material-design-catalog/ | ||
| --- | ||
|
|
||
| This page catalogs Flutter’s reference implementation of UI components from Google’s [Material Design Specification](https://material.google.com/). You can see many of the material design widgets in action in our [Flutter Gallery](https://github.com/flutter/flutter/tree/master/examples/flutter_gallery) demo app. For an overview of different kinds of widgets in Flutter, please take a look at the [Basic Widgets Overview](/basic-widgets/). |
There was a problem hiding this comment.
In the future, please break these lines. Makes reviews much easier :)
There was a problem hiding this comment.
Great suggestion. I'll do that in the future.
material-design-catalog.md
Outdated
| permalink: /material-design-catalog/ | ||
| --- | ||
|
|
||
| This page catalogs Flutter’s reference implementation of UI components from Google’s [Material Design Specification](https://material.google.com/). You can see many of the material design widgets in action in our [Flutter Gallery](https://github.com/flutter/flutter/tree/master/examples/flutter_gallery) demo app. For an overview of different kinds of widgets in Flutter, please take a look at the [Basic Widgets Overview](/basic-widgets/). |
There was a problem hiding this comment.
Should we say something about how complete this list is?
For example, are we claiming "these are all the widgets" ? Or, something like, "for the complete list, check out __________"
I like the later because we might add a widget and forget to update this page.
| sidebar: home_sidebar | ||
| permalink: /material-design-catalog/ | ||
| --- | ||
|
|
There was a problem hiding this comment.
I'd love to add a disclaimer up at the top, something like "(Flutter implements a set of material design widgets, but you don't need to use material design. Flutter's base widgets provide extensible starting points to build customer UIs with Flutter. To learn more, check out ______.)"
|
lgtm |
The date picker and time picker are implemented with functions instead of widgets. So I created custom html for them. Specifically, a column is added to the CSV file to indicate whether this row is standard. And then I added a control flow to the template.
3 participants
I created this page to address issue #6161. Please take a look at it on this staging site: https://project-1912052061267295165.firebaseapp.com/md-catalog/
The images are taken from material.google.com for now, but we have agreed that we should eventually use screenshots from the actual Flutter implementation (e.g., Flutter Gallery).
The page uses a template which draws data from catalog.csv in the _data folder.