Merge pull request #1624 from abarth/list_item

Add a ListItem widget

packages/flutter/lib/material.dart

@@ -24,6 +24,7 @@ export 'src/material/icon_button.dart';
 export 'src/material/icon.dart';
 export 'src/material/ink_well.dart';
 export 'src/material/input.dart';
+export 'src/material/list_item.dart';
 export 'src/material/material.dart';
 export 'src/material/material_app.dart';
 export 'src/material/material_button.dart';

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

@@ -16,6 +16,11 @@ const double kStatusBarHeight = 50.0;
 const double kToolBarHeight = 56.0;
 const double kSnackBarHeight = 52.0;
 
+// https://www.google.com/design/spec/layout/metrics-keylines.html#metrics-keylines-keylines-spacing
+const double kListTitleHeight = 72.0;
+const double kListSubtitleHeight = 48.0;
+const double kListItemHeight = 72.0;
+
 const double kMaterialDrawerHeight = 140.0;
 const double kScrollbarSize = 10.0;
 const Duration kScrollbarFadeDuration = const Duration(milliseconds: 250);

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

@@ -0,0 +1,63 @@
+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/gestures.dart';
+import 'package:flutter/painting.dart';
+import 'package:flutter/widgets.dart';
+
+import 'ink_well.dart';
+import 'constants.dart';
+
+class ListItem extends StatelessComponent {
+  ListItem({
+    Key key,
+    this.left,
+    this.center,
+    this.right,
+    this.onTap,
+    this.onLongPress
+  }) : super(key: key) {
+    assert(center != null);
+  }
+
+  final Widget left;
+  final Widget center;
+  final Widget right;
+  final GestureTapCallback onTap;
+  final GestureLongPressCallback onLongPress;
+
+  Widget build(BuildContext context) {
+    List<Widget> children = new List<Widget>();
+
+    if (left != null) {
+      children.add(new Container(
+        margin: new EdgeDims.only(right: 16.0),
+        width: 40.0,
+        child: left
+      ));
+    }
+
+    children.add(new Flexible(
+      child: center
+    ));
+
+    if (right != null) {
+      children.add(new Container(
+        margin: new EdgeDims.only(left: 8.0),
+        width: 40.0,
+        child: right
+      ));
+    }
+
+    return new Container(
+      height: kListItemHeight,
+      padding: const EdgeDims.symmetric(horizontal: 16.0),
+      child: new InkWell(
+        onTap: onTap,
+        onLongPress: onLongPress,
+        child: new Row(children)
+      )
+    );
+  }
+}