Merge pull request #1313 from abarth/fn3_drawer

Port some drawer and button widgets to fn3

packages/flutter/lib/src/fn3/drawer_divider.dart

+// 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:sky/src/fn3/basic.dart';
+import 'package:sky/src/fn3/framework.dart';
+import 'package:sky/src/fn3/theme.dart';
+
+class DrawerDivider extends StatelessComponent {
+  const DrawerDivider({ Key key }) : super(key: key);
+
+  Widget build(BuildContext context) {
+    return new Container(
+      height: 0.0,
+      decoration: new BoxDecoration(
+        border: new Border(
+          bottom: new BorderSide(
+            color: Theme.of(context).dividerColor
+          )
+        )
+      ),
+      margin: const EdgeDims.symmetric(vertical: 8.0)
+    );
+  }
+}

packages/flutter/lib/src/fn3/drawer_header.dart

+// 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:sky/material.dart';
+import 'package:sky/src/fn3/basic.dart';
+import 'package:sky/src/fn3/framework.dart';
+import 'package:sky/src/fn3/theme.dart';
+
+// TODO(jackson): This class should usually render the user's
+// preferred banner image rather than a solid background
+
+class DrawerHeader extends StatelessComponent {
+  const DrawerHeader({ Key key, this.child }) : super(key: key);
+
+  final Widget child;
+
+  Widget build(BuildContext context) {
+    return new Container(
+      height: kStatusBarHeight + kMaterialDrawerHeight,
+      decoration: new BoxDecoration(
+        backgroundColor: Theme.of(context).cardColor,
+        border: const Border(
+          bottom: const BorderSide(
+            color: const Color(0xFFD1D9E1),
+            width: 1.0
+          )
+        )
+      ),
+      padding: const EdgeDims.only(bottom: 7.0),
+      margin: const EdgeDims.only(bottom: 8.0),
+      child: new Column([
+        new Flexible(child: new Container()),
+        new Container(
+          padding: const EdgeDims.symmetric(horizontal: 16.0),
+          child: new DefaultTextStyle(
+            style: Theme.of(context).text.body2,
+            child: child
+          )
+        )]
+      )
+    );
+  }
+}

packages/flutter/lib/src/fn3/drawer_item.dart

+// 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 'dart:sky' as sky;
+
+import 'package:sky/gestures.dart';
+import 'package:sky/material.dart';
+import 'package:sky/painting.dart';
+import 'package:sky/src/fn3/basic.dart';
+import 'package:sky/src/fn3/button_state.dart';
+import 'package:sky/src/fn3/framework.dart';
+import 'package:sky/src/fn3/gesture_detector.dart';
+import 'package:sky/src/fn3/icon.dart';
+import 'package:sky/src/fn3/ink_well.dart';
+import 'package:sky/src/fn3/theme.dart';
+
+class DrawerItem extends StatefulComponent {
+  const DrawerItem({ Key key, this.icon, this.child, this.onPressed, this.selected: false })
+    : super(key: key);
+
+  final String icon;
+  final Widget child;
+  final GestureTapListener onPressed;
+  final bool selected;
+
+  DrawerItemState createState() => new DrawerItemState(this);
+}
+
+class DrawerItemState extends ButtonState<DrawerItem> {
+  DrawerItemState(DrawerItem config) : super(config);
+
+  TextStyle _getTextStyle(ThemeData themeData) {
+    TextStyle result = themeData.text.body2;
+    if (config.selected)
+      result = result.copyWith(color: themeData.primaryColor);
+    return result;
+  }
+
+  Color _getBackgroundColor(ThemeData themeData) {
+    if (highlight)
+      return themeData.highlightColor;
+    if (config.selected)
+      return themeData.selectedColor;
+    return Colors.transparent;
+  }
+
+  sky.ColorFilter _getColorFilter(ThemeData themeData) {
+    if (config.selected)
+      return new sky.ColorFilter.mode(themeData.primaryColor, sky.TransferMode.srcATop);
+    return new sky.ColorFilter.mode(const Color(0x73000000), sky.TransferMode.dstIn);
+  }
+
+  Widget buildContent(BuildContext context) {
+    ThemeData themeData = Theme.of(context);
+
+    List<Widget> flexChildren = new List<Widget>();
+    if (config.icon != null) {
+      flexChildren.add(
+        new Padding(
+          padding: const EdgeDims.symmetric(horizontal: 16.0),
+          child: new Icon(
+            type: config.icon,
+            size: 24,
+            colorFilter: _getColorFilter(themeData))
+        )
+      );
+    }
+    flexChildren.add(
+      new Flexible(
+        child: new Padding(
+          padding: const EdgeDims.symmetric(horizontal: 16.0),
+          child: new DefaultTextStyle(
+            style: _getTextStyle(themeData),
+            child: config.child
+          )
+        )
+      )
+    );
+
+    return new GestureDetector(
+      onTap: config.onPressed,
+      child: new Container(
+        height: 48.0,
+        decoration: new BoxDecoration(backgroundColor: _getBackgroundColor(themeData)),
+        child: new InkWell(
+          child: new Row(flexChildren)
+        )
+      )
+    );
+  }
+}

