| // 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(), |
| )); |
| } |