Try to improve the UI with larger FABs

+ try to improve spacing and layout on larger screens

lib/main.dart

@@ -8,12 +8,12 @@ import 'common/app_strings.dart';
 import 'screens/home.dart';
 
 void main() {
-  runApp(const CountersApp());
+  runApp(const HelloWorldCountersApp());
 }
 
 /// The app widget.
-class CountersApp extends StatelessWidget {
-  const CountersApp({super.key});
+class HelloWorldCountersApp extends StatelessWidget {
+  const HelloWorldCountersApp({super.key});
 
   @override
   Widget build(BuildContext context) {

lib/screens/home.dart

@@ -108,6 +108,7 @@ class _HomeScreenState extends State<HomeScreen> {
   @override
   Widget build(BuildContext context) {
     final bool isPortrait = MediaQuery.of(context).size.height >= 500;
+    final bool isLargeScreen = MediaQuery.of(context).size.longestSide >= 1024;
 
     final CounterDisplay counterDisplay = CounterDisplay(
       value: _counters.current.value,
@@ -124,7 +125,8 @@ class _HomeScreenState extends State<HomeScreen> {
               child: counterDisplay,
             )
           : counterDisplay,
-      floatingActionButton: !(_appSettings.counterTapMode) ? _buildFABs(isPortrait) : null,
+      floatingActionButton:
+          !(_appSettings.counterTapMode) ? _buildFABs(isPortrait, isLargeScreen) : null,
     );
   }
 
@@ -165,25 +167,31 @@ class _HomeScreenState extends State<HomeScreen> {
   }
 
   /// Builds the two main floating action buttons for increment and decrement.
-  Widget _buildFABs(bool isPortrait) {
-    return Flex(
-      direction: isPortrait ? Axis.vertical : Axis.horizontal,
-      mainAxisAlignment: MainAxisAlignment.end,
-      children: <Widget>[
-        FloatingActionButton(
-          heroTag: AppStrings.decrementHeroTag,
-          onPressed: () => setState(() => _counters.current.decrement()),
-          tooltip: AppStrings.decrementTooltip,
-          child: const Icon(Icons.remove),
-        ),
-        isPortrait ? const SizedBox(height: 16.0) : const SizedBox(width: 16.0),
-        FloatingActionButton(
-          heroTag: AppStrings.incrementHeroTag,
-          onPressed: () => setState(() => _counters.current.increment()),
-          tooltip: AppStrings.incrementTooltip,
-          child: const Icon(Icons.add),
-        )
-      ],
+  Widget _buildFABs(bool isPortrait, bool isLargeScreen) {
+    return Padding(
+      // We're giving the FABs a bit more breathing room on larger screens
+      padding: isLargeScreen
+          ? const EdgeInsets.only(bottom: 16.0, right: 16.0)
+          : const EdgeInsets.all(0.0),
+      child: Flex(
+        direction: isPortrait ? Axis.vertical : Axis.horizontal,
+        mainAxisAlignment: MainAxisAlignment.end,
+        children: <Widget>[
+          FloatingActionButton.large(
+            heroTag: AppStrings.decrementHeroTag,
+            onPressed: () => setState(() => _counters.current.decrement()),
+            tooltip: AppStrings.decrementTooltip,
+            child: const Icon(Icons.remove),
+          ),
+          isPortrait ? const SizedBox(height: 16.0) : const SizedBox(width: 16.0),
+          FloatingActionButton.large(
+            heroTag: AppStrings.incrementHeroTag,
+            onPressed: () => setState(() => _counters.current.increment()),
+            tooltip: AppStrings.incrementTooltip,
+            child: const Icon(Icons.add),
+          )
+        ],
+      ),
     );
   }
 }

lib/screens/settings_screen.dart

@@ -7,12 +7,16 @@ import 'package:flutter/material.dart';
 import '../common/app_settings.dart';
 import '../common/app_strings.dart';
 
+/// The settings screen widget that allows the user to change app settings.
+///
+/// Currently, the only setting is a switch to toggle between the two counter tap modes.
 class SettingsScreen extends StatefulWidget {
   const SettingsScreen({
     super.key,
     required this.appSettings,
   });
 
+  /// The app settings.
   final AppSettings appSettings;
 
   @override
@@ -22,20 +26,31 @@ class SettingsScreen extends StatefulWidget {
 class _SettingsScreenState extends State<SettingsScreen> {
   @override
   Widget build(BuildContext context) {
+    final bool isLargeScreen = MediaQuery.of(context).size.width >= 800.0;
+
     return Scaffold(
       appBar: AppBar(
         title: const Text(AppStrings.settingsTitle),
       ),
-      body: ListView(
-        children: [
-          SwitchListTile(
-            activeColor: Colors.black,
-            value: widget.appSettings.counterTapMode,
-            title: const Text(AppStrings.counterTapModeTitle),
-            subtitle: const Text(AppStrings.counterTapModeSubtitle),
-            onChanged: (bool value) => setState(() => widget.appSettings.counterTapMode = value),
-          )
-        ],
+      body: Container(
+        alignment: Alignment.topCenter,
+        padding: isLargeScreen ? const EdgeInsets.symmetric(vertical: 32.0) : null,
+        child: ConstrainedBox(
+          // Limit the width of the settings content to 800 pixels on large screens
+          constraints: const BoxConstraints(maxWidth: 800.0),
+          child: ListView(
+            children: <Widget>[
+              SwitchListTile(
+                activeColor: Colors.black,
+                value: widget.appSettings.counterTapMode,
+                title: const Text(AppStrings.counterTapModeTitle),
+                subtitle: const Text(AppStrings.counterTapModeSubtitle),
+                onChanged: (bool value) =>
+                    setState(() => widget.appSettings.counterTapMode = value),
+              )
+            ],
+          ),
+        ),
       ),
     );
   }

test/widget_test.dart

@@ -13,7 +13,7 @@ import 'package:hello_world_counters/main.dart';
 void main() {
   testWidgets('Counter increments smoke test', (WidgetTester tester) async {
     // Build our app and trigger a frame.
-    await tester.pumpWidget(const CountersApp());
+    await tester.pumpWidget(const HelloWorldCountersApp());
 
     // Verify that our counter starts at 0.
     expect(find.text('0'), findsOneWidget);