Port some drawer and button widgets to fn3
This commit is contained in:
parent
1836ca6172
commit
c734234631
25
packages/flutter/lib/src/fn3/drawer_divider.dart
Normal file
25
packages/flutter/lib/src/fn3/drawer_divider.dart
Normal file
@ -0,0 +1,25 @@
|
||||
// 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)
|
||||
);
|
||||
}
|
||||
}
|
44
packages/flutter/lib/src/fn3/drawer_header.dart
Normal file
44
packages/flutter/lib/src/fn3/drawer_header.dart
Normal file
@ -0,0 +1,44 @@
|
||||
// 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
|
||||
)
|
||||
)]
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
92
packages/flutter/lib/src/fn3/drawer_item.dart
Normal file
92
packages/flutter/lib/src/fn3/drawer_item.dart
Normal file
@ -0,0 +1,92 @@
|
||||
// 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)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
69
packages/flutter/lib/src/fn3/floating_action_button.dart
Normal file
69
packages/flutter/lib/src/fn3/floating_action_button.dart
Normal file
@ -0,0 +1,69 @@
|
||||
// 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
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
35
packages/flutter/lib/src/fn3/icon_button.dart
Normal file
35
packages/flutter/lib/src/fn3/icon_button.dart
Normal file
@ -0,0 +1,35 @@
|
||||
// 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))
|
||||
);
|
||||
}
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user