Tip 216

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/) |
 | -- |-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| ------ | ------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------ |
+| 216 | [New Spacing Argument in Row/Column (Flutter 3.27)](tips/0216-spacing-row-column/index.md) | [link](https://x.com/biz84/status/1867143273652904039) | [link](https://www.linkedin.com/posts/andreabizzotto_did-you-know-since-flutter-327-you-can-activity-7272909542131187712-7Spj) | [link](https://bsky.app/profile/codewithandrea.com/post/3ld3ycpuxxk2f) | |
 | 215 | [The Banner Widget](tips/0215-banner-widget/index.md) | [link](https://x.com/biz84/status/1866482324105490628) | [link](https://www.linkedin.com/posts/andreabizzotto_did-you-know-you-can-use-the-banner-widget-activity-7272248288236519424-tfzF) | [link](https://bsky.app/profile/codewithandrea.com/post/3lcxfixclys2f) | |
 | 214 | [Improve your code with Cursor Edit Mode](tips/0214-cursor-edit-mode/index.md) | [link](https://x.com/biz84/status/1864613511420068093) | [link](https://www.linkedin.com/posts/andreabizzotto_did-you-know-the-cursor-ide-has-a-powerful-activity-7270379818746105856-Mq9n) | [link](https://bsky.app/profile/codewithandrea.com/post/3lckgkkurms27) | |
 | 213 | [Fixing Version Solving Failed Errors](tips/0213-fixing-version-solving-failed-errors/index.md) | [link](https://x.com/biz84/status/1864283511852527815) | [link](https://www.linkedin.com/posts/andreabizzotto_when-you-get-a-version-solving-failed-error-activity-7270050610329100289-0I9m) | [link](https://bsky.app/profile/codewithandrea.com/post/3lci5gzmagc27) | |

tips/0215-banner-widget/index.md

@@ -37,7 +37,7 @@ For more info, check the official docs:
 
 | Previous | Next |
 | -------- | ---- |
-| [Improve your code with Cursor Edit Mode](../0214-cursor-edit-mode/index.md) |  |
+| [Improve your code with Cursor Edit Mode](../0214-cursor-edit-mode/index.md) | [New Spacing Argument in Row/Column (Flutter 3.27)](../0216-spacing-row-column/index.md) |
 
 <!-- TWITTER|https://x.com/biz84/status/1866482324105490628 -->
 <!-- LINKEDIN|https://www.linkedin.com/posts/andreabizzotto_did-you-know-you-can-use-the-banner-widget-activity-7272248288236519424-tfzF -->

tips/0216-spacing-row-column/index.md

@@ -0,0 +1,73 @@
+# New Spacing Argument in Row/Column (Flutter 3.27)
+
+Did you know?
+
+Since Flutter 3.27, you can pass a `spacing` argument to your `Row` and `Column` widgets. ✅
+
+This means you no longer need a `SizedBox` to add fixed spacing between each child. 🚀
+
+![](216.1.png)
+
+<!--
+
+// New Spacing Argument in Row/Column
+
+// Before Flutter 3.27
+Column(
+  crossAxisAlignment: CrossAxisAlignment.stretch,
+  children: [
+    Expanded(child: ColoredBox(color: Colors.green)),
+    SizedBox(height: 16.0),
+    Expanded(child: ColoredBox(color: Colors.orange)),
+    SizedBox(height: 16.0),
+    Expanded(child: ColoredBox(color: Colors.red)),
+  ],
+)
+
+// Since Flutter 3.27
+Column(
+  crossAxisAlignment: CrossAxisAlignment.stretch,
+  spacing: 16.0,
+  children: [
+    Expanded(child: ColoredBox(color: Colors.green)),
+    Expanded(child: ColoredBox(color: Colors.orange)),
+    Expanded(child: ColoredBox(color: Colors.red)),
+  ],
+)
+
+-->
+
+---
+
+If you want, you can combine spacing and flex together.
+
+This makes it easier to mix **fixed** and **proportional** spacing when laying out the children.
+
+![](216.2.png)
+
+<!--
+
+// Combining spacing and flex
+
+// You can combine spacing with flex as needed:
+Column(
+  crossAxisAlignment: CrossAxisAlignment.stretch,
+  spacing: 16.0,
+  children: [
+    Expanded(flex: 3, child: ColoredBox(color: Colors.green)),
+    Expanded(flex: 2, child: ColoredBox(color: Colors.orange)),
+    Expanded(flex: 1, child: ColoredBox(color: Colors.red)),
+  ],
+)
+
+-->
+
+<!-- TWITTER|https://x.com/biz84/status/1867143273652904039 -->
+<!-- LINKEDIN|https://www.linkedin.com/posts/andreabizzotto_did-you-know-since-flutter-327-you-can-activity-7272909542131187712-7Spj -->
+<!-- BLUESKY|https://bsky.app/profile/codewithandrea.com/post/3ld3ycpuxxk2f -->
+
+---
+
+| Previous | Next |
+| -------- | ---- |
+| [The Banner Widget](../0216-spacing-row-column/index.md) | |