blob: b595c015444ff2f31a0afe9888e8c2b876c83a07 [file] [log] [blame]
// 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/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
class CardModel {
CardModel(this.value, this.height, this.color);
int value;
double height;
Color color;
String get label => 'Card $value';
Key get key => new ObjectKey(this);
GlobalKey get targetKey => new GlobalObjectKey(this);
}
enum MarkerType { topLeft, bottomRight, touch }
class _MarkerPainter extends CustomPainter {
const _MarkerPainter({
this.size,
this.type,
});
final double size;
final MarkerType type;
@override
void paint(Canvas canvas, _) {
final Paint paint = new Paint()..color = const Color(0x8000FF00);
final double r = size / 2.0;
canvas.drawCircle(new Offset(r, r), r, paint);
paint
..color = const Color(0xFFFFFFFF)
..style = PaintingStyle.stroke
..strokeWidth = 1.0;
if (type == MarkerType.topLeft) {
canvas.drawLine(new Offset(r, r), new Offset(r + r - 1.0, r), paint);
canvas.drawLine(new Offset(r, r), new Offset(r, r + r - 1.0), paint);
}
if (type == MarkerType.bottomRight) {
canvas.drawLine(new Offset(r, r), new Offset(1.0, r), paint);
canvas.drawLine(new Offset(r, r), new Offset(r, 1.0), paint);
}
}
@override
bool shouldRepaint(_MarkerPainter oldPainter) {
return oldPainter.size != size
|| oldPainter.type != type;
}
}
class Marker extends StatelessWidget {
const Marker({
Key key,
this.type: MarkerType.touch,
this.position,
this.size: 40.0,
}) : super(key: key);
final Offset position;
final double size;
final MarkerType type;
@override
Widget build(BuildContext context) {
return new Positioned(
left: position.dx - size / 2.0,
top: position.dy - size / 2.0,
width: size,
height: size,
child: new IgnorePointer(
child: new CustomPaint(
painter: new _MarkerPainter(
size: size,
type: type,
),
),
),
);
}
}
class OverlayGeometryApp extends StatefulWidget {
@override
OverlayGeometryAppState createState() => new OverlayGeometryAppState();
}
typedef void CardTapCallback(GlobalKey targetKey, Offset globalPosition);
class CardBuilder extends SliverChildDelegate {
CardBuilder({ this.cardModels, this.onTapUp });
final List<CardModel> cardModels;
final CardTapCallback onTapUp;
static const TextStyle cardLabelStyle =
const TextStyle(color: Colors.white, fontSize: 18.0, fontWeight: FontWeight.bold);
@override
Widget build(BuildContext context, int index) {
if (index >= cardModels.length)
return null;
final CardModel cardModel = cardModels[index];
return new GestureDetector(
key: cardModel.key,
onTapUp: (TapUpDetails details) { onTapUp(cardModel.targetKey, details.globalPosition); },
child: new Card(
key: cardModel.targetKey,
color: cardModel.color,
child: new Container(
height: cardModel.height,
padding: const EdgeInsets.all(8.0),
child: new Center(child: new Text(cardModel.label, style: cardLabelStyle)),
),
),
);
}
@override
int get estimatedChildCount => cardModels.length;
@override
bool shouldRebuild(CardBuilder oldDelegate) {
return oldDelegate.cardModels != cardModels;
}
}
class OverlayGeometryAppState extends State<OverlayGeometryApp> {
List<CardModel> cardModels;
Map<MarkerType, Offset> markers = <MarkerType, Offset>{};
double markersScrollOffset = 0.0;
@override
void initState() {
super.initState();
final List<double> cardHeights = <double>[
48.0, 63.0, 82.0, 146.0, 60.0, 55.0, 84.0, 96.0, 50.0,
48.0, 63.0, 82.0, 146.0, 60.0, 55.0, 84.0, 96.0, 50.0,
48.0, 63.0, 82.0, 146.0, 60.0, 55.0, 84.0, 96.0, 50.0,
];
cardModels = new List<CardModel>.generate(cardHeights.length, (int i) {
final Color color = Color.lerp(Colors.red.shade300, Colors.blue.shade900, i / cardHeights.length);
return new CardModel(i, cardHeights[i], color);
});
}
bool handleScrollNotification(ScrollNotification notification) {
if (notification is ScrollUpdateNotification && notification.depth == 0) {
setState(() {
final double dy = markersScrollOffset - notification.metrics.extentBefore;
markersScrollOffset = notification.metrics.extentBefore;
for (MarkerType type in markers.keys) {
final Offset oldPosition = markers[type];
markers[type] = oldPosition.translate(0.0, dy);
}
});
}
return false;
}
void handleTapUp(GlobalKey target, Offset globalPosition) {
setState(() {
markers[MarkerType.touch] = globalPosition;
final RenderBox box = target.currentContext.findRenderObject();
markers[MarkerType.topLeft] = box.localToGlobal(const Offset(0.0, 0.0));
final Size size = box.size;
markers[MarkerType.bottomRight] = box.localToGlobal(new Offset(size.width, size.height));
final ScrollableState scrollable = Scrollable.of(target.currentContext);
markersScrollOffset = scrollable.position.pixels;
});
}
@override
Widget build(BuildContext context) {
final List<Widget> layers = <Widget>[
new Scaffold(
appBar: new AppBar(title: const Text('Tap a Card')),
body: new Container(
padding: const EdgeInsets.symmetric(vertical: 12.0, horizontal: 8.0),
child: new NotificationListener<ScrollNotification>(
onNotification: handleScrollNotification,
child: new ListView.custom(
childrenDelegate: new CardBuilder(
cardModels: cardModels,
onTapUp: handleTapUp,
),
),
),
),
),
];
for (MarkerType type in markers.keys)
layers.add(new Marker(type: type, position: markers[type]));
return new Stack(children: layers);
}
}
void main() {
runApp(new MaterialApp(
theme: new ThemeData(
brightness: Brightness.light,
primarySwatch: Colors.blue,
accentColor: Colors.redAccent,
),
title: 'Cards',
home: new OverlayGeometryApp(),
));
}