From 52ef797b9a477338d5c6110410058df61af85327 Mon Sep 17 00:00:00 2001
From: Qun Cheng <36861262+QuncCccccc@users.noreply.github.com>
Date: Thu, 12 May 2022 17:28:32 -0700
Subject: [PATCH] Made elements on component screen stay compact on wider
 screen, take 2 (#1267)

* Revert "Revert "Made elements on component screen stay compact on wider screen (#1258)" (#1266)"

This reverts commit 53c83adc716698a75a5863a4899b479be205112b.

* ran flutter format for the changed files

* fixed test

Co-authored-by: Qun Cheng <quncheng@google.com>
---
 material_3_demo/lib/component_screen.dart     | 56 ++++++++++---------
 material_3_demo/lib/main.dart                 | 20 ++++---
 .../test/component_screen_test.dart           |  5 ++
 3 files changed, 46 insertions(+), 35 deletions(-)

diff --git a/material_3_demo/lib/component_screen.dart b/material_3_demo/lib/component_screen.dart
index 8eb41788d..0423b0b77 100644
--- a/material_3_demo/lib/component_screen.dart
+++ b/material_3_demo/lib/component_screen.dart
@@ -11,26 +11,32 @@ class ComponentScreen extends StatelessWidget {
     return Expanded(
       child: Padding(
         padding: const EdgeInsets.symmetric(horizontal: 10),
-        child: ListView(
-          shrinkWrap: true,
-          children: [
-            _colDivider,
-            _colDivider,
-            const Buttons(),
-            _colDivider,
-            const FloatingActionButtons(),
-            _colDivider,
-            const Cards(),
-            _colDivider,
-            const Dialogs(),
-            _colDivider,
-            showNavBottomBar
-                ? const NavigationBars(
-                    selectedIndex: 0,
-                    isExampleBar: true,
-                  )
-                : Container(),
-          ],
+        child: Align(
+          alignment: Alignment.topCenter,
+          child: SizedBox(
+            width: _maxWidthConstraint,
+            child: ListView(
+              shrinkWrap: true,
+              children: [
+                _colDivider,
+                _colDivider,
+                const Buttons(),
+                _colDivider,
+                const FloatingActionButtons(),
+                _colDivider,
+                const Cards(),
+                _colDivider,
+                const Dialogs(),
+                _colDivider,
+                showNavBottomBar
+                    ? const NavigationBars(
+                        selectedIndex: 0,
+                        isExampleBar: true,
+                      )
+                    : Container(),
+              ],
+            ),
+          ),
         ),
       ),
     );
@@ -40,6 +46,7 @@ class ComponentScreen extends StatelessWidget {
 const _rowDivider = SizedBox(width: 10);
 const _colDivider = SizedBox(height: 10);
 const double _cardWidth = 115;
+const double _maxWidthConstraint = 400;
 
 void Function()? handlePressed(
     BuildContext context, bool isDisabled, String buttonName) {
@@ -255,8 +262,7 @@ class Cards extends StatelessWidget {
                       alignment: Alignment.topRight,
                       child: Icon(Icons.more_vert),
                     ),
-                    _colDivider,
-                    _colDivider,
+                    SizedBox(height: 35),
                     Align(
                       alignment: Alignment.bottomLeft,
                       child: Text("Elevated"),
@@ -279,8 +285,7 @@ class Cards extends StatelessWidget {
                       alignment: Alignment.topRight,
                       child: Icon(Icons.more_vert),
                     ),
-                    _colDivider,
-                    _colDivider,
+                    SizedBox(height: 35),
                     Align(
                       alignment: Alignment.bottomLeft,
                       child: Text("Filled"),
@@ -308,8 +313,7 @@ class Cards extends StatelessWidget {
                       alignment: Alignment.topRight,
                       child: Icon(Icons.more_vert),
                     ),
-                    _colDivider,
-                    _colDivider,
+                    SizedBox(height: 35),
                     Align(
                       alignment: Alignment.bottomLeft,
                       child: Text("Outlined"),
diff --git a/material_3_demo/lib/main.dart b/material_3_demo/lib/main.dart
index 82732531c..00e377d3a 100644
--- a/material_3_demo/lib/main.dart
+++ b/material_3_demo/lib/main.dart
@@ -179,15 +179,17 @@ class _Material3DemoState extends State<Material3Demo> {
             body: SafeArea(
               bottom: false,
               top: false,
-              child: Row(children: <Widget>[
-                Padding(
-                    padding: const EdgeInsets.symmetric(horizontal: 5),
-                    child: NavigationRailSection(
-                        onSelectItem: handleScreenChanged,
-                        selectedIndex: screenIndex)),
-                const VerticalDivider(thickness: 1, width: 1),
-                createScreenFor(screenIndex, true),
-              ]),
+              child: Row(
+                children: <Widget>[
+                  Padding(
+                      padding: const EdgeInsets.symmetric(horizontal: 5),
+                      child: NavigationRailSection(
+                          onSelectItem: handleScreenChanged,
+                          selectedIndex: screenIndex)),
+                  const VerticalDivider(thickness: 1, width: 1),
+                  createScreenFor(screenIndex, true),
+                ],
+              ),
             ),
           );
         }
diff --git a/material_3_demo/test/component_screen_test.dart b/material_3_demo/test/component_screen_test.dart
index 13a074798..45bbbea29 100644
--- a/material_3_demo/test/component_screen_test.dart
+++ b/material_3_demo/test/component_screen_test.dart
@@ -27,6 +27,11 @@ void main() {
     expect(find.text("Icon"), findsNWidgets(5));
 
     // FABs
+    Finder floatingActionButton = find.text("Create");
+    await tester.scrollUntilVisible(
+      floatingActionButton,
+      500.0,
+    );
     expect(
         find.widgetWithIcon(FloatingActionButton, Icons.add), findsNWidgets(4));
     expect(find.widgetWithText(FloatingActionButton, "Create"), findsOneWidget);