blob: 3f1cb370b5aceaeedab0c9fae7cf278e4a2f6ba5 [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 => ObjectKey(this);
GlobalKey get targetKey => 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 = Paint()..color = const Color(0x8000FF00);
final double r = size / 2.0;
canvas.drawCircle(Offset(r, r), r, paint);
paint
..color = const Color(0xFFFFFFFF)
..style = PaintingStyle.stroke
..strokeWidth = 1.0;
if (type == MarkerType.topLeft) {
canvas.drawLine(Offset(r, r), Offset(r + r - 1.0, r), paint);
canvas.drawLine(Offset(r, r), Offset(r, r + r - 1.0), paint);
}
if (type == MarkerType.bottomRight) {
canvas.drawLine(Offset(r, r), Offset(1.0, r), paint);
canvas.drawLine(Offset(r, r), 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 Positioned(
left: position.dx - size / 2.0,
top: position.dy - size / 2.0,
width: size,
height: size,
child: IgnorePointer(
child: CustomPaint(
painter: _MarkerPainter(
size: size,
type: type,
),
),
),
);
}
}
class OverlayGeometryApp extends StatefulWidget {
@override
OverlayGeometryAppState createState() => OverlayGeometryAppState();
}
typedef CardTapCallback = void Function(GlobalKey targetKey, Offset globalPosition);
class CardBuilder extends SliverChildDelegate {
CardBuilder({ this.cardModels, this.onTapUp });
final List<CardModel> cardModels;
final CardTapCallback onTapUp;
static const TextStyle cardLabelStyle =
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 GestureDetector(
key: cardModel.key,
onTapUp: (TapUpDetails details) { onTapUp(cardModel.targetKey, details.globalPosition); },
child: Card(
key: cardModel.targetKey,
color: cardModel.color,
child: Container(
height: cardModel.height,
padding: const EdgeInsets.all(8.0),
child: Center(child: 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 = List<CardModel>.generate(cardHeights.length, (int i) {
final Color color = Color.lerp(Colors.red.shade300, Colors.blue.shade900, i / cardHeights.length);
return 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(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>[
Scaffold(
appBar: AppBar(title: const Text('Tap a Card')),
body: Container(
padding: const EdgeInsets.symmetric(vertical: 12.0, horizontal: 8.0),
child: NotificationListener<ScrollNotification>(
onNotification: handleScrollNotification,
child: ListView.custom(
childrenDelegate: CardBuilder(
cardModels: cardModels,
onTapUp: handleTapUp,
),
),
),
),
),
];
for (MarkerType type in markers.keys)
layers.add(Marker(type: type, position: markers[type]));
return Stack(children: layers);
}
}
void main() {
runApp(MaterialApp(
theme: ThemeData(
brightness: Brightness.light,
primarySwatch: Colors.blue,
accentColor: Colors.redAccent,
),
title: 'Cards',
home: OverlayGeometryApp(),
));
}