Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Scratch Card - Unfinished Flutter implementation of https://allu.io/react-scratchcard/
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'dart:math' as math;
void main() => runApp(DemoApp());
class DemoApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Scratch Card',
home: Scaffold(
appBar: AppBar(
title: Text('Scratch Card'),
),
body: Material(
child: Center(
child: SizedBox(
width: 280.0,
height: 200.0,
child: Stack(
children: <Widget>[
ScratchCard(
cover: Stack(
fit: StackFit.expand,
children: <Widget>[
Image.asset(
'assets/scratch_card.jpg',
repeat: ImageRepeat.repeat,
),
Center(
child: Text(
'Hello World!',
style: const TextStyle(
fontSize: 34.0,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
],
),
reveal: DecoratedBox(
decoration: const BoxDecoration(color: Colors.black),
child: Center(
child: Text(
'Congratulations! You WON!',
style: const TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
),
strokeWidth: 15.0,
finishPercent: 50,
onComplete: () => print('The card is now clear!'),
),
],
),
),
),
),
),
);
}
}
class ScratchCard extends StatefulWidget {
const ScratchCard({
Key key,
this.cover,
this.reveal,
this.strokeWidth = 25.0,
this.finishPercent,
this.onComplete,
}) : super(key: key);
final Widget cover;
final Widget reveal;
final double strokeWidth;
final int finishPercent;
final VoidCallback onComplete;
@override
_ScratchCardState createState() => _ScratchCardState();
}
class _ScratchCardState extends State<ScratchCard> {
_ScratchData _data = _ScratchData();
Offset _lastPoint = null;
Offset _globalToLocal(Offset global) {
return (context.findRenderObject() as RenderBox).globalToLocal(global);
}
double _distanceBetween(Offset point1, Offset point2) {
return math.sqrt(math.pow(point2.dx - point1.dx, 2) + math.pow(point2.dy - point1.dy, 2));
}
double _angleBetween(Offset point1, Offset point2) {
return math.atan2(point2.dx - point1.dx, point2.dy - point1.dy);
}
void _onPanDown(DragDownDetails details) {
_lastPoint = _globalToLocal(details.globalPosition);
}
void _onPanUpdate(DragUpdateDetails details) {
final currentPoint = _globalToLocal(details.globalPosition);
final distance = _distanceBetween(_lastPoint, currentPoint);
final angle = _angleBetween(_lastPoint, currentPoint);
for (double i = 0.0; i < distance; i++) {
_data.addPoint(Offset(
_lastPoint.dx + (math.sin(angle) * i),
_lastPoint.dy + (math.cos(angle) * i),
));
}
_lastPoint = currentPoint;
}
void _onPanEnd(TapUpDetails details) {
final areaRect = context.size.width * context.size.height;
double touchArea = math.pi * widget.strokeWidth * widget.strokeWidth;
double areaRevealed = _data._points.fold(0.0, (double prev, Offset point) => touchArea);
print('areaRect $areaRect $areaRevealed');
}
@override
Widget build(BuildContext context) {
return GestureDetector(
behavior: HitTestBehavior.opaque,
onPanDown: _onPanDown,
onPanUpdate: _onPanUpdate,
onTapUp: _onPanEnd,
child: Stack(
fit: StackFit.expand,
children: <Widget>[
widget.reveal,
_ScratchCardLayout(
strokeWidth: widget.strokeWidth,
data: _data,
child: widget.cover,
),
],
),
);
}
}
class _ScratchCardLayout extends SingleChildRenderObjectWidget {
_ScratchCardLayout({
Key key,
this.strokeWidth = 25.0,
@required this.data,
@required this.child,
}) : super(
key: key,
child: child,
);
final Widget child;
final double strokeWidth;
final _ScratchData data;
@override
RenderObject createRenderObject(BuildContext context) {
return _ScratchCardRender(
strokeWidth: strokeWidth,
data: data,
);
}
@override
void updateRenderObject(BuildContext context, _ScratchCardRender renderObject) {
renderObject
..strokeWidth = strokeWidth
..data = data;
}
}
class _ScratchCardRender extends RenderProxyBox {
_ScratchCardRender({
RenderBox child,
double strokeWidth,
_ScratchData data,
}) : assert(data != null),
_strokeWidth = strokeWidth,
_data = data,
super(child);
double _strokeWidth;
_ScratchData _data;
set strokeWidth(double strokeWidth) {
assert(strokeWidth != null);
if (_strokeWidth == strokeWidth) {
return;
}
_strokeWidth = strokeWidth;
markNeedsPaint();
}
set data(_ScratchData data) {
assert(data != null);
if (_data == data) {
return;
}
if (attached) {
_data.removeListener(markNeedsPaint);
data.addListener(markNeedsPaint);
}
_data = data;
markNeedsPaint();
}
@override
void attach(PipelineOwner owner) {
super.attach(owner);
_data.addListener(markNeedsPaint);
}
@override
void detach() {
_data.removeListener(markNeedsPaint);
super.detach();
}
@override
void paint(PaintingContext context, Offset offset) {
if (child != null) {
context.canvas.saveLayer(offset & size, Paint());
context.paintChild(child, offset);
Paint clear = Paint()..blendMode = BlendMode.clear;
_data._points.forEach((point) => context.canvas.drawCircle(offset + point, _strokeWidth, clear));
context.canvas.restore();
}
}
@override
bool get alwaysNeedsCompositing => child != null;
}
class _ScratchData extends ChangeNotifier {
List<Offset> _points = [];
void addPoint(Offset offset) {
_points.add(offset);
notifyListeners();
}
}
@harshapulikollu

This comment has been minimized.

Copy link

@harshapulikollu harshapulikollu commented Jan 17, 2019

areaRevealed is every time resulting same value of 706.8583470577034 when strokeWidth is 15.0, and the parameters finishPercent and onComplete callback are never used. As areaRevealed resulting same value unable to use onComplete.

@bang88

This comment has been minimized.

Copy link

@bang88 bang88 commented Mar 8, 2019

How to know its complete. Thanks

@vintage

This comment has been minimized.

Copy link

@vintage vintage commented Oct 7, 2019

See https://pub.dev/packages/scratcher for ready to use library.

@slightfoot

This comment has been minimized.

Copy link
Owner Author

@slightfoot slightfoot commented Oct 17, 2019

Just as a clarification, the scratcher package above is not based off of my code.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment