Tip 221

README.md

@@ -18,6 +18,7 @@ This repo now has a companion app! [Download it here](https://fluttertips.dev/)
 
 | ID | View on GitHub (this repo)                                                                                                                                                        | X Post | LinkedIn Post | Bluesky Post | Link on [codewithandrea.com](https://codewithandrea.com/) |
 | -- |-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| ------ | ------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------ |
+| 221 | [Using Stack and FractionallySizedBox](tips/0221-stack-fractionally-sized-box/index.md) | [link](https://x.com/biz84/status/1876564889537311226) | [link](https://www.linkedin.com/posts/andreabizzotto_did-you-know-flutter-offers-many-ways-to-activity-7282330843241447426-cDRF) | [link](https://bsky.app/profile/codewithandrea.com/post/3lf5eby24zc2r) |
 | 220 | [The ListWheelScrollView Widget](tips/0220-list-wheel-scroll-view/index.md) | [link](https://x.com/biz84/status/1870061289114087814) | [link](https://www.linkedin.com/posts/andreabizzotto_did-you-know-if-you-need-to-select-between-activity-7275827511219945472-cYEH) | [link](https://bsky.app/profile/codewithandrea.com/post/3ldqaaejlx22e) | |
 | 219 | [Color API Deprecations in Flutter 3.27](tips/0219-color-deprecations-flutter-3.27/index.md) | [link](https://x.com/biz84/status/1869357562979893444) | [link](https://www.linkedin.com/posts/andreabizzotto_did-you-know-to-support-the-latest-wide-activity-7275123561881645057-LsKH) | [link](https://bsky.app/profile/codewithandrea.com/post/3ldldwzh6l22f) | |
 | 218 | [Text Style with Tabular Figures](tips/0218-text-style-tabular-figures/index.md) | [link](https://x.com/biz84/status/1868692579648487611) | [link](https://www.linkedin.com/posts/andreabizzotto_did-you-know-if-you-want-to-render-fixed-activity-7274458459914350593-YkSx) | [link](https://bsky.app/profile/codewithandrea.com/post/3ldgqe64qzs24) | |

tips/0220-list-wheel-scroll-view/index.md

@@ -49,7 +49,7 @@ For all the details, check the official docs:
 
 | Previous | Next |
 | -------- | ---- |
-| [Color API Deprecations in Flutter 3.27](../0219-color-deprecations-flutter-3.27/index.md) | |
+| [Color API Deprecations in Flutter 3.27](../0219-color-deprecations-flutter-3.27/index.md) | [Using Stack and FractionallySizedBox](../0221-stack-fractionally-sized-box/index.md) |
 
 
 <!-- TWITTER|https://x.com/biz84/status/1870061289114087814 -->

tips/0221-stack-fractionally-sized-box/index.md

@@ -0,0 +1,53 @@
+# Using Stack and FractionallySizedBox
+
+Did you know?
+
+Flutter offers many ways to create custom layouts that can’t be expressed with `Row` and `Column`. 👍
+
+For example, here's how to overlay multiple widgets inside a `Stack` and constrain their size and position with `Positioned` and `FractionallySizedBox`. 👇
+
+![](221.png)
+
+<!--
+
+const n = 4;
+// * Aspect ratio = 1 yields a square
+return AspectRatio(
+  aspectRatio: 1,
+  // * Stack the squares on top of each other
+  child: Stack(
+    // * Generate n squares
+    children: List.generate(n, (index) {
+      // * Material colors have shades from 100 to 900
+      final color = Colors.indigo[(index + 2) * 100]!;
+      // * Fill the entire surface
+      return Positioned.fill(
+        // * Size child to a fraction of the available space
+        child: FractionallySizedBox(
+          // * Pick width and height between 0 and 1
+          widthFactor: 1 - index / n,
+          heightFactor: 1 - index / n,
+          // * Choose the alignment of the child
+          alignment: Alignment.topRight,
+          // * Just a colored box
+          child: ColoredBox(color: color),
+        ),
+      );
+    }),
+  ),
+);
+
+-->
+
+---
+
+| Previous | Next |
+| -------- | ---- |
+| [The ListWheelScrollView Widget](../0220-list-wheel-scroll-view/index.md) | |
+
+
+<!-- TWITTER|https://x.com/biz84/status/1876564889537311226 -->
+<!-- LINKEDIN|https://www.linkedin.com/posts/andreabizzotto_did-you-know-flutter-offers-many-ways-to-activity-7282330843241447426-cDRF -->
+<!-- BLUESKY|https://bsky.app/profile/codewithandrea.com/post/3lf5eby24zc2r -->
+
+