Made elements on component screen stay compact on wider screen (#1258)

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(
+        child: Align(
-          shrinkWrap: true,
+          alignment: Alignment.topCenter,
-          children: [
+          child: SizedBox(
-            _colDivider,
+            width: _maxWidthConstraint,
-            _colDivider,
+            child: ListView(
-            const Buttons(),
+              shrinkWrap: true,
-            _colDivider,
+              children: [
-            const FloatingActionButtons(),
+                _colDivider,
-            _colDivider,
+                _colDivider,
-            const Cards(),
+                const Buttons(),
-            _colDivider,
+                _colDivider,
-            const Dialogs(),
+                const FloatingActionButtons(),
-            _colDivider,
+                _colDivider,
-            showNavBottomBar
+                const Cards(),
-                ? const NavigationBars(
+                _colDivider,
-                    selectedIndex: 0,
+                const Dialogs(),
-                    isExampleBar: true,
+                _colDivider,
-                  )
+                showNavBottomBar
-                : Container(),
+                    ? 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,
+                    SizedBox(height: 35),
-                    _colDivider,
                     Align(
                       alignment: Alignment.bottomLeft,
                       child: Text("Elevated"),
@@ -279,8 +285,7 @@ class Cards extends StatelessWidget {
                       alignment: Alignment.topRight,
                       child: Icon(Icons.more_vert),
                     ),
-                    _colDivider,
+                    SizedBox(height: 35),
-                    _colDivider,
                     Align(
                       alignment: Alignment.bottomLeft,
                       child: Text("Filled"),
@@ -308,8 +313,7 @@ class Cards extends StatelessWidget {
                       alignment: Alignment.topRight,
                       child: Icon(Icons.more_vert),
                     ),
-                    _colDivider,
+                    SizedBox(height: 35),
-                    _colDivider,
                     Align(
                       alignment: Alignment.bottomLeft,
                       child: Text("Outlined"),

material_3_demo/lib/main.dart

@@ -187,7 +187,7 @@ class _Material3DemoState extends State<Material3Demo> {
                         selectedIndex: screenIndex)),
                 const VerticalDivider(thickness: 1, width: 1),
                 createScreenFor(screenIndex, true),
-              ]),
+              ],),
             ),
           );
         }