Material baseline grid

See https://www.google.com/design/spec/layout/metrics-keylines.html#

examples/stocks/flutter.yaml

@@ -12,6 +12,7 @@ material-design-icons:
   - name: action/thumb_up
   - name: content/add
   - name: device/dvr
+  - name: editor/border_clear
   - name: navigation/arrow_back
   - name: navigation/menu
   - name: navigation/more_vert

examples/stocks/lib/main.dart

@@ -48,17 +48,20 @@ class StocksAppState extends State<StocksApp> {
 
   StockMode _optimismSetting = StockMode.optimistic;
   BackupMode _backupSetting = BackupMode.disabled;
+  bool _showGridSetting = false;
   void modeUpdater(StockMode optimism) {
     setState(() {
       _optimismSetting = optimism;
     });
   }
-  void settingsUpdater({ StockMode optimism, BackupMode backup }) {
+  void settingsUpdater({ StockMode optimism, BackupMode backup, bool showGrid }) {
     setState(() {
       if (optimism != null)
         _optimismSetting = optimism;
       if (backup != null)
         _backupSetting = backup;
+      if (showGrid != null)
+        _showGridSetting = showGrid;
     });
   }
 
@@ -105,9 +108,10 @@ class StocksAppState extends State<StocksApp> {
     return new MaterialApp(
       title: 'Stocks',
       theme: theme,
+      debugShowMaterialGrid: _showGridSetting,
       routes: <String, RouteBuilder>{
          '/':         (RouteArguments args) => new StockHome(_stocks, _symbols, _optimismSetting, modeUpdater),
-         '/settings': (RouteArguments args) => new StockSettings(_optimismSetting, _backupSetting, settingsUpdater)
+         '/settings': (RouteArguments args) => new StockSettings(_optimismSetting, _backupSetting, _showGridSetting, settingsUpdater)
       },
       onGenerateRoute: _getRoute,
       onLocaleChanged: _onLocaleChanged

examples/stocks/lib/stock_settings.dart

@@ -6,15 +6,17 @@ part of stocks;
 
 typedef void SettingsUpdater({
   StockMode optimism,
-  BackupMode backup
+  BackupMode backup,
+  bool showGrid
 });
 
 class StockSettings extends StatefulComponent {
-  const StockSettings(this.optimism, this.backup, this.updater);
+  const StockSettings(this.optimism, this.backup, this.showGrid, this.updater);
 
   final StockMode optimism;
   final BackupMode backup;
   final SettingsUpdater updater;
+  final bool showGrid;
 
   StockSettingsState createState() => new StockSettingsState();
 }
@@ -22,11 +24,15 @@ class StockSettings extends StatefulComponent {
 class StockSettingsState extends State<StockSettings> {
   void _handleOptimismChanged(bool value) {
     value ??= false;
-    sendUpdates(value ? StockMode.optimistic : StockMode.pessimistic, config.backup);
+    sendUpdates(value ? StockMode.optimistic : StockMode.pessimistic, config.backup, config.showGrid);
   }
 
   void _handleBackupChanged(bool value) {
-    sendUpdates(config.optimism, value ? BackupMode.enabled : BackupMode.disabled);
+    sendUpdates(config.optimism, value ? BackupMode.enabled : BackupMode.disabled, config.showGrid);
+  }
+
+  void _handleShowGridChanged(bool value) {
+    sendUpdates(config.optimism, config.backup, value);
   }
 
   void _confirmOptimismChange() {
@@ -60,11 +66,12 @@ class StockSettingsState extends State<StockSettings> {
     }
   }
 
-  void sendUpdates(StockMode optimism, BackupMode backup) {
+  void sendUpdates(StockMode optimism, BackupMode backup, bool showGrid) {
     if (config.updater != null)
       config.updater(
         optimism: optimism,
-        backup: backup
+        backup: backup,
+        showGrid: showGrid
       );
   }
 
@@ -77,30 +84,49 @@ class StockSettingsState extends State<StockSettings> {
   Widget buildSettingsPane(BuildContext context) {
     // TODO(ianh): Once we have the gesture API hooked up, fix https://github.com/domokit/mojo/issues/281
     // (whereby tapping the widgets below causes both the widget and the menu item to fire their callbacks)
-    return new Block(<Widget>[
+    List<Widget> rows = <Widget>[
+      new DrawerItem(
+        icon: 'action/thumb_up',
+        onPressed: () => _confirmOptimismChange(),
+        child: new Row(<Widget>[
+          new Flexible(child: new Text('Everything is awesome')),
+          new Checkbox(
+            value: config.optimism == StockMode.optimistic,
+            onChanged: (bool value) => _confirmOptimismChange()
+          ),
+        ])
+      ),
+      new DrawerItem(
+        icon: 'action/backup',
+        onPressed: () { _handleBackupChanged(!(config.backup == BackupMode.enabled)); },
+        child: new Row(<Widget>[
+          new Flexible(child: new Text('Back up stock list to the cloud')),
+          new Switch(
+            value: config.backup == BackupMode.enabled,
+            onChanged: _handleBackupChanged
+          ),
+        ])
+      ),
+    ];
+    assert(() {
+      // material grid is only available in checked mode
+      rows.add(
         new DrawerItem(
-          icon: 'action/thumb_up',
-          onPressed: () => _confirmOptimismChange(),
+          icon: 'editor/border_clear',
+          onPressed: () { _handleShowGridChanged(!config.showGrid); },
           child: new Row(<Widget>[
-            new Flexible(child: new Text('Everything is awesome')),
-            new Checkbox(
-              value: config.optimism == StockMode.optimistic,
-              onChanged: (bool value) => _confirmOptimismChange()
-            ),
-          ])
-        ),
-        new DrawerItem(
-          icon: 'action/backup',
-          onPressed: () { _handleBackupChanged(!(config.backup == BackupMode.enabled)); },
-          child: new Row(<Widget>[
-            new Flexible(child: new Text('Back up stock list to the cloud')),
+            new Flexible(child: new Text('Show material grid (for debugging)')),
             new Switch(
-              value: config.backup == BackupMode.enabled,
-              onChanged: _handleBackupChanged
+              value: config.showGrid,
+              onChanged: _handleShowGridChanged
             ),
           ])
-        ),
-      ],
+        )
+      );
+      return true;
+    });
+    return new Block(
+      rows,
       padding: const EdgeDims.symmetric(vertical: 20.0)
     );
   }

packages/flutter/lib/src/material/material_app.dart

@@ -47,10 +47,12 @@ class MaterialApp extends StatefulComponent {
     this.theme,
     this.routes: const <String, RouteBuilder>{},
     this.onGenerateRoute,
-    this.onLocaleChanged
+    this.onLocaleChanged,
+    this.debugShowMaterialGrid: false
   }) : super(key: key) {
     assert(routes != null);
     assert(routes.containsKey(Navigator.defaultRouteName) || onGenerateRoute != null);
+    assert(debugShowMaterialGrid != null);
   }
 
   final String title;
@@ -58,6 +60,7 @@ class MaterialApp extends StatefulComponent {
   final Map<String, RouteBuilder> routes;
   final RouteFactory onGenerateRoute;
   final LocaleChangedCallback onLocaleChanged;
+  final bool debugShowMaterialGrid;
 
   _MaterialAppState createState() => new _MaterialAppState();
 }
@@ -131,7 +134,7 @@ class _MaterialAppState extends State<MaterialApp> implements BindingObserver {
     }
 
     ThemeData theme = config.theme ?? new ThemeData.fallback();
-    return new MediaQuery(
+    Widget result = new MediaQuery(
       data: new MediaQueryData(size: _size),
       child: new LocaleQuery(
         data: _localeData,
@@ -156,6 +159,19 @@ class _MaterialAppState extends State<MaterialApp> implements BindingObserver {
         )
       )
     );
+    assert(() {
+      if (config.debugShowMaterialGrid) {
+        result = new GridPaper(
+          color: const Color(0xE0F9BBE0),
+          interval: 8.0,
+          divisions: 2,
+          subDivisions: 1,
+          child: result
+        );
+      }
+      return true;
+    });
+    return result;
   }
 
 }