flutter · InMatrix · Oct 10, 2016 · Oct 7, 2016 · Oct 7, 2016 · Oct 7, 2016
diff --git a/_data/catalog.csv b/_data/catalog.csv
@@ -0,0 +1,30 @@
+standard,comp_name,comp_desc,widget_name,extra_html,comp_link,widget_link,img_link
+TRUE,Bottom navigation,Bottom navigation bars make it easy to explore and switch between top-level views in a single tap.,BottomNavigationBar,,https://material.google.com/components/bottom-navigation.html,https://docs.flutter.io/flutter/material/BottomNavigationBar-class.html,https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VWG5nei0wWXpoczA/components_bottom_navigation.png
+TRUE,Bottom sheets,Bottom sheets slide up from the bottom of the screen to reveal more content.,BottomSheet,,https://material.google.com/components/bottom-sheets.html,https://docs.flutter.io/flutter/material/BottomSheet-class.html,https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VVWZzZ1FIN09XWGc/components_bottom_sheets.png
+TRUE,Floating action buttton,A floating action button represents the primary action in an application.,FloatingActionButton,,https://material.google.com/components/buttons-floating-action-button.html,https://docs.flutter.io/flutter/material/FloatingActionButton-class.html,https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VN20tOXJoUjVxQjg/components_buttons_fab.png
+TRUE,Raised button,A typically rectangular material button that lifts and displays ink reactions on press.,RaisedButton,,https://material.google.com/components/buttons.html#buttons-button-types,https://docs.flutter.io/flutter/material/RaisedButton-class.html,https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VbDh6YmNiYVc3SHM/components_buttons_usage2.png
+TRUE,Flat button,A button made of ink that displays ink reactions on press but does not lift.,FlatButton,,https://material.google.com/components/buttons.html#buttons-button-types,https://docs.flutter.io/flutter/material/FlatButton-class.html,https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VNDg3V3ZjU2hsNGc/components_buttons_usage3.png
+TRUE,Cards,A card is a sheet of material that serves as an entry point to more detailed information.,Card,,https://material.google.com/components/cards.html,https://docs.flutter.io/flutter/material/Card-class.html,https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VR0ptbC1RV1NLNlk/components_cards.png
+TRUE,Chips,"Chips represent complex entities in small blocks, such as a contact.",Chip,,https://material.google.com/components/chips.html#,https://docs.flutter.io/flutter/material/Chip-class.html,https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VM1VORGxxWUx5U0E/components_chips.png
+TRUE,Data tables,Data tables display sets of raw data. They usually appear in desktop enterprise products.,DataTable,,https://material.google.com/components/data-tables.html,https://docs.flutter.io/flutter/material/DataTable-class.html,https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VWTJHMmJZdWZ5LU0/components_data_tables.png
+TRUE,Simple Dialog,"Simple dialogs can provide additional details or actions about a list item. For example, they can display avatars, icons, clarifying subtext, or orthogonal actions (such as adding an account).",SimpleDialog,,https://material.google.com/components/dialogs.html#dialogs-simple-dialogs,https://docs.flutter.io/flutter/material/SimpleDialog-class.html,https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VVGNnN3NvMGdoQTg/components_dialogs.png
+TRUE,Alerts,"Alerts are urgent interruptions, requiring acknowledgement, that inform the user about a situation.",AlertDialog,,https://material.google.com/components/dialogs.html#dialogs-alerts,https://docs.flutter.io/flutter/material/AlertDialog-class.html,https://material-design.storage.googleapis.com/publish/material_v_9/0Bzhp5Z4wHba3TzFHYVlrbWF2bnM/components_alerts_1.png
+TRUE,Dividers,"A divider is a thin, lightweight rule that groups content in lists and page layouts.",Divider,,https://material.google.com/components/dividers.html#,https://docs.flutter.io/flutter/material/Divider-class.html,https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VUVlmbHM1Q013RU0/components_dividers.png
+TRUE,Expansion panels,Expansion panels contain creation flows and allow lightweight editing of an element.,ExpansionPanel,,https://material.google.com/components/expansion-panels.html#,https://docs.flutter.io/flutter/material/ExpansionPanel-class.html,https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VOXF3eEJ3azZMSjg/components_expansion_panels.png
+TRUE,Grid lists,A grid list consists of a repeated pattern of cells arrayed in a vertical and horizontal layout.,ScrollableGrid,,https://material.google.com/components/grid-lists.html#,https://docs.flutter.io/flutter/material/ScrollableGrid-class.html,https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VandQYXpNMG9aQUk/components_grid_lists.png
+TRUE,Lists,A list consists of a single continuous column of tessellated sub-divisions of equal width called rows that function as containers for tiles.,MaterialList,,https://material.google.com/components/lists.html,https://docs.flutter.io/flutter/material/MaterialList-class.html,https://material-design.storage.googleapis.com/publish/material_v_9/0Bx4BSt6jniD7aGNuNnFnVktPdGM/components_lists_usage1.png
+TRUE,Menus,"Menus appear upon interaction with a button, action, or other control. They display a list of choices, with one choice per line.",PopupMenuButton,,https://material.google.com/components/menus.html,https://docs.flutter.io/flutter/material/PopupMenuButton-class.html,https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VakJ6a0F2MFJaaDQ/components_menus.png
+FALSE,Pickers,,,"<p> Date pickers use a dialog window to select a single date on mobile. Time pickers use a dialog to select a single time (in the hours:minutes format) on mobile.  You can call <a href='https://docs.flutter.io/flutter/material/showDatePicker.html'>showDatePicker()</a> and <a href='https://docs.flutter.io/flutter/material/showTimePicker.html'>showTimePicker()</a> to implement these two pickers. </p> <a href='https://github.com/flutter/flutter/search?utf8=%E2%9C%93&q=path%3Aexamples+showTimePicker+OR+showDatePicker&type=Code'>Sample usage</a>
+    | <a href='https://material.google.com/components/pickers.html#'>Design spec</a>
+<p>",,,https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VY2h4WElGdEhPb2c/components_pickers.png
+TRUE,Progress & activity,Progress and activity indicators are visual indications of an app loading content.,LinearProgressIndicator,"In addition, you may also use the <a href='https://docs.flutter.io/flutter/material/CircularProgressIndicator-class.html'>CircularProgressIndicator</a> widget.",https://material.google.com/components/progress-activity.html,https://docs.flutter.io/flutter/material/LinearProgressIndicator-class.html,https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VWkJiRjRLbzRNS3M/components_progress_and_activity.png
+TRUE,Checkbox,Checkboxes allow the user to select multiple options from a set.,Checkbox,,https://material.google.com/components/selection-controls.html#,https://docs.flutter.io/flutter/material/Checkbox-class.html,https://storage.googleapis.com/material-design/publish/material_v_9/0Bx4BSt6jniD7T2xGbGo0cUlPVG8/components_switches_check1.png
+TRUE,Radio button,Radio buttons allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side.,Radio,,https://material.google.com/components/selection-controls.html#selection-controls-radio-button,https://docs.flutter.io/flutter/material/Radio-class.html,https://storage.googleapis.com/material-design/publish/material_v_9/0Bx4BSt6jniD7Z1NaaXh2ZkpDRkE/components_switches_radio1.png
+TRUE,Switch,On/off switches toggle the state of a single settings option.,Switch,,https://material.google.com/components/selection-controls.html#selection-controls-switch,https://docs.flutter.io/flutter/material/Switch-class.html,https://storage.googleapis.com/material-design/publish/material_v_9/0Bx4BSt6jniD7NDg4aGIzVXYxVEE/components_switches_switch1.png
+TRUE,Sliders,Sliders let users select from a range of values by moving the slider thumb.,Slider,,https://material.google.com/components/sliders.html,https://docs.flutter.io/flutter/material/Slider-class.html,https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VTmJrQUYzajFIclE/components_sliders.png
+TRUE,Snackbars,Snackbars provide brief feedback about an operation through a message at the bottom of the screen.,SnackBar,,https://material.google.com/components/snackbars-toasts.html,https://docs.flutter.io/flutter/material/SnackBar-class.html,https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VSjZkendtc19iZ2M/components_snackbars.png
+TRUE,Steppers,Steppers convey progress through numbered steps.,Stepper,,https://material.google.com/components/steppers.html,https://docs.flutter.io/flutter/material/Stepper-class.html,https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VTndyUnNCR2tQREE/components_steppers.png
+TRUE,Tabs,Tabs make it easy to explore and switch between different views.,TabBar,,https://material.google.com/components/tabs.html,https://docs.flutter.io/flutter/material/TabBar-class.html,https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VaWdBdnhMT3ViXzQ/components_tabs.png
+TRUE,Input,Touching a text field places the cursor and displays the keyboard.,Input,,https://material.google.com/components/text-fields.html#text-fields-input,https://docs.flutter.io/flutter/material/Input-class.html,https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VbURLNTM0N0R6eUE/components_text_fields.png
+TRUE,Toolbars,Toolbar actions appear above the view affected by their actions.,AppBar,,https://material.google.com/components/toolbars.html#,https://docs.flutter.io/flutter/material/AppBar-class.html,https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VclpfSFpuelBGR1k/components_toolbars.png
+TRUE,Tooltips,"Tooltips are text labels that appear when the user hovers over, focuses on, or touches an element.",Tooltip,,https://material.google.com/components/tooltips.html,https://docs.flutter.io/flutter/material/Tooltip-class.html,https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VZ1JKMzJFcmhOWkk/components_tooltips.png
diff --git a/_data/sidebars/home_sidebar.yml b/_data/sidebars/home_sidebar.yml
@@ -17,7 +17,7 @@ entries:
   - title: Flutter Examples
     external_url: https://github.com/flutter/flutter/tree/master/examples
     output: web
