From 4f059e686ea3ea7d97585e949869a2b87fddfbdb Mon Sep 17 00:00:00 2001
From: Mouad Debbar <mouad.debbar@gmail.com>
Date: Thu, 12 Jan 2023 15:56:11 +0000
Subject: [PATCH] Avoid allocation of large canvases on the web (#1557)

---
 .../lib/color_palettes_screen.dart            | 10 +--
 .../material_3_demo/lib/component_screen.dart | 63 ++++++++++---------
 2 files changed, 39 insertions(+), 34 deletions(-)

diff --git a/experimental/material_3_demo/lib/color_palettes_screen.dart b/experimental/material_3_demo/lib/color_palettes_screen.dart
index db1ace646..5380390e3 100644
--- a/experimental/material_3_demo/lib/color_palettes_screen.dart
+++ b/experimental/material_3_demo/lib/color_palettes_screen.dart
@@ -252,10 +252,12 @@ class ColorGroup extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Card(
-      clipBehavior: Clip.antiAlias,
-      child: Column(
-        children: children,
+    return RepaintBoundary(
+      child: Card(
+        clipBehavior: Clip.antiAlias,
+        child: Column(
+          children: children,
+        ),
       ),
     );
   }
diff --git a/experimental/material_3_demo/lib/component_screen.dart b/experimental/material_3_demo/lib/component_screen.dart
index 9dfb1e476..910b11348 100644
--- a/experimental/material_3_demo/lib/component_screen.dart
+++ b/experimental/material_3_demo/lib/component_screen.dart
@@ -1910,39 +1910,42 @@ class ComponentDecoration extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Padding(
-      padding: const EdgeInsets.symmetric(vertical: 10.0),
-      child: Column(
-        children: [
-          Row(
-            mainAxisAlignment: MainAxisAlignment.center,
-            children: [
-              Text(label, style: Theme.of(context).textTheme.titleSmall),
-              Tooltip(
-                message: tooltipMessage,
-                child: const Padding(
-                    padding: EdgeInsets.symmetric(horizontal: 5.0),
-                    child: Icon(Icons.info_outline, size: 16)),
-              ),
-            ],
-          ),
-          ConstrainedBox(
-            constraints: const BoxConstraints.tightFor(width: widthConstraint),
-            child: Card(
-              elevation: 0,
-              shape: RoundedRectangleBorder(
-                side: BorderSide(
-                  color: Theme.of(context).colorScheme.outline,
+    return RepaintBoundary(
+      child: Padding(
+        padding: const EdgeInsets.symmetric(vertical: 10.0),
+        child: Column(
+          children: [
+            Row(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                Text(label, style: Theme.of(context).textTheme.titleSmall),
+                Tooltip(
+                  message: tooltipMessage,
+                  child: const Padding(
+                      padding: EdgeInsets.symmetric(horizontal: 5.0),
+                      child: Icon(Icons.info_outline, size: 16)),
+                ),
+              ],
+            ),
+            ConstrainedBox(
+              constraints:
+                  const BoxConstraints.tightFor(width: widthConstraint),
+              child: Card(
+                elevation: 0,
+                shape: RoundedRectangleBorder(
+                  side: BorderSide(
+                    color: Theme.of(context).colorScheme.outline,
+                  ),
+                  borderRadius: const BorderRadius.all(Radius.circular(12)),
+                ),
+                child: Padding(
+                  padding: const EdgeInsets.all(20.0),
+                  child: child,
                 ),
-                borderRadius: const BorderRadius.all(Radius.circular(12)),
-              ),
-              child: Padding(
-                padding: const EdgeInsets.all(20.0),
-                child: child,
               ),
             ),
-          ),
-        ],
+          ],
+        ),
       ),
     );
   }