Finish up columns & rows

Author: MarsGoatz

README.md

@@ -1,8 +1,10 @@
+**NOTE: Everything in this repo falls under the GPL 3 license EXCEPT THE IMAGES IN README!**
+<br/>
 # Creating Responsive Apps With Flutter
 
 - [Creating Responsive Apps With Flutter](#creating-responsive-apps-with-flutter)
   - [1.1. Box Contraints](#11-box-contraints)
-  - [1.2. Responsive Apps On Various Mobile Screen Sizes](#12-responsive-apps-on-various-mobile-screen-sizes)
+  - [1.2. Responsiveness on Mobile Screens](#12-responsiveness-on-mobile-screens)
     - [1.2.1. Columns](#121-columns)
     - [1.2.2. Handling Orientation](#122-handling-orientation)
   - [1.3. Handling Wider Screens](#13-handling-wider-screens)
@@ -97,15 +99,19 @@ Additional Reading:
 - [Understanding Constraints](https://flutter.dev/docs/development/ui/layout/constraints)
 - [ConstrainedBox](https://api.flutter.dev/flutter/widgets/ConstrainedBox-class.html)
 
-## 1.2. Responsive Apps On Various Mobile Screen Sizes
+## 1.2. Responsiveness on Mobile Screens
 When creating an app across various mobile screen, we want to make sure they are responsive and expand or collapse based on the screen dimensions. So we will look at how to achieve that with Columns and Rows.
 
+![alt Column & Row Main Axis](images/main_axis.png)
+
+<br/>
+
 ### 1.2.1. Columns
 
 So, Columns, unlike Scaffold or Container don't pass constraint along the main axis and will build the height from the children. This is because Columns children are dynamic.
 
 <details>
-  <summary>Example 1</summary>
+  <summary>Example 1 - Unresponsive Overflow</summary>
 
 <p>
 
@@ -135,7 +141,7 @@ class ColumnExample1 extends StatelessWidget {
           ),
           Container(
             color: Colors.orange,
-            height: 500,
+            height: 1000,
           ),
         ],
       ),
@@ -146,14 +152,59 @@ class ColumnExample1 extends StatelessWidget {
 </p>
 </details>
 
-As you saw with the example, the overflow error generally happens with Columns and Rows because they don't pass constraint to the children along the main axis.
+As you saw with the example, the overflow error generally happens with Columns and Rows because they don't pass constraint to the children along the main axis to restric the child's height.
+
+<details>
+  <summary>Example 2 - Unresponsive Unused Space</summary>
+
+<p>
 
-So how do we solve the problem of widgets going out of bounds? We use a special widget called **Expanded** or **Flex**.
+```dart
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+
+class ColumnExample1 extends StatelessWidget {
+  const ColumnExample1({Key key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text('Example 1'),
+      ),
+      //if the containers height are infite here, the app will //crash
+      body: Column(
+        children: [
+          Container(
+            color: Colors.green,
+            height: 100,
+          ),
+          Container(
+            color: Colors.blue,
+            height: 300,
+          ),
+          Container(
+            color: Colors.orange,
+            height: 100,
+          ),
+        ],
+      ),
+    );
+  }
+}
+```
+</p>
+</details>
+
+Here, there is unused space. The dimensions could work for one mobile device but not for others as
+different mobile devices have different heights.
+
+So how do we solve the problem of widgets going out of bounds? We use a special widget called **Expanded** or **Flexible**. These widgets can only be used by Columns or Rows.
 
 **Expanded** will fill the remaining space with the child widget, which in our case is the orange widget. Note that when using Expanded, it will completely ignore the child's height.
 
 <details>
-  <summary>Example 1</summary>
+  <summary>Example - Responsive With Expanded</summary>
 
 <p>
 
@@ -195,12 +246,26 @@ class ColumnExampleResponsive extends StatelessWidget {
 </p>
 </details>
 
-Additonal Notes:
-- **Flexible** is similar to Expanded but with more options on the Columns on how children should take up space.
+Notes:
 - Rows is pretty similar to Column, except that the main axis is controlled by width.
+- Use Flex widget if you want dynamic control, i.e, switch between Column and Row.
+- **Flexible** is similar to **Expanded** but with more options on the Columns on how children should take up space.
+- Use **flex** attribute with Expanded to more fine grained control of the space taken by children
+
+Additional Reading:
+- [Columns & Rows Box Constraints](https://itnext.io/flutter-box-constraints-columns-rows-382dcf82256a)
+- [Nested Columns & Rows Box Constraints](https://marsgoat.medium.com/flutter-box-constraints-nested-column-s-row-s-3dfacada7361)
+- [Flex](https://api.flutter.dev/flutter/widgets/Flex-class.html)
+- [Expanded](https://api.flutter.dev/flutter/widgets/Expanded-class.html)
+- [Flexible](https://api.flutter.dev/flutter/widgets/Flexible-class.html)
+- [Flexible vs Expanded](https://itnext.io/flutter-responsive-apps-flexible-vs-expanded-ff8cc92b468f)
 
 ### 1.2.2. Handling Orientation
 
+![alt Column & Row Main Axis](images/orientation.png)
+
+<br/>
+
 - Use OrientationBuilder to know what the current orientation and return the respective widget
 - Disable particular orientation
 
@@ -210,6 +275,10 @@ So for handling different mobile device screen, using Columns/Rows with Expanded
 expand the repsonsiveness to wider screens like desktop apps and desktop browsers, we have to rely on 
 either MediaQuery or LayoutBuilder.
 
+![alt Column & Row Main Axis](images/widescreen.png)
+
+<br/>
+
 ### 1.3.1. MediaQuery
 
 Using MediaQuery, you can get information like screen dimensions, accessibilty information which you can use to handle various screen sizes.

images/main_axis.png

@@ -3,8 +3,8 @@ import 'package:flutter/widgets.dart';
 
 import '../responsive_util.dart';
 
-class ColumnExample1 extends StatelessWidget {
-  const ColumnExample1({Key key}) : super(key: key);
+class ColumnExampleUnresponsive1 extends StatelessWidget {
+  const ColumnExampleUnresponsive1({Key key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
@@ -26,7 +26,38 @@ class ColumnExample1 extends StatelessWidget {
           ),
           Container(
             color: Colors.orange,
-            height: 500,
+            height: 1000,
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class ColumnExampleUnresponsive2 extends StatelessWidget {
+  const ColumnExampleUnresponsive2({Key key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: ResponsiveUtil.isWideScreen(context)
+          ? null
+          : AppBar(
+              title: Text('Example 1'),
+            ),
+      body: Column(
+        children: [
+          Container(
+            color: Colors.green,
+            height: 100,
+          ),
+          Container(
+            color: Colors.blue,
+            height: 300,
+          ),
+          Container(
+            color: Colors.orange,
+            height: 100,
           ),
         ],
       ),

images/orientation.png

@@ -17,15 +17,17 @@ class ColumnExamples extends StatelessWidget {
                 toolbarHeight: kMinInteractiveDimension,
                 bottom: TabBar(
                   tabs: [
-                    Tab(text: 'Simple Column'),
+                    Tab(text: 'Simple Column Unresponsive 1'),
+                    Tab(text: 'Simple Column Unresponsive 2'),
                     Tab(text: 'Simple Column Responsive'),
                     Tab(text: 'Simple Column Responsive Flex'),
                   ],
                 ),
               ),
               body: TabBarView(
                 children: [
-                  ColumnExample1(),
+                  ColumnExampleUnresponsive1(),
+                  ColumnExampleUnresponsive2(),
                   ColumnExampleResponsive(),
                   ColumnExampleResponsiveFlex()
                 ],
@@ -42,8 +44,12 @@ class ColumnExamples extends StatelessWidget {
               child: Column(
                 children: [
                   ListTileCustom(
-                    title: 'Simple Column',
-                    screen: ColumnExample1(),
+                    title: 'Simple Column Unresponsive 1',
+                    screen: ColumnExampleUnresponsive1(),
+                  ),
+                  ListTileCustom(
+                    title: 'Simple Column Unresponsive 2',
+                    screen: ColumnExampleUnresponsive2(),
                   ),
                   ListTileCustom(
                     title: 'Simple Column Responsive',