From da2ee9129a41eb61531500302e9c1f8e470e9172 Mon Sep 17 00:00:00 2001 From: Adam Barth Date: Wed, 23 Sep 2015 11:26:04 -0700 Subject: [PATCH] Port some widgets to fn3 --- .../flutter/lib/src/fn3/button_state.dart | 41 +++++++ packages/flutter/lib/src/fn3/icon.dart | 102 ++++++++++++++++++ packages/flutter/lib/src/fn3/theme.dart | 30 ++++++ packages/flutter/lib/src/fn3/title.dart | 19 ++++ packages/flutter/lib/src/fn3/tool_bar.dart | 89 +++++++++++++++ 5 files changed, 281 insertions(+) create mode 100644 packages/flutter/lib/src/fn3/button_state.dart create mode 100644 packages/flutter/lib/src/fn3/icon.dart create mode 100644 packages/flutter/lib/src/fn3/theme.dart create mode 100644 packages/flutter/lib/src/fn3/title.dart create mode 100644 packages/flutter/lib/src/fn3/tool_bar.dart diff --git a/packages/flutter/lib/src/fn3/button_state.dart b/packages/flutter/lib/src/fn3/button_state.dart new file mode 100644 index 0000000000..40a3100f66 --- /dev/null +++ b/packages/flutter/lib/src/fn3/button_state.dart @@ -0,0 +1,41 @@ +// 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'; + +abstract class ButtonState extends ComponentState { + ButtonState(T config) : super(config); + + bool highlight; + + void _handlePointerDown(_) { + setState(() { + highlight = true; + }); + } + + void _handlePointerUp(_) { + setState(() { + highlight = false; + }); + } + + void _handlePointerCancel(_) { + setState(() { + highlight = false; + }); + } + + Widget build(BuildContext context) { + return new Listener( + onPointerDown: _handlePointerDown, + onPointerUp: _handlePointerUp, + onPointerCancel: _handlePointerCancel, + child: buildContent() + ); + } + + Widget buildContent(); +} diff --git a/packages/flutter/lib/src/fn3/icon.dart b/packages/flutter/lib/src/fn3/icon.dart new file mode 100644 index 0000000000..64945807ac --- /dev/null +++ b/packages/flutter/lib/src/fn3/icon.dart @@ -0,0 +1,102 @@ +// 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/services.dart'; +import 'package:sky/src/fn3/basic.dart'; +import 'package:sky/src/fn3/theme.dart'; +import 'package:sky/src/fn3/framework.dart'; + +enum IconThemeColor { white, black } + +class IconThemeData { + const IconThemeData({ this.color }); + final IconThemeColor color; +} + +class IconTheme extends InheritedWidget { + + IconTheme({ + Key key, + this.data, + Widget child + }) : super(key: key, child: child) { + assert(data != null); + assert(child != null); + } + + final IconThemeData data; + + static IconThemeData of(BuildContext context) { + IconTheme result = context.inheritedWidgetOfType(IconTheme); + return result?.data; + } + + bool updateShouldNotify(IconTheme old) => data != old.data; + +} + +AssetBundle _initIconBundle() { + if (rootBundle != null) + return rootBundle; + const String _kAssetBase = '/packages/material_design_icons/icons/'; + return new NetworkAssetBundle(Uri.base.resolve(_kAssetBase)); +} + +final AssetBundle _iconBundle = _initIconBundle(); + +class Icon extends StatelessComponent { + Icon({ + Key key, + this.size, + this.type: '', + this.color, + this.colorFilter + }) : super(key: key); + + final int size; + final String type; + final IconThemeColor color; + final sky.ColorFilter colorFilter; + + String getColorSuffix(BuildContext context) { + IconThemeColor iconThemeColor = color; + if (iconThemeColor == null) { + IconThemeData iconThemeData = IconTheme.of(context); + iconThemeColor = iconThemeData == null ? null : iconThemeData.color; + } + if (iconThemeColor == null) { + ThemeBrightness themeBrightness = Theme.of(context).brightness; + iconThemeColor = themeBrightness == ThemeBrightness.dark ? IconThemeColor.white : IconThemeColor.black; + } + switch(iconThemeColor) { + case IconThemeColor.white: + return "white"; + case IconThemeColor.black: + return "black"; + } + } + + Widget build(BuildContext context) { + String category = ''; + String subtype = ''; + List parts = type.split('/'); + if (parts.length == 2) { + category = parts[0]; + subtype = parts[1]; + } + // TODO(eseidel): This clearly isn't correct. Not sure what would be. + // Should we use the ios images on ios? + String density = 'drawable-xxhdpi'; + String colorSuffix = getColorSuffix(context); + return new AssetImage( + bundle: _iconBundle, + name: '${category}/${density}/ic_${subtype}_${colorSuffix}_${size}dp.png', + width: size.toDouble(), + height: size.toDouble(), + colorFilter: colorFilter + ); + } +} diff --git a/packages/flutter/lib/src/fn3/theme.dart b/packages/flutter/lib/src/fn3/theme.dart new file mode 100644 index 0000000000..52203c3a5f --- /dev/null +++ b/packages/flutter/lib/src/fn3/theme.dart @@ -0,0 +1,30 @@ +// 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/framework.dart'; + +export 'package:sky/material.dart' show ThemeData, ThemeBrightness; + +class Theme extends InheritedWidget { + Theme({ + Key key, + this.data, + Widget child + }) : super(key: key, child: child) { + assert(child != null); + assert(data != null); + } + + final ThemeData data; + + static final ThemeData _kFallbackTheme = new ThemeData.fallback(); + + static ThemeData of(BuildContext context) { + Theme theme = context.inheritedWidgetOfType(Theme); + return theme == null ? _kFallbackTheme : theme.data; + } + + bool updateShouldNotify(Theme old) => data != old.data; +} diff --git a/packages/flutter/lib/src/fn3/title.dart b/packages/flutter/lib/src/fn3/title.dart new file mode 100644 index 0000000000..ee5dcfcfa0 --- /dev/null +++ b/packages/flutter/lib/src/fn3/title.dart @@ -0,0 +1,19 @@ +// 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/services.dart'; +import 'package:sky/src/fn3/theme.dart'; +import 'package:sky/src/fn3/framework.dart'; + +class Title extends StatelessComponent { + Title({ this.title, this.child }); + + final Widget child; + final String title; + + Widget build(BuildContext context) { + updateTaskDescription(title, Theme.of(context).primaryColor); + return child; + } +} diff --git a/packages/flutter/lib/src/fn3/tool_bar.dart b/packages/flutter/lib/src/fn3/tool_bar.dart new file mode 100644 index 0000000000..e0781a4bd0 --- /dev/null +++ b/packages/flutter/lib/src/fn3/tool_bar.dart @@ -0,0 +1,89 @@ +// 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/painting.dart'; +import 'package:sky/src/fn3/basic.dart'; +import 'package:sky/src/fn3/framework.dart'; +import 'package:sky/src/fn3/icon.dart'; +import 'package:sky/src/fn3/theme.dart'; +import 'package:sky/src/rendering/flex.dart'; + +class ToolBar extends StatelessComponent { + + ToolBar({ + Key key, + this.left, + this.center, + this.right, + this.backgroundColor + }) : super(key: key); + + final Widget left; + final Widget center; + final List right; + final Color backgroundColor; + + Widget build(BuildContext context) { + Color toolbarColor = backgroundColor; + IconThemeData iconThemeData; + TextStyle centerStyle = Typography.white.title; + TextStyle sideStyle = Typography.white.body1; + if (toolbarColor == null) { + ThemeData themeData = Theme.of(context); + toolbarColor = themeData.primaryColor; + if (themeData.primaryColorBrightness == ThemeBrightness.light) { + centerStyle = Typography.black.title; + sideStyle = Typography.black.body2; + iconThemeData = const IconThemeData(color: IconThemeColor.black); + } else { + iconThemeData = const IconThemeData(color: IconThemeColor.white); + } + } + + List children = new List(); + + // left children + if (left != null) + children.add(left); + + // center children (left-aligned, but takes all remaining space) + children.add( + new Flexible( + child: new Padding( + child: center != null ? new DefaultTextStyle(child: center, style: centerStyle) : null, + padding: new EdgeDims.only(left: 24.0) + ) + ) + ); + + // right children + if (right != null) + children.addAll(right); + + Widget content = new Container( + child: new DefaultTextStyle( + style: sideStyle, + child: new Column([ + new Container( + child: new Row(children), + height: kToolBarHeight + ), + ], + justifyContent: FlexJustifyContent.end + ) + ), + padding: new EdgeDims.symmetric(horizontal: 8.0), + decoration: new BoxDecoration( + backgroundColor: toolbarColor, + boxShadow: shadows[2] + ) + ); + + if (iconThemeData != null) + content = new IconTheme(data: iconThemeData, child: content); + return content; + } + +}