packages/flutter/lib/src/fn3/floating_action_button.dart

+// 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:sky/gestures.dart';
+import 'package:sky/src/fn3/basic.dart';
+import 'package:sky/src/fn3/button_state.dart';
+import 'package:sky/src/fn3/framework.dart';
+import 'package:sky/src/fn3/gesture_detector.dart';
+import 'package:sky/src/fn3/icon.dart';
+import 'package:sky/src/fn3/ink_well.dart';
+import 'package:sky/src/fn3/material.dart';
+import 'package:sky/src/fn3/theme.dart';
+
+// TODO(eseidel): This needs to change based on device size?
+// http://www.google.com/design/spec/layout/metrics-keylines.html#metrics-keylines-keylines-spacing
+const double _kSize = 56.0;
+
+class FloatingActionButton extends StatefulComponent {
+  const FloatingActionButton({
+    Key key,
+    this.child,
+    this.backgroundColor,
+    this.onPressed
+  }) : super(key: key);
+
+  final Widget child;
+  final Color backgroundColor;
+  final GestureTapListener onPressed;
+
+  FloatingActionButtonState createState() => new FloatingActionButtonState(this);
+}
+
+class FloatingActionButtonState extends ButtonState<FloatingActionButton> {
+  FloatingActionButtonState(FloatingActionButton config) : super(config);
+
+  Widget buildContent(BuildContext context) {
+    IconThemeColor iconThemeColor = IconThemeColor.white;
+    Color materialColor = config.backgroundColor;
+    if (materialColor == null) {
+      ThemeData themeData = Theme.of(context);
+      materialColor = themeData.accentColor;
+      iconThemeColor = themeData.accentColorBrightness == ThemeBrightness.dark ? IconThemeColor.white : IconThemeColor.black;
+    }
+
+    return new Material(
+      color: materialColor,
+      type: MaterialType.circle,
+      level: highlight ? 3 : 2,
+      child: new ClipOval(
+        child: new GestureDetector(
+          onTap: config.onPressed,
+          child: new Container(
+            width: _kSize,
+            height: _kSize,
+            child: new InkWell(
+              child: new Center(
+                child: new IconTheme(
+                  data: new IconThemeData(color: iconThemeColor),
+                  child: config.child
+                )
+              )
+            )
+          )
+        )
+      )
+    );
+  }
+}

packages/flutter/lib/src/fn3/icon_button.dart

+// 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 'dart:sky' as sky;
+
+import 'package:sky/src/fn3/basic.dart';
+import 'package:sky/src/fn3/icon.dart';
+import 'package:sky/src/fn3/framework.dart';
+import 'package:sky/src/fn3/gesture_detector.dart';
+
+class IconButton extends StatelessComponent {
+  const IconButton({ Key key, this.icon, this.onPressed, this.color }) : super(key: key);
+
+  final String icon;
+  final Function onPressed;
+  final Color color;
+
+  Widget build(BuildContext context) {
+    Widget child = new Icon(type: icon, size: 24);
+    if (color != null) {
+      child = new ColorFilter(
+        color: color,
+        transferMode: sky.TransferMode.srcATop,
+        child: child
+      );
+    }
+    return new GestureDetector(
+      onTap: onPressed,
+      child: new Padding(
+        child: child,
+        padding: const EdgeDims.all(8.0))
+    );
+  }
+}