|
| 1 | +// Copyright 2019 The Flutter team. All rights reserved. |
| 2 | +// Use of this source code is governed by a BSD-style license that can be |
| 3 | +// found in the LICENSE file. |
| 4 | + |
| 5 | +import 'dart:ui' show Vertices; |
| 6 | +import 'package:flutter/material.dart'; |
| 7 | +import 'package:gallery/l10n/gallery_localizations.dart'; |
| 8 | +import 'transformations_demo_board.dart'; |
| 9 | +import 'transformations_demo_edit_board_point.dart'; |
| 10 | +import 'transformations_demo_gesture_transformable.dart'; |
| 11 | + |
| 12 | +// BEGIN transformationsDemo#1 |
| 13 | + |
| 14 | +class TransformationsDemo extends StatefulWidget { |
| 15 | + const TransformationsDemo({Key key}) : super(key: key); |
| 16 | + |
| 17 | + @override |
| 18 | + _TransformationsDemoState createState() => _TransformationsDemoState(); |
| 19 | +} |
| 20 | + |
| 21 | +class _TransformationsDemoState extends State<TransformationsDemo> { |
| 22 | + // The radius of a hexagon tile in pixels. |
| 23 | + static const _kHexagonRadius = 32.0; |
| 24 | + // The margin between hexagons. |
| 25 | + static const _kHexagonMargin = 1.0; |
| 26 | + // The radius of the entire board in hexagons, not including the center. |
| 27 | + static const _kBoardRadius = 12; |
| 28 | + |
| 29 | + bool _reset = false; |
| 30 | + Board _board = Board( |
| 31 | + boardRadius: _kBoardRadius, |
| 32 | + hexagonRadius: _kHexagonRadius, |
| 33 | + hexagonMargin: _kHexagonMargin, |
| 34 | + ); |
| 35 | + |
| 36 | + @override |
| 37 | + Widget build(BuildContext context) { |
| 38 | + final BoardPainter painter = BoardPainter( |
| 39 | + board: _board, |
| 40 | + ); |
| 41 | + |
| 42 | + // The scene is drawn by a CustomPaint, but user interaction is handled by |
| 43 | + // the GestureTransformable parent widget. |
| 44 | + return Scaffold( |
| 45 | + backgroundColor: Theme.of(context).colorScheme.primary, |
| 46 | + appBar: AppBar( |
| 47 | + automaticallyImplyLeading: false, |
| 48 | + title: |
| 49 | + Text(GalleryLocalizations.of(context).demo2dTransformationsTitle), |
| 50 | + ), |
| 51 | + body: Container( |
| 52 | + color: backgroundColor, |
| 53 | + child: LayoutBuilder( |
| 54 | + builder: (context, constraints) { |
| 55 | + // Draw the scene as big as is available, but allow the user to |
| 56 | + // translate beyond that to a visibleSize that's a bit bigger. |
| 57 | + final Size size = Size(constraints.maxWidth, constraints.maxHeight); |
| 58 | + final Size visibleSize = Size(size.width * 3, size.height * 2); |
| 59 | + return GestureTransformable( |
| 60 | + reset: _reset, |
| 61 | + onResetEnd: () { |
| 62 | + setState(() { |
| 63 | + _reset = false; |
| 64 | + }); |
| 65 | + }, |
| 66 | + child: CustomPaint( |
| 67 | + painter: painter, |
| 68 | + ), |
| 69 | + boundaryRect: Rect.fromLTWH( |
| 70 | + -visibleSize.width / 2, |
| 71 | + -visibleSize.height / 2, |
| 72 | + visibleSize.width, |
| 73 | + visibleSize.height, |
| 74 | + ), |
| 75 | + // Center the board in the middle of the screen. It's drawn centered |
| 76 | + // at the origin, which is the top left corner of the |
| 77 | + // GestureTransformable. |
| 78 | + initialTranslation: Offset(size.width / 2, size.height / 2), |
| 79 | + onTapUp: _onTapUp, |
| 80 | + size: size, |
| 81 | + ); |
| 82 | + }, |
| 83 | + ), |
| 84 | + ), |
| 85 | + persistentFooterButtons: [resetButton, editButton], |
| 86 | + ); |
| 87 | + } |
| 88 | + |
| 89 | + IconButton get resetButton { |
| 90 | + return IconButton( |
| 91 | + onPressed: () { |
| 92 | + setState(() { |
| 93 | + _reset = true; |
| 94 | + }); |
| 95 | + }, |
| 96 | + tooltip: |
| 97 | + GalleryLocalizations.of(context).demo2dTransformationsResetTooltip, |
| 98 | + color: Theme.of(context).colorScheme.surface, |
| 99 | + icon: const Icon(Icons.replay), |
| 100 | + ); |
| 101 | + } |
| 102 | + |
| 103 | + IconButton get editButton { |
| 104 | + return IconButton( |
| 105 | + onPressed: () { |
| 106 | + if (_board.selected == null) { |
| 107 | + return; |
| 108 | + } |
| 109 | + showModalBottomSheet<Widget>( |
| 110 | + context: context, |
| 111 | + builder: (context) { |
| 112 | + return Container( |
| 113 | + width: double.infinity, |
| 114 | + height: 150, |
| 115 | + padding: const EdgeInsets.all(12), |
| 116 | + child: EditBoardPoint( |
| 117 | + boardPoint: _board.selected, |
| 118 | + onColorSelection: (color) { |
| 119 | + setState(() { |
| 120 | + _board = _board.copyWithBoardPointColor( |
| 121 | + _board.selected, color); |
| 122 | + Navigator.pop(context); |
| 123 | + }); |
| 124 | + }, |
| 125 | + ), |
| 126 | + ); |
| 127 | + }); |
| 128 | + }, |
| 129 | + tooltip: |
| 130 | + GalleryLocalizations.of(context).demo2dTransformationsEditTooltip, |
| 131 | + color: Theme.of(context).colorScheme.surface, |
| 132 | + icon: const Icon(Icons.edit), |
| 133 | + ); |
| 134 | + } |
| 135 | + |
| 136 | + void _onTapUp(TapUpDetails details) { |
| 137 | + final Offset scenePoint = details.globalPosition; |
| 138 | + final BoardPoint boardPoint = _board.pointToBoardPoint(scenePoint); |
| 139 | + setState(() { |
| 140 | + _board = _board.copyWithSelected(boardPoint); |
| 141 | + }); |
| 142 | + } |
| 143 | +} |
| 144 | + |
| 145 | +// CustomPainter is what is passed to CustomPaint and actually draws the scene |
| 146 | +// when its `paint` method is called. |
| 147 | +class BoardPainter extends CustomPainter { |
| 148 | + const BoardPainter({ |
| 149 | + this.board, |
| 150 | + }); |
| 151 | + |
| 152 | + final Board board; |
| 153 | + |
| 154 | + @override |
| 155 | + void paint(Canvas canvas, Size size) { |
| 156 | + void drawBoardPoint(BoardPoint boardPoint) { |
| 157 | + final Color color = boardPoint.color.withOpacity( |
| 158 | + board.selected == boardPoint ? 0.7 : 1, |
| 159 | + ); |
| 160 | + final Vertices vertices = |
| 161 | + board.getVerticesForBoardPoint(boardPoint, color); |
| 162 | + canvas.drawVertices(vertices, BlendMode.color, Paint()); |
| 163 | + } |
| 164 | + |
| 165 | + board.forEach(drawBoardPoint); |
| 166 | + } |
| 167 | + |
| 168 | + // We should repaint whenever the board changes, such as board.selected. |
| 169 | + @override |
| 170 | + bool shouldRepaint(BoardPainter oldDelegate) { |
| 171 | + return oldDelegate.board != board; |
| 172 | + } |
| 173 | +} |
| 174 | + |
| 175 | +// END |
0 commit comments