Commit dc84e882 authored by Adam Barth's avatar Adam Barth

Use GestureDetector in the framework and examples

We're now using it at the widget layer for everything except scrolling and
flinging.
parent a46b83da
......@@ -162,9 +162,9 @@ class DemoList extends Component {
}
Widget buildDemo(SkyDemo demo) {
return new Listener(
return new GestureDetector(
key: demo.key,
onGestureTap: (_) => launch(demo.href, demo.bundle),
onTap: () => launch(demo.href, demo.bundle),
child: new Container(
height: kCardHeight,
child: new Card(
......
......@@ -39,11 +39,8 @@ class DialogMenuItem extends ButtonBase {
}
Widget buildContent() {
return new Listener(
onGestureTap: (_) {
if (onPressed != null)
onPressed();
},
return new GestureDetector(
onTap: onPressed,
child: new Container(
height: 48.0,
child: new InkWell(
......
......@@ -56,10 +56,9 @@ class MealFragment extends StatefulComponent {
String _description = "";
EventDisposition _handleSave() {
void _handleSave() {
onCreated(new Meal(when: new DateTime.now(), description: _description));
navigator.pop();
return EventDisposition.processed;
}
Widget buildToolBar() {
......@@ -69,8 +68,8 @@ class MealFragment extends StatefulComponent {
onPressed: navigator.pop),
center: new Text('New Meal'),
right: [new InkWell(
child: new Listener(
onGestureTap: (_) => _handleSave(),
child: new GestureDetector(
onTap: _handleSave,
child: new Text('SAVE')
)
)]
......
......@@ -119,7 +119,7 @@ class MeasurementFragment extends StatefulComponent {
DateTime _when = new DateTime.now();
String _errorMessage = null;
EventDisposition _handleSave() {
void _handleSave() {
double parsedWeight;
try {
parsedWeight = double.parse(_weight);
......@@ -128,11 +128,9 @@ class MeasurementFragment extends StatefulComponent {
setState(() {
_errorMessage = "Save failed";
});
return EventDisposition.processed;
}
onCreated(new Measurement(when: _when, weight: parsedWeight));
navigator.pop();
return EventDisposition.processed;
}
Widget buildToolBar() {
......@@ -142,8 +140,8 @@ class MeasurementFragment extends StatefulComponent {
onPressed: navigator.pop),
center: new Text('New Measurement'),
right: [new InkWell(
child: new Listener(
onGestureTap: (_) => _handleSave(),
child: new GestureDetector(
onTap: _handleSave,
child: new Text('SAVE')
)
)]
......@@ -158,7 +156,7 @@ class MeasurementFragment extends StatefulComponent {
static final GlobalKey weightKey = new GlobalKey();
EventDisposition _handleDatePressed(_) {
void _handleDatePressed() {
showDialog(navigator, (navigator) {
return new MeasurementDateDialog(navigator: navigator, previousDate: _when);
}).then((DateTime value) {
......@@ -168,7 +166,6 @@ class MeasurementFragment extends StatefulComponent {
_when = value;
});
});
return EventDisposition.processed;
}
Widget buildBody() {
......@@ -179,8 +176,8 @@ class MeasurementFragment extends StatefulComponent {
child: new Container(
padding: const EdgeDims.all(20.0),
child: new Column([
new Listener(
onGestureTap: _handleDatePressed,
new GestureDetector(
onTap: _handleDatePressed,
child: new Container(
height: 50.0,
child: new Column([
......
......@@ -107,19 +107,19 @@ class MineDiggerApp extends App {
state = cells[iy][ix] ? CellState.shown : state;
}
if (state == CellState.covered) {
row.add(new Listener(
onPointerDown: _pointerDownHandlerFor(ix, iy),
onGestureTap: (_) {
probe(ix, iy);
},
onGestureLongPress: (_) {
row.add(new GestureDetector(
onTap: () => probe(ix, iy),
onLongPress: () {
activity.userFeedback.performHapticFeedback(activity.HapticFeedbackType_LONG_PRESS);
flag(ix, iy);
},
child: new CoveredMineNode(
flagged: false,
posX: ix,
posY: iy
child: new Listener(
onPointerDown: _pointerDownHandlerFor(ix, iy),
child: new CoveredMineNode(
flagged: false,
posX: ix,
posY: iy
)
)
));
// Mutating |hasCoveredCell| here is hacky, but convenient, same
......
......@@ -41,13 +41,11 @@ class EnsureVisibleApp extends App {
super.initState();
}
EventDisposition handleTap(Widget card, CardModel cardModel) {
void handleTap(Widget card, CardModel cardModel) {
ensureWidgetIsVisible(card, duration: const Duration(milliseconds: 200))
.then((_) {
setState(() { selectedCardModel = cardModel; });
});
return EventDisposition.processed;
}
Widget builder(int index) {
......@@ -63,9 +61,9 @@ class EnsureVisibleApp extends App {
child: new Center(child: new Text(cardModel.label, style: style))
)
);
return new Listener(
return new GestureDetector(
key: cardModel.key,
onGestureTap: (_) { return handleTap(card, cardModel); },
onTap: () => handleTap(card, cardModel),
child: card
);
}
......
......@@ -106,17 +106,15 @@ class MixedViewportApp extends App {
Widget builder(int index) {
if (index >= lengths.length)
return null;
return new Listener(
return new GestureDetector(
key: new Key.stringify(lengths[index]),
onTap: () => removeBox(index),
child: new Container(
decoration: new BoxDecoration(
backgroundColor: new Color((0xFF000000 + 0xFFFFFF * lengths[index] / kMaxLength).round())
),
height: lengths[index] + 12.0
),
onGestureTap: (_) {
removeBox(index);
}
)
);
}
......@@ -124,7 +122,4 @@ class MixedViewportApp extends App {
void main() {
runApp(new MixedViewportApp());
// scheduler.addPersistentFrameCallback((_) {
// SkyBinding.instance.debugDumpRenderTree();
// });
}
......@@ -46,8 +46,8 @@ class ExampleApp extends App {
GlobalKey _overlay;
Widget _buildCard(CardData cardData) {
return new Listener(
onGestureTap: (_) {
return new GestureDetector(
onTap: () {
setState(() {
_overlay = cardData.key;
});
......
......@@ -2,8 +2,6 @@
// 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/animation/animation_performance.dart';
import 'package:sky/animation/animated_value.dart';
import 'package:sky/animation/curves.dart';
......@@ -28,7 +26,7 @@ class ProgressIndicatorApp extends App {
);
}
void handleTap(sky.GestureEvent event) {
void handleTap() {
if (valueAnimation.isAnimating)
valueAnimation.stop();
else
......@@ -73,8 +71,8 @@ class ProgressIndicatorApp extends App {
}
Widget build() {
Widget body = new Listener(
onGestureTap: (e) { handleTap(e); },
Widget body = new GestureDetector(
onTap: handleTap,
child: new Container(
padding: const EdgeDims.symmetric(vertical: 12.0, horizontal: 8.0),
decoration: new BoxDecoration(backgroundColor: Theme.of(this).cardColor),
......
......@@ -23,6 +23,7 @@ export 'widgets/flat_button.dart';
export 'widgets/floating_action_button.dart';
export 'widgets/focus.dart';
export 'widgets/framework.dart';
export 'widgets/gesture_detector.dart';
export 'widgets/icon.dart';
export 'widgets/icon_button.dart';
export 'widgets/ink_well.dart';
......
......@@ -140,21 +140,21 @@ class DatePickerHeader extends Component {
return new Container(
child: new BlockBody([
new Center(
child: new Listener(
child: new GestureDetector(
child: new Text(new DateFormat("MMM").format(selectedDate).toUpperCase(), style: monthStyle),
onGestureTap: (_) => _handleChangeMode(DatePickerMode.day)
onTap: () => _handleChangeMode(DatePickerMode.day)
)
),
new Center(
child: new Listener(
child: new GestureDetector(
child: new Text(new DateFormat("d").format(selectedDate), style: dayStyle),
onGestureTap: (_) => _handleChangeMode(DatePickerMode.day)
onTap: () => _handleChangeMode(DatePickerMode.day)
)
),
new Center(
child: new Listener(
child: new GestureDetector(
child: new Text(new DateFormat("yyyy").format(selectedDate), style: yearStyle),
onGestureTap: (_) => _handleChangeMode(DatePickerMode.year)
onTap: () => _handleChangeMode(DatePickerMode.year)
)
)
]),
......@@ -244,8 +244,8 @@ class DayPicker extends Component {
currentDate.day == day)
itemStyle = itemStyle.copyWith(color: theme.primaryColor);
item = new Listener(
onGestureTap: (_) {
item = new GestureDetector(
onTap: () {
DateTime result = new DateTime(year, month, day);
onChanged(result);
},
......@@ -386,9 +386,9 @@ class YearPicker extends ScrollableWidgetList {
for(int i = start; i < start + count; i++) {
int year = firstDate.year + i;
String label = year.toString();
Widget item = new Listener(
Widget item = new GestureDetector(
key: new Key(label),
onGestureTap: (_) {
onTap: () {
DateTime result = new DateTime(year, selectedDate.month, selectedDate.day);
onChanged(result);
},
......
......@@ -10,6 +10,7 @@ import 'package:sky/theme/colors.dart' as colors;
import 'package:sky/widgets/basic.dart';
import 'package:sky/widgets/default_text_style.dart';
import 'package:sky/widgets/focus.dart';
import 'package:sky/widgets/gesture_detector.dart';
import 'package:sky/widgets/material.dart';
import 'package:sky/widgets/navigator.dart';
import 'package:sky/widgets/scrollable.dart';
......@@ -101,13 +102,13 @@ class Dialog extends Component {
));
return new Stack([
new Listener(
new GestureDetector(
child: new Container(
decoration: const BoxDecoration(
backgroundColor: const Color(0x7F000000)
)
),
onGestureTap: (_) => onDismiss()
onTap: onDismiss
),
new Center(
child: new Container(
......
......@@ -8,10 +8,11 @@ import 'dart:sky' as sky;
import 'package:sky/animation/animated_value.dart';
import 'package:sky/animation/animation_performance.dart';
import 'package:sky/animation/forces.dart';
import 'package:sky/theme/shadows.dart';
import 'package:sky/theme/colors.dart' as colors;
import 'package:sky/theme/shadows.dart';
import 'package:sky/widgets/animated_container.dart';
import 'package:sky/widgets/basic.dart';
import 'package:sky/widgets/gesture_detector.dart';
import 'package:sky/widgets/navigator.dart';
import 'package:sky/widgets/scrollable.dart';
import 'package:sky/widgets/theme.dart';
......@@ -84,14 +85,16 @@ class Drawer extends StatefulComponent {
}
Widget build() {
var mask = new Listener(
var mask = new GestureDetector(
child: new ColorTransition(
performance: _performance,
direction: showing ? Direction.forward : Direction.reverse,
color: new AnimatedColorValue(colors.transparent, end: const Color(0x7F000000)),
child: new Container()
),
onGestureTap: handleMaskTap
onTap: () {
_performance.reverse();
}
);
Widget content = new SlideTransition(
......@@ -132,11 +135,6 @@ class Drawer extends StatefulComponent {
void _settle() { _isMostlyClosed ? _performance.reverse() : _performance.play(); }
EventDisposition handleMaskTap(_) {
_performance.reverse();
return EventDisposition.consumed;
}
// TODO(mpcomplete): Figure out how to generalize these handlers on a
// "PannableThingy" interface.
EventDisposition handlePointerDown(_) {
......
......@@ -9,10 +9,11 @@ import 'package:sky/theme/colors.dart' as colors;
import 'package:sky/widgets/basic.dart';
import 'package:sky/widgets/button_base.dart';
import 'package:sky/widgets/default_text_style.dart';
import 'package:sky/widgets/framework.dart';
import 'package:sky/widgets/gesture_detector.dart';
import 'package:sky/widgets/icon.dart';
import 'package:sky/widgets/ink_well.dart';
import 'package:sky/widgets/theme.dart';
import 'package:sky/widgets/framework.dart';
typedef EventDisposition OnPressedFunction();
......@@ -81,12 +82,8 @@ class DrawerItem extends ButtonBase {
)
);
return new Listener(
onGestureTap: (_) {
if (onPressed != null)
return onPressed();
return EventDisposition.ignored;
},
return new GestureDetector(
onTap: onPressed,
child: new Container(
height: 48.0,
decoration: new BoxDecoration(backgroundColor: _getBackgroundColor(themeData)),
......
......@@ -4,6 +4,7 @@
import 'package:sky/widgets/basic.dart';
import 'package:sky/widgets/button_base.dart';
import 'package:sky/widgets/gesture_detector.dart';
import 'package:sky/widgets/icon.dart';
import 'package:sky/widgets/ink_well.dart';
import 'package:sky/widgets/material.dart';
......@@ -47,11 +48,8 @@ class FloatingActionButton extends ButtonBase {
type: MaterialType.circle,
level: highlight ? 3 : 2,
child: new ClipOval(
child: new Listener(
onGestureTap: (_) {
if (onPressed != null)
onPressed();
},
child: new GestureDetector(
onTap: onPressed,
child: new Container(
width: _kSize,
height: _kSize,
......
......@@ -27,10 +27,7 @@ class IconButton extends Component {
);
}
return new GestureDetector(
onTap: () {
if (onPressed != null)
onPressed();
},
onTap: onPressed,
child: new Padding(
child: child,
padding: const EdgeDims.all(8.0))
......
......@@ -4,6 +4,7 @@
import 'package:sky/widgets/basic.dart';
import 'package:sky/widgets/button_base.dart';
import 'package:sky/widgets/gesture_detector.dart';
import 'package:sky/widgets/ink_well.dart';
import 'package:sky/widgets/material.dart';
......@@ -36,7 +37,8 @@ abstract class MaterialButton extends ButtonBase {
padding: new EdgeDims.symmetric(horizontal: 8.0),
child: new Center(child: child) // TODO(ianh): figure out a way to compell the child to have gray text when disabled...
);
return new Listener(
return new GestureDetector(
onTap: enabled ? onPressed : null,
child: new Container(
height: 36.0,
constraints: new BoxConstraints(minWidth: 88.0),
......@@ -47,8 +49,7 @@ abstract class MaterialButton extends ButtonBase {
level: level,
color: color
)
),
onGestureTap: (_) { if (onPressed != null && enabled) onPressed(); }
)
);
}
......
......@@ -4,6 +4,7 @@
import 'package:sky/widgets/basic.dart';
import 'package:sky/widgets/framework.dart';
import 'package:sky/widgets/gesture_detector.dart';
class ModalOverlay extends Component {
......@@ -13,11 +14,8 @@ class ModalOverlay extends Component {
final Function onDismiss;
Widget build() {
return new Listener(
onGestureTap: (_) {
if (onDismiss != null)
onDismiss();
},
return new GestureDetector(
onTap: onDismiss,
child: new Stack(children)
);
}
......
......@@ -5,6 +5,7 @@
import 'package:sky/painting/text_style.dart';
import 'package:sky/widgets/basic.dart';
import 'package:sky/widgets/default_text_style.dart';
import 'package:sky/widgets/gesture_detector.dart';
import 'package:sky/widgets/ink_well.dart';
import 'package:sky/widgets/theme.dart';
......@@ -24,11 +25,8 @@ class PopupMenuItem extends Component {
TextStyle get textStyle => Theme.of(this).text.subhead;
Widget build() {
return new Listener(
onGestureTap: (_) {
if (onPressed != null)
onPressed();
},
return new GestureDetector(
onTap: onPressed,
child: new InkWell(
child: new Container(
height: kMenuItemHeight,
......
......@@ -7,6 +7,7 @@ import 'dart:sky' as sky;
import 'package:sky/rendering/object.dart';
import 'package:sky/widgets/basic.dart';
import 'package:sky/widgets/button_base.dart';
import 'package:sky/widgets/gesture_detector.dart';
import 'package:sky/widgets/theme.dart';
const sky.Color _kLightOffColor = const sky.Color(0x8A000000);
......@@ -21,7 +22,9 @@ class Radio extends ButtonBase {
this.value,
this.groupValue,
this.onChanged
}) : super(key: key);
}) : super(key: key) {
assert(onChanged != null);
}
Object value;
Object groupValue;
......@@ -45,7 +48,8 @@ class Radio extends ButtonBase {
const double kDiameter = 16.0;
const double kOuterRadius = kDiameter / 2;
const double kInnerRadius = 5.0;
return new Listener(
return new GestureDetector(
onTap: () => onChanged(value),
child: new Container(
margin: const EdgeDims.symmetric(horizontal: 5.0),
width: kDiameter,
......@@ -67,14 +71,8 @@ class Radio extends ButtonBase {
}
}
)
),
onGestureTap: _handleTap
)
);
}
EventDisposition _handleTap(_) {
onChanged(value);
return EventDisposition.consumed;
}
}
......@@ -10,6 +10,7 @@ import 'package:sky/painting/text_style.dart';
import 'package:sky/theme/typography.dart' as typography;
import 'package:sky/widgets/basic.dart';
import 'package:sky/widgets/default_text_style.dart';
import 'package:sky/widgets/gesture_detector.dart';
import 'package:sky/widgets/material.dart';
import 'package:sky/widgets/theme.dart';
import 'package:sky/widgets/transitions.dart';
......@@ -29,8 +30,8 @@ class SnackBarAction extends Component {
final Function onPressed;
Widget build() {
return new Listener(
onGestureTap: (_) => onPressed(),
return new GestureDetector(
onTap: onPressed,
child: new Container(
margin: const EdgeDims.only(left: 24.0),
padding: const EdgeDims.only(top: 14.0, bottom: 14.0),
......@@ -39,6 +40,7 @@ class SnackBarAction extends Component {
);
}
}
class SnackBar extends Component {
SnackBar({
......@@ -58,11 +60,6 @@ class SnackBar extends Component {
bool showing;
SnackBarDismissedCallback onDismissed;
void _onDismissed() {
if (onDismissed != null)
onDismissed();
}
Widget build() {
List<Widget> children = [
new Flexible(
......@@ -84,7 +81,7 @@ class SnackBar extends Component {
position: new AnimatedValue<Point>(Point.origin,
end: const Point(0.0, -52.0),
curve: easeIn, reverseCurve: easeOut),
onDismissed: _onDismissed,
onDismissed: onDismissed,
anchor: anchor,
child: new Material(
level: 2,
......
......@@ -18,12 +18,13 @@ import 'package:sky/theme/colors.dart' as colors;
import 'package:sky/theme/typography.dart' as typography;
import 'package:sky/widgets/basic.dart';
import 'package:sky/widgets/default_text_style.dart';
import 'package:sky/widgets/framework.dart';
import 'package:sky/widgets/gesture_detector.dart';
import 'package:sky/widgets/icon.dart';
import 'package:sky/widgets/ink_well.dart';
import 'package:sky/widgets/scrollable.dart';
import 'package:sky/widgets/theme.dart';
import 'package:sky/widgets/transitions.dart';
import 'package:sky/widgets/framework.dart';
typedef void SelectedIndexChanged(int selectedIndex);
typedef void LayoutChanged(Size size, List<double> widths);
......@@ -478,14 +479,14 @@ class TabBar extends Scrollable {
}
Widget _toTab(TabLabel label, int tabIndex, Color color, Color selectedColor) {
return new Listener(
return new GestureDetector(
onTap: () => _handleTap(tabIndex),
child: new Tab(
label: label,
color: color,
selected: tabIndex == selectedIndex,
selectedColor: selectedColor
),
onGestureTap: (_) => _handleTap(tabIndex)
)
);
}
......
......@@ -84,7 +84,9 @@ class WidgetTester {
}
void tap(Widget widget) {
dispatchEvent(new TestGestureEvent(type: 'gesturetap'), getCenter(widget));
Point location = getCenter(widget);
dispatchEvent(new TestPointerEvent(type: 'pointerdown', x: location.x, y: location.y), location);
dispatchEvent(new TestPointerEvent(type: 'pointerup', x: location.x, y: location.y), location);
}
void scroll(Widget widget, Offset offset) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment