[dev] change widget to bitmap

Nialixus · Oct 9, 2024 · 2999c1b · 2999c1b
1 parent 2e6c552
commit 2999c1b
Show file tree

Hide file tree

Showing 7 changed files with 100 additions and 30 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,2 +1,5 @@
 ## 1.0.0
-* Initial Release
+* Initial Release
+
+## 1.1.0
+* Change stacked widget to stacked bitmap
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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