2015-11-03 20:08:01 +00:00
|
|
|
// 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/material.dart';
|
|
|
|
|
2015-11-20 08:22:49 +00:00
|
|
|
class _GesturePainter extends CustomPainter {
|
|
|
|
const _GesturePainter({
|
|
|
|
this.zoom,
|
|
|
|
this.offset,
|
|
|
|
this.swatch,
|
|
|
|
this.forward,
|
|
|
|
this.scaleEnabled,
|
|
|
|
this.tapEnabled,
|
|
|
|
this.doubleTapEnabled,
|
2019-03-01 07:17:55 +00:00
|
|
|
this.longPressEnabled,
|
2015-11-20 08:22:49 +00:00
|
|
|
});
|
|
|
|
|
2015-11-03 20:08:01 +00:00
|
|
|
final double zoom;
|
2015-11-20 08:22:49 +00:00
|
|
|
final Offset offset;
|
2017-03-17 22:24:54 +00:00
|
|
|
final MaterialColor swatch;
|
2015-11-03 20:08:01 +00:00
|
|
|
final bool forward;
|
2015-11-20 08:22:49 +00:00
|
|
|
final bool scaleEnabled;
|
|
|
|
final bool tapEnabled;
|
|
|
|
final bool doubleTapEnabled;
|
|
|
|
final bool longPressEnabled;
|
|
|
|
|
2016-03-14 20:31:43 +00:00
|
|
|
@override
|
2015-12-05 04:26:08 +00:00
|
|
|
void paint(Canvas canvas, Size size) {
|
2018-02-06 08:00:11 +00:00
|
|
|
final Offset center = size.center(Offset.zero) * zoom + offset;
|
2017-03-04 02:04:27 +00:00
|
|
|
final double radius = size.width / 2.0 * zoom;
|
2018-09-12 06:29:29 +00:00
|
|
|
final Gradient gradient = RadialGradient(
|
2017-03-21 22:14:55 +00:00
|
|
|
colors: forward ? <Color>[swatch.shade50, swatch.shade900]
|
|
|
|
: <Color>[swatch.shade900, swatch.shade50]
|
2015-11-20 08:22:49 +00:00
|
|
|
);
|
2018-09-12 06:29:29 +00:00
|
|
|
final Paint paint = Paint()
|
|
|
|
..shader = gradient.createShader(Rect.fromCircle(
|
2017-04-12 22:06:12 +00:00
|
|
|
center: center,
|
|
|
|
radius: radius,
|
2016-03-01 01:08:39 +00:00
|
|
|
));
|
2015-11-20 08:22:49 +00:00
|
|
|
canvas.drawCircle(center, radius, paint);
|
2015-11-03 20:08:01 +00:00
|
|
|
}
|
2015-11-20 08:22:49 +00:00
|
|
|
|
2016-03-14 20:31:43 +00:00
|
|
|
@override
|
2015-11-20 08:22:49 +00:00
|
|
|
bool shouldRepaint(_GesturePainter oldPainter) {
|
|
|
|
return oldPainter.zoom != zoom
|
|
|
|
|| oldPainter.offset != offset
|
|
|
|
|| oldPainter.swatch != swatch
|
|
|
|
|| oldPainter.forward != forward
|
|
|
|
|| oldPainter.scaleEnabled != scaleEnabled
|
|
|
|
|| oldPainter.tapEnabled != tapEnabled
|
|
|
|
|| oldPainter.doubleTapEnabled != doubleTapEnabled
|
|
|
|
|| oldPainter.longPressEnabled != longPressEnabled;
|
2015-11-03 20:08:01 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2016-03-12 20:13:16 +00:00
|
|
|
class GestureDemo extends StatefulWidget {
|
2016-03-14 20:31:43 +00:00
|
|
|
@override
|
2018-09-12 06:29:29 +00:00
|
|
|
GestureDemoState createState() => GestureDemoState();
|
2016-02-13 08:52:56 +00:00
|
|
|
}
|
|
|
|
|
2017-07-13 07:16:03 +00:00
|
|
|
class GestureDemoState extends State<GestureDemo> {
|
2015-11-03 20:08:01 +00:00
|
|
|
|
2017-04-12 22:06:12 +00:00
|
|
|
Offset _startingFocalPoint;
|
2015-11-03 20:08:01 +00:00
|
|
|
|
|
|
|
Offset _previousOffset;
|
|
|
|
Offset _offset = Offset.zero;
|
|
|
|
|
|
|
|
double _previousZoom;
|
|
|
|
double _zoom = 1.0;
|
|
|
|
|
2018-08-02 10:02:32 +00:00
|
|
|
static const List<MaterialColor> kSwatches = <MaterialColor>[
|
2017-07-13 07:16:03 +00:00
|
|
|
Colors.red,
|
|
|
|
Colors.pink,
|
|
|
|
Colors.purple,
|
|
|
|
Colors.deepPurple,
|
|
|
|
Colors.indigo,
|
|
|
|
Colors.blue,
|
|
|
|
Colors.lightBlue,
|
|
|
|
Colors.cyan,
|
|
|
|
Colors.green,
|
|
|
|
Colors.lightGreen,
|
|
|
|
Colors.lime,
|
|
|
|
Colors.yellow,
|
|
|
|
Colors.amber,
|
|
|
|
Colors.orange,
|
|
|
|
Colors.deepOrange,
|
|
|
|
Colors.brown,
|
|
|
|
Colors.grey,
|
|
|
|
Colors.blueGrey,
|
|
|
|
];
|
|
|
|
int _swatchIndex = 0;
|
|
|
|
MaterialColor _swatch = kSwatches.first;
|
|
|
|
MaterialColor get swatch => _swatch;
|
2015-11-03 20:08:01 +00:00
|
|
|
|
|
|
|
bool _forward = true;
|
|
|
|
bool _scaleEnabled = true;
|
|
|
|
bool _tapEnabled = true;
|
|
|
|
bool _doubleTapEnabled = true;
|
|
|
|
bool _longPressEnabled = true;
|
|
|
|
|
2016-10-04 19:44:36 +00:00
|
|
|
void _handleScaleStart(ScaleStartDetails details) {
|
2015-11-03 20:08:01 +00:00
|
|
|
setState(() {
|
2016-10-04 19:44:36 +00:00
|
|
|
_startingFocalPoint = details.focalPoint;
|
2015-11-03 20:08:01 +00:00
|
|
|
_previousOffset = _offset;
|
|
|
|
_previousZoom = _zoom;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2016-10-04 19:44:36 +00:00
|
|
|
void _handleScaleUpdate(ScaleUpdateDetails details) {
|
2015-11-03 20:08:01 +00:00
|
|
|
setState(() {
|
2018-02-16 06:43:19 +00:00
|
|
|
_zoom = _previousZoom * details.scale;
|
2015-11-03 20:08:01 +00:00
|
|
|
|
|
|
|
// Ensure that item under the focal point stays in the same place despite zooming
|
2017-04-12 22:06:12 +00:00
|
|
|
final Offset normalizedOffset = (_startingFocalPoint - _previousOffset) / _previousZoom;
|
|
|
|
_offset = details.focalPoint - normalizedOffset * _zoom;
|
2015-11-03 20:08:01 +00:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
void _handleScaleReset() {
|
|
|
|
setState(() {
|
|
|
|
_zoom = 1.0;
|
|
|
|
_offset = Offset.zero;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
void _handleColorChange() {
|
|
|
|
setState(() {
|
2017-07-13 07:16:03 +00:00
|
|
|
_swatchIndex += 1;
|
|
|
|
if (_swatchIndex == kSwatches.length)
|
|
|
|
_swatchIndex = 0;
|
|
|
|
_swatch = kSwatches[_swatchIndex];
|
2015-11-03 20:08:01 +00:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
void _handleDirectionChange() {
|
|
|
|
setState(() {
|
|
|
|
_forward = !_forward;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2016-03-14 20:31:43 +00:00
|
|
|
@override
|
2015-11-03 20:08:01 +00:00
|
|
|
Widget build(BuildContext context) {
|
2018-09-12 06:29:29 +00:00
|
|
|
return Stack(
|
2017-07-13 07:16:03 +00:00
|
|
|
fit: StackFit.expand,
|
2016-02-13 08:52:56 +00:00
|
|
|
children: <Widget>[
|
2018-09-12 06:29:29 +00:00
|
|
|
GestureDetector(
|
2016-02-13 08:52:56 +00:00
|
|
|
onScaleStart: _scaleEnabled ? _handleScaleStart : null,
|
|
|
|
onScaleUpdate: _scaleEnabled ? _handleScaleUpdate : null,
|
|
|
|
onTap: _tapEnabled ? _handleColorChange : null,
|
|
|
|
onDoubleTap: _doubleTapEnabled ? _handleScaleReset : null,
|
|
|
|
onLongPress: _longPressEnabled ? _handleDirectionChange : null,
|
2018-09-12 06:29:29 +00:00
|
|
|
child: CustomPaint(
|
|
|
|
painter: _GesturePainter(
|
2016-02-13 08:52:56 +00:00
|
|
|
zoom: _zoom,
|
|
|
|
offset: _offset,
|
2017-07-13 07:16:03 +00:00
|
|
|
swatch: swatch,
|
2016-02-13 08:52:56 +00:00
|
|
|
forward: _forward,
|
|
|
|
scaleEnabled: _scaleEnabled,
|
|
|
|
tapEnabled: _tapEnabled,
|
|
|
|
doubleTapEnabled: _doubleTapEnabled,
|
2019-03-01 07:17:55 +00:00
|
|
|
longPressEnabled: _longPressEnabled,
|
|
|
|
),
|
|
|
|
),
|
2016-02-13 08:52:56 +00:00
|
|
|
),
|
2018-09-12 06:29:29 +00:00
|
|
|
Positioned(
|
2016-02-13 08:52:56 +00:00
|
|
|
bottom: 0.0,
|
|
|
|
left: 0.0,
|
2018-09-12 06:29:29 +00:00
|
|
|
child: Card(
|
|
|
|
child: Container(
|
2017-02-21 22:54:29 +00:00
|
|
|
padding: const EdgeInsets.all(4.0),
|
2018-09-12 06:29:29 +00:00
|
|
|
child: Column(
|
2016-02-13 08:52:56 +00:00
|
|
|
children: <Widget>[
|
2018-09-12 06:29:29 +00:00
|
|
|
Row(
|
2016-01-11 21:08:47 +00:00
|
|
|
children: <Widget>[
|
2018-09-12 06:29:29 +00:00
|
|
|
Checkbox(
|
2016-02-13 08:52:56 +00:00
|
|
|
value: _scaleEnabled,
|
2019-03-01 07:17:55 +00:00
|
|
|
onChanged: (bool value) { setState(() { _scaleEnabled = value; }); },
|
2015-11-03 20:08:01 +00:00
|
|
|
),
|
2017-04-07 19:24:32 +00:00
|
|
|
const Text('Scale'),
|
2019-03-01 07:17:55 +00:00
|
|
|
],
|
2016-02-13 08:52:56 +00:00
|
|
|
),
|
2018-09-12 06:29:29 +00:00
|
|
|
Row(
|
2016-02-13 08:52:56 +00:00
|
|
|
children: <Widget>[
|
2018-09-12 06:29:29 +00:00
|
|
|
Checkbox(
|
2016-02-13 08:52:56 +00:00
|
|
|
value: _tapEnabled,
|
2019-03-01 07:17:55 +00:00
|
|
|
onChanged: (bool value) { setState(() { _tapEnabled = value; }); },
|
2015-11-03 20:08:01 +00:00
|
|
|
),
|
2017-04-07 19:24:32 +00:00
|
|
|
const Text('Tap'),
|
2019-03-01 07:17:55 +00:00
|
|
|
],
|
2016-02-13 08:52:56 +00:00
|
|
|
),
|
2018-09-12 06:29:29 +00:00
|
|
|
Row(
|
2016-02-13 08:52:56 +00:00
|
|
|
children: <Widget>[
|
2018-09-12 06:29:29 +00:00
|
|
|
Checkbox(
|
2016-02-13 08:52:56 +00:00
|
|
|
value: _doubleTapEnabled,
|
2019-03-01 07:17:55 +00:00
|
|
|
onChanged: (bool value) { setState(() { _doubleTapEnabled = value; }); },
|
2015-11-03 20:08:01 +00:00
|
|
|
),
|
2017-04-07 19:24:32 +00:00
|
|
|
const Text('Double Tap'),
|
2019-03-01 07:17:55 +00:00
|
|
|
],
|
2016-02-13 08:52:56 +00:00
|
|
|
),
|
2018-09-12 06:29:29 +00:00
|
|
|
Row(
|
2016-02-13 08:52:56 +00:00
|
|
|
children: <Widget>[
|
2018-09-12 06:29:29 +00:00
|
|
|
Checkbox(
|
2016-02-13 08:52:56 +00:00
|
|
|
value: _longPressEnabled,
|
2019-03-01 07:17:55 +00:00
|
|
|
onChanged: (bool value) { setState(() { _longPressEnabled = value; }); },
|
2015-11-03 20:08:01 +00:00
|
|
|
),
|
2017-04-07 19:24:32 +00:00
|
|
|
const Text('Long Press'),
|
2019-03-01 07:17:55 +00:00
|
|
|
],
|
2016-02-13 08:52:56 +00:00
|
|
|
),
|
|
|
|
],
|
2019-03-01 07:17:55 +00:00
|
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
2016-02-13 08:52:56 +00:00
|
|
|
),
|
2019-03-01 07:17:55 +00:00
|
|
|
],
|
2015-11-03 20:08:01 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2016-02-13 08:52:56 +00:00
|
|
|
void main() {
|
2018-09-12 06:29:29 +00:00
|
|
|
runApp(MaterialApp(
|
|
|
|
theme: ThemeData.dark(),
|
|
|
|
home: Scaffold(
|
|
|
|
appBar: AppBar(title: const Text('Gestures Demo')),
|
2019-03-01 07:17:55 +00:00
|
|
|
body: GestureDemo(),
|
|
|
|
),
|
2016-02-13 08:52:56 +00:00
|
|
|
));
|
|
|
|
}
|