From eae1d15112acbba27fc4dc08e269525619f933b6 Mon Sep 17 00:00:00 2001 From: TechAurelian Date: Wed, 17 Apr 2024 14:39:05 +0300 Subject: [PATCH] Try to improve the UI with larger FABs + try to improve spacing and layout on larger screens --- lib/main.dart | 6 ++-- lib/screens/home.dart | 48 +++++++++++++++++++------------- lib/screens/settings_screen.dart | 35 ++++++++++++++++------- test/widget_test.dart | 2 +- 4 files changed, 57 insertions(+), 34 deletions(-) diff --git a/lib/main.dart b/lib/main.dart index b6a8bf7..93912b6 100644 --- a/lib/main.dart +++ b/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) { diff --git a/lib/screens/home.dart b/lib/screens/home.dart index 59f4c64..6b843ae 100644 --- a/lib/screens/home.dart +++ b/lib/screens/home.dart @@ -108,6 +108,7 @@ class _HomeScreenState extends State { @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 { child: counterDisplay, ) : counterDisplay, - floatingActionButton: !(_appSettings.counterTapMode) ? _buildFABs(isPortrait) : null, + floatingActionButton: + !(_appSettings.counterTapMode) ? _buildFABs(isPortrait, isLargeScreen) : null, ); } @@ -165,25 +167,31 @@ class _HomeScreenState extends State { } /// 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: [ - 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: [ + 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), + ) + ], + ), ); } } diff --git a/lib/screens/settings_screen.dart b/lib/screens/settings_screen.dart index 5aa96b4..f068a8a 100644 --- a/lib/screens/settings_screen.dart +++ b/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 { @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: [ + 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), + ) + ], + ), + ), ), ); } diff --git a/test/widget_test.dart b/test/widget_test.dart index 454bd92..d0982eb 100644 --- a/test/widget_test.dart +++ b/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);