diff --git a/CHANGELOG.md b/CHANGELOG.md index 4e32075..077897e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,2 +1,5 @@ ## 1.0.0 -* Initial Release \ No newline at end of file +* Initial Release + +## 1.1.0 +* Change stacked widget to stacked bitmap \ No newline at end of file diff --git a/README.md b/README.md index f1cf6b0..675c8ef 100644 --- a/README.md +++ b/README.md @@ -21,7 +21,7 @@ Add this line to your pubspec.yaml. ```yaml dependencies: - thicken: ^1.0.0 + thicken: ^1.1.0 ``` ## Usage diff --git a/example/.gitignore b/example/.gitignore new file mode 100644 index 0000000..29a3a50 --- /dev/null +++ b/example/.gitignore @@ -0,0 +1,43 @@ +# Miscellaneous +*.class +*.log +*.pyc +*.swp +.DS_Store +.atom/ +.buildlog/ +.history +.svn/ +migrate_working_dir/ + +# IntelliJ related +*.iml +*.ipr +*.iws +.idea/ + +# The .vscode folder contains launch configuration and tasks you configure in +# VS Code which you may wish to be included in version control, so this line +# is commented out by default. +#.vscode/ + +# Flutter/Dart/Pub related +**/doc/api/ +**/ios/Flutter/.last_build_id +.dart_tool/ +.flutter-plugins +.flutter-plugins-dependencies +.pub-cache/ +.pub/ +/build/ + +# Symbolication related +app.*.symbols + +# Obfuscation related +app.*.map.json + +# Android Studio will place build artifacts here +/android/app/debug +/android/app/profile +/android/app/release diff --git a/example/.metadata b/example/.metadata index 9d32c61..8075e8d 100644 --- a/example/.metadata +++ b/example/.metadata @@ -15,24 +15,9 @@ migration: - platform: root create_revision: b0850beeb25f6d5b10426284f506557f66181b36 base_revision: b0850beeb25f6d5b10426284f506557f66181b36 - - platform: android - create_revision: b0850beeb25f6d5b10426284f506557f66181b36 - base_revision: b0850beeb25f6d5b10426284f506557f66181b36 - - platform: ios - create_revision: b0850beeb25f6d5b10426284f506557f66181b36 - base_revision: b0850beeb25f6d5b10426284f506557f66181b36 - - platform: linux - create_revision: b0850beeb25f6d5b10426284f506557f66181b36 - base_revision: b0850beeb25f6d5b10426284f506557f66181b36 - platform: macos create_revision: b0850beeb25f6d5b10426284f506557f66181b36 base_revision: b0850beeb25f6d5b10426284f506557f66181b36 - - platform: web - create_revision: b0850beeb25f6d5b10426284f506557f66181b36 - base_revision: b0850beeb25f6d5b10426284f506557f66181b36 - - platform: windows - create_revision: b0850beeb25f6d5b10426284f506557f66181b36 - base_revision: b0850beeb25f6d5b10426284f506557f66181b36 # User provided section diff --git a/example/pubspec.lock b/example/pubspec.lock index e65a612..08b2602 100644 --- a/example/pubspec.lock +++ b/example/pubspec.lock @@ -198,7 +198,7 @@ packages: path: ".." relative: true source: path - version: "0.0.1" + version: "1.0.0" vector_math: dependency: transitive description: diff --git a/lib/thicken.dart b/lib/thicken.dart index 497c0d3..a6d2f46 100644 --- a/lib/thicken.dart +++ b/lib/thicken.dart @@ -17,7 +17,9 @@ /// ``` library thicken; +import 'dart:ui' as ui; import 'package:flutter/material.dart'; +import 'package:flutter/rendering.dart'; /// A widget that creates a thick visual effect by stacking multiple /// layers of a given [child] widget with slight translations based on the @@ -52,6 +54,7 @@ class Thicken extends StatelessWidget { /// offset translations. const Thicken({ super.key, + this.pixelRatio = 1.0, required this.thickness, required this.child, }); @@ -74,21 +77,57 @@ class Thicken extends StatelessWidget { return 3 + (range * 2); } + /// The pixel ratio of the [child] widget. + /// By default, this is set to 1.0. + final double pixelRatio; + @override Widget build(BuildContext context) { - return Stack( - alignment: Alignment.center, - children: List.generate(layers * layers, (index) { - final indexX = index % layers; - final indexY = index ~/ layers; - final offsetX = (1 - (2 * indexX / layers)) * thickness; - final offsetY = (1 - (2 * indexY / layers)) * thickness; + final key = GlobalKey(debugLabel: 'thicken'); + return FutureBuilder( + future: () async { + try { + // Wait until after the frame is built + await Future.delayed(Duration.zero); + + final boundary = key.currentContext?.findRenderObject(); + if (boundary is RenderRepaintBoundary) { + final image = await boundary.toImage(pixelRatio: pixelRatio); + final byte = await image.toByteData( + format: ui.ImageByteFormat.png, + ); + + return byte?.buffer.asUint8List(); + } + } catch (e) { + return null; + } + }(), + builder: (builder, snapshot) { + return Stack( + clipBehavior: Clip.none, + alignment: Alignment.center, + children: [ + if (snapshot.hasData) + ...List.generate(layers * layers, (index) { + final indexX = index % layers; + final indexY = index ~/ layers; + final offsetX = (1 - (2 * indexX / layers)) * thickness; + final offsetY = (1 - (2 * indexY / layers)) * thickness; - return Transform.translate( - offset: Offset(offsetX, offsetY), - child: child, + if (index + indexY == 0) return const SizedBox(); + return Transform.translate( + offset: Offset(offsetX, offsetY), + child: Image.memory(snapshot.data!), + ); + }), + RepaintBoundary( + key: key, + child: child, + ), + ], ); - }), + }, ); } } diff --git a/pubspec.yaml b/pubspec.yaml index 190e9e3..85a33f9 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -1,6 +1,6 @@ name: thicken description: A widget that creates a thick visual effect by stacking multiple layers of a given child widget with slight translations based on the thickness value. -version: 1.0.0 +version: 1.1.0 homepage: https://inidia.app repository: https://github.com/Nialixus/thicken.git issue_tracker: https://github.com/Nialixus/thicken/issues