-    
+
   - title: New to Flutter
     output: web
     folderitems:
@@ -46,6 +46,10 @@ entries:
       url: /basic-widgets/
       output: web
 
+    - title: Material design catalog
+      url: /material-design-catalog/
+      output: web
+
     - title: Gestures
       url: /gestures/
       output: web

diff --git a/_includes/head.html b/_includes/head.html
@@ -11,7 +11,9 @@
   <link rel="stylesheet" href="{{ "/css/lavish-bootstrap.css" | prepend: site.baseurl }}">
   <link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">
   <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro%7CRoboto:500,400italic,300,400" rel="stylesheet">
-
+  {% for css_name in page.extra_css %}
+      <link rel="stylesheet" href="{{ css_name }}">
+  {% endfor %}
   <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
 
   <script>

diff --git a/basic-widgets.md b/basic-widgets.md
@@ -16,10 +16,10 @@ general-purpose and don't offer an opinion about the visual style of your app.
 To see all the basic widgets and related classes, check out the
 [API docs for the widgets library](http://docs.flutter.io/flutter/widgets/widgets-library.html).
 
-You may also be interested in Flutter's material design widgets.
-You can see many of the Material Design widgets in action in our
+You may also be interested in Flutter's Material Design widgets.
+You can see many of them 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. To learn about Flutter's implementation of Material Design components, take a look at the [Material design catalog](/material-design-catalog) and the
 [API docs for the material widgets library](http://docs.flutter.io/flutter/material/material-library.html).
 
 Container

diff --git a/css/catalog.css b/css/catalog.css
@@ -0,0 +1,13 @@
+.post-content img.comp-img {
+  height:150px;
+  float: left;
+  margin: 0px 15px 0px 0px;
+}
+
+div.comp-entry, div.catalog-end {
+  clear:both;
+}
+
+div.catalog-end {
+  padding-top: 20px
+}
diff --git a/index.md b/index.md
@@ -24,6 +24,7 @@ See these topics to quickly start building cross-platform mobile apps with Flutt
 See these topics to understand how the Flutter framework works.
 
  - [Basic widgets overview](basic-widgets)
+ - [Material design catalog](material-design-catalog)
  - [Gestures in Flutter](gestures)
  - [Layouts in Flutter](layout)
  - [Animations in Flutter](animations)

diff --git a/material-design-catalog.md b/material-design-catalog.md
@@ -0,0 +1,33 @@
+---
+layout: page
+title: Material Design Catalog
+extra_css:
+  - /css/catalog.css
+sidebar: home_sidebar
+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.
+
+Flutter makes material design easy to implement, but you don't need to use material design in your app.
+Flutter's base widgets provide extensible starting points to build customer UIs with Flutter. To learn more, check out the [Basic Widgets Overview](/basic-widgets/).
+
+<!-- Data for the catalog comes from catalog.csv in the _data folder -->
+{% for comp in site.data.catalog %}
+<div class="comp-entry">
+  <h2>{{comp.comp_name}}</h2>
+  <img class="comp-img" src="{{comp.img_link}}"/>
+  {% if comp.standard == 'TRUE' %}
+    <!-- if the component can fit into the standard format -->
+    <p>{{comp.comp_desc}} The <a href="{{comp.widget_link}}">{{comp.widget_name}}</a> widget implements this component. {{comp.extra_html}} </p>
+    <p><a href="https://github.com/flutter/flutter/search?utf8=%E2%9C%93&q=path%3Aexamples+%22new+{{comp.widget_name}}%22&type=Code">Sample usage</a>
+    | <a href="{{comp.comp_link}}">Design spec</a></p>
+  {% else %}
+    <!-- if the component requires a custom format -->
+    {{comp.extra_html}}
+  {% endif %}
+</div>
+{% endfor %}
+
+<div class="catalog-end"></div>