From 8cf0e116cce17e4d3460eb0635ce6aa9be7fd88d Mon Sep 17 00:00:00 2001 From: Erick Zanardo Date: Tue, 21 Jan 2020 20:47:36 -0300 Subject: [PATCH] Adding NineTileBox widget --- .../widgets/.flutter-plugins-dependencies | 1 + doc/examples/widgets/.gitignore | 71 +++++++++ doc/examples/widgets/.metadata | 10 ++ doc/examples/widgets/README.md | 3 + .../widgets/assets/images/nine_tile_box.png | Bin 0 -> 318 bytes doc/examples/widgets/lib/main.dart | 29 ++++ doc/examples/widgets/pubspec.yaml | 20 +++ lib/widgets/nine_tile_box.dart | 138 ++++++++++++++++++ pubspec.yaml | 1 + 9 files changed, 273 insertions(+) create mode 100644 doc/examples/widgets/.flutter-plugins-dependencies create mode 100644 doc/examples/widgets/.gitignore create mode 100644 doc/examples/widgets/.metadata create mode 100644 doc/examples/widgets/README.md create mode 100644 doc/examples/widgets/assets/images/nine_tile_box.png create mode 100644 doc/examples/widgets/lib/main.dart create mode 100644 doc/examples/widgets/pubspec.yaml create mode 100644 lib/widgets/nine_tile_box.dart diff --git a/doc/examples/widgets/.flutter-plugins-dependencies b/doc/examples/widgets/.flutter-plugins-dependencies new file mode 100644 index 000000000..8b065d7c0 --- /dev/null +++ b/doc/examples/widgets/.flutter-plugins-dependencies @@ -0,0 +1 @@ +{"_info":"// This is a generated file; do not edit or check into version control.","dependencyGraph":[{"name":"audioplayers","dependencies":["path_provider"]},{"name":"path_provider","dependencies":[]}]} \ No newline at end of file diff --git a/doc/examples/widgets/.gitignore b/doc/examples/widgets/.gitignore new file mode 100644 index 000000000..5b195d8fb --- /dev/null +++ b/doc/examples/widgets/.gitignore @@ -0,0 +1,71 @@ +# Miscellaneous +*.class +*.log +*.pyc +*.swp +.DS_Store +.atom/ +.buildlog/ +.history +.svn/ + +# IntelliJ related +*.iml +*.ipr +*.iws +.idea/ + +# Visual Studio Code related +.vscode/ + +# Flutter/Dart/Pub related +**/doc/api/ +.dart_tool/ +.flutter-plugins +.packages +.pub-cache/ +.pub/ +/build/ + +# Android related +**/android/**/gradle-wrapper.jar +**/android/.gradle +**/android/captures/ +**/android/gradlew +**/android/gradlew.bat +**/android/local.properties +**/android/**/GeneratedPluginRegistrant.java + +# iOS/XCode related +**/ios/**/*.mode1v3 +**/ios/**/*.mode2v3 +**/ios/**/*.moved-aside +**/ios/**/*.pbxuser +**/ios/**/*.perspectivev3 +**/ios/**/*sync/ +**/ios/**/.sconsign.dblite +**/ios/**/.tags* +**/ios/**/.vagrant/ +**/ios/**/DerivedData/ +**/ios/**/Icon? +**/ios/**/Pods/ +**/ios/**/.symlinks/ +**/ios/**/profile +**/ios/**/xcuserdata +**/ios/.generated/ +**/ios/Flutter/App.framework +**/ios/Flutter/Flutter.framework +**/ios/Flutter/Generated.xcconfig +**/ios/Flutter/app.flx +**/ios/Flutter/app.zip +**/ios/Flutter/flutter_assets/ +**/ios/ServiceDefinitions.json +**/ios/Runner/GeneratedPluginRegistrant.* + +# Exceptions to above rules. +!**/ios/**/default.mode1v3 +!**/ios/**/default.mode2v3 +!**/ios/**/default.pbxuser +!**/ios/**/default.perspectivev3 +!/packages/flutter_tools/test/data/dart_dependencies_test/**/.packages + diff --git a/doc/examples/widgets/.metadata b/doc/examples/widgets/.metadata new file mode 100644 index 000000000..396f2b834 --- /dev/null +++ b/doc/examples/widgets/.metadata @@ -0,0 +1,10 @@ +# This file tracks properties of this Flutter project. +# Used by Flutter tool to assess capabilities and perform upgrades etc. +# +# This file should be version controlled and should not be manually edited. + +version: + revision: 0aed0b61a1789ed06c9fa05a6c5fcfbd398c4811 + channel: master + +project_type: app diff --git a/doc/examples/widgets/README.md b/doc/examples/widgets/README.md new file mode 100644 index 000000000..245a47dfd --- /dev/null +++ b/doc/examples/widgets/README.md @@ -0,0 +1,3 @@ +# Widgets + +A Flutter project showcasing Flame's widgets. diff --git a/doc/examples/widgets/assets/images/nine_tile_box.png b/doc/examples/widgets/assets/images/nine_tile_box.png new file mode 100644 index 0000000000000000000000000000000000000000..eeeb0bc3396fc57760b3f38fba8d98c5b7ea7b46 GIT binary patch literal 318 zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA1|-9oezpTC#^NA%Cx&(BWL^R}KRjI=LoyoQ z-rC696d=<2usdi&GmE-{${Oc~ECxM34iBx=S~wLpFtf67e-3!C@J7LbIqNU(3AiKw z_MNeda>pmX^1ia&^LjtteBi*F7uT14_RD0oOxF~NOZA+K_5?T2{(kw^X5C9au6{Po z{LSI~#Pm-XyL|SaRs9Cfvueg418F_K(fc zGI1_Te3IYpPZHW-&f}2GAjNz^qTv{W3EKighF-=DtU|L{BGxHy6IV+6nX%_daN74H y(Q%vgZV8`%o4Wm({W>X)-TU5r%=5pVD<`NNAMr^_>pL(E7(8A5T-G@yGywp(9)cqP literal 0 HcmV?d00001 diff --git a/doc/examples/widgets/lib/main.dart b/doc/examples/widgets/lib/main.dart new file mode 100644 index 000000000..d135fabe1 --- /dev/null +++ b/doc/examples/widgets/lib/main.dart @@ -0,0 +1,29 @@ +import 'package:flutter/material.dart'; +import 'package:flame/flame.dart'; +import 'package:dashbook/dashbook.dart'; + +import 'package:flame/widgets/nine_tile_box.dart'; + +void main() async { + WidgetsFlutterBinding.ensureInitialized(); + + final nineTileBoxImage = await Flame.images.load('nine_tile_box.png'); + final dashbook = Dashbook(); + + dashbook.storiesOf('SpritesheetContainer').decorator(CenterDecorator()).add( + 'default', + (ctx) => Container( + width: ctx.numberProperty('width', 200), + height: ctx.numberProperty('height', 200), + child: NineTileBox( + image: nineTileBoxImage, + tileSize: 16, + destTileSize: 50, + child: const Center( + child: const Text('Cool label', + style: const TextStyle(color: const Color(0xFFFFFFFF)))), + ), + )); + + runApp(dashbook); +} diff --git a/doc/examples/widgets/pubspec.yaml b/doc/examples/widgets/pubspec.yaml new file mode 100644 index 000000000..d8c7d4612 --- /dev/null +++ b/doc/examples/widgets/pubspec.yaml @@ -0,0 +1,20 @@ +name: widgets +description: A Flutter project showcasing Flame's widgets. + +version: 1.0.0+1 + +environment: + sdk: ">=2.1.0 <3.0.0" + +dependencies: + flutter: + sdk: flutter + flame: + path: ../../../ + dashbook: ^0.0.2 + + cupertino_icons: ^0.1.2 +flutter: + uses-material-design: true + assets: + - assets/images/nine_tile_box.png diff --git a/lib/widgets/nine_tile_box.dart b/lib/widgets/nine_tile_box.dart new file mode 100644 index 000000000..526a4e224 --- /dev/null +++ b/lib/widgets/nine_tile_box.dart @@ -0,0 +1,138 @@ +import 'package:flutter/widgets.dart' as widgets; +import 'package:meta/meta.dart'; +import '../sprite.dart'; +import 'dart:ui'; + +class _Painter extends widgets.CustomPainter { + final Image image; + final double tileSize; + final double destTileSize; + + _Painter( + {@required this.image, + @required this.tileSize, + @required this.destTileSize}); + + @override + void paint(Canvas canvas, Size size) { + final topLeftCorner = + Sprite.fromImage(image, x: 0, y: 0, width: tileSize, height: tileSize); + final topRightCorner = Sprite.fromImage(image, + x: tileSize * 2, y: 0, width: tileSize, height: tileSize); + + final bottomLeftCorner = Sprite.fromImage(image, + x: 0, y: 2 * tileSize, width: tileSize, height: tileSize); + final bottomRightCorner = Sprite.fromImage(image, + x: tileSize * 2, y: 2 * tileSize, width: tileSize, height: tileSize); + + final topSide = Sprite.fromImage(image, + x: tileSize, y: 0, width: tileSize, height: tileSize); + final bottomSide = Sprite.fromImage(image, + x: tileSize, y: tileSize * 2, width: tileSize, height: tileSize); + + final leftSide = Sprite.fromImage(image, + x: 0, y: tileSize, width: tileSize, height: tileSize); + final rightSide = Sprite.fromImage(image, + x: tileSize * 2, y: tileSize, width: tileSize, height: tileSize); + + final middle = Sprite.fromImage(image, + x: tileSize, y: tileSize, width: tileSize, height: tileSize); + + // Middle + for (var y = destTileSize; + y < size.height - destTileSize; + y = y + destTileSize) { + for (var x = destTileSize; + x < size.width - destTileSize; + x = x + destTileSize) { + middle.renderRect( + canvas, Rect.fromLTWH(x, y, destTileSize, destTileSize)); + } + } + + // Top and bottom side + for (var i = destTileSize; + i < size.width - destTileSize; + i = i + destTileSize) { + topSide.renderRect( + canvas, Rect.fromLTWH(i, 0, destTileSize, destTileSize)); + bottomSide.renderRect( + canvas, + Rect.fromLTWH( + i, size.height - destTileSize, destTileSize, destTileSize)); + } + + // Left and right side + for (var i = destTileSize; + i < size.height - destTileSize; + i = i + destTileSize) { + leftSide.renderRect( + canvas, Rect.fromLTWH(0, i, destTileSize, destTileSize)); + rightSide.renderRect( + canvas, + Rect.fromLTWH( + size.width - destTileSize, i, destTileSize, destTileSize)); + } + + // Corners + topLeftCorner.renderRect( + canvas, Rect.fromLTWH(0, 0, destTileSize, destTileSize)); + topRightCorner.renderRect( + canvas, + Rect.fromLTWH( + size.width - destTileSize, 0, destTileSize, destTileSize)); + + bottomLeftCorner.renderRect( + canvas, + Rect.fromLTWH( + 0, size.height - destTileSize, destTileSize, destTileSize)); + bottomRightCorner.renderRect( + canvas, + Rect.fromLTWH(size.width - destTileSize, size.height - destTileSize, + destTileSize, destTileSize)); + } + + @override + bool shouldRepaint(_) => false; +} + +class NineTileBox extends widgets.StatelessWidget { + final Image image; + final double tileSize; + final double destTileSize; + final double width; + final double height; + + final widgets.Widget child; + + final widgets.EdgeInsetsGeometry padding; + + NineTileBox({ + @required this.image, + @required this.tileSize, + @required this.destTileSize, + this.child, + this.width, + this.height, + this.padding, + }); + + @override + widgets.Widget build(widgets.BuildContext context) { + return widgets.Container( + width: width, + height: height, + child: widgets.CustomPaint( + painter: _Painter( + image: image, + tileSize: tileSize, + destTileSize: destTileSize, + ), + child: widgets.Container( + child: child, + padding: padding, + ), + ), + ); + } +} diff --git a/pubspec.yaml b/pubspec.yaml index 7afd74b07..e9ec5e15e 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -15,6 +15,7 @@ dependencies: convert: ^2.0.1 flutter_svg: ^0.15.0 flare_flutter: ^2.0.1 + meta: ^1.1.8 dev_dependencies: flutter_test: