adjustments for smaller screens

anfeichtinger · Feb 1, 2024 · 90d338c · 90d338c
1 parent e5ab5c5
commit 90d338c
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 21 deletions.
diff --git a/assets/translations/de.json b/assets/translations/de.json
@@ -20,7 +20,7 @@
   "state_content": "Leistungsstarke Zustandsverwaltung mit Cubit & BLOC.",
 
   "display_title": "Anzeige",
-  "display_content": "Unterstützt Displays mit hoher Bildwiederholrate durch Flutter Displaymode.",
+  "display_content": "Displays mit hoher Bildwiederholrate durch Flutter Displaymode.",
 
   "language_switch_title": "Deutsch verwenden",
 

diff --git a/assets/translations/en.json b/assets/translations/en.json
@@ -20,7 +20,7 @@
   "state_content": "Powerful state management using Cubit & BLOC.",
 
   "display_title": "Display",
-  "display_content": "Support for high refresh rate displays with the flutter displaymode package.",
+  "display_content": "Support for high refresh rate displays with flutter displaymode.",
 
   "language_switch_title": "Use german",
 

diff --git a/lib/cubit/theme_state.dart b/lib/cubit/theme_state.dart
@@ -2,7 +2,7 @@ part of 'theme_cubit.dart';
 
 @immutable
 class ThemeModeState extends Equatable {
-  const ThemeModeState({this.themeMode});
+  const ThemeModeState({this.themeMode = ThemeMode.system});
 
   final ThemeMode? themeMode;
 

diff --git a/lib/ui/screens/first_screen.dart b/lib/ui/screens/first_screen.dart
@@ -39,19 +39,27 @@ class FirstScreen extends StatelessWidget {
                 shape: const RoundedRectangleBorder(
                     borderRadius: BorderRadius.all(Radius.circular(12))),
                 value: context.locale == const Locale('de'),
-                title: Row(
-                  children: <Widget>[
-                    Icon(FluentIcons.local_language_24_regular,
-                        color: Theme.of(context).colorScheme.primary),
-                    const SizedBox(width: 16),
-                    Text(
-                      tr('language_switch_title'),
-                      style: Theme.of(context)
-                          .textTheme
-                          .titleMedium!
-                          .apply(fontWeightDelta: 2),
-                    ),
-                  ],
+                /// You can use a FittedBox to keep Text in its bounds.
+                title: FittedBox(
+                  alignment: Alignment.centerLeft,
+                  fit: BoxFit.none,
+                  child: Row(
+                    children: <Widget>[
+                      Icon(
+                        FluentIcons.local_language_24_regular,
+                        color: Theme.of(context).colorScheme.primary,
+                        opticalSize: 24,
+                      ),
+                      const SizedBox(width: 16),
+                      Text(
+                        tr('language_switch_title'),
+                        style: Theme.of(context)
+                            .textTheme
+                            .titleMedium!
+                            .apply(fontWeightDelta: 2),
+                      ),
+                    ],
+                  ),
                 ),
               ),
             ),
@@ -98,7 +106,7 @@ class FirstScreen extends StatelessWidget {
               crossAxisCount: 2,
               crossAxisSpacing: 8,
               mainAxisSpacing: 8,
-              childAspectRatio: 4 / 5,
+              childAspectRatio: 4 / 5.75,
               padding: EdgeInsets.zero,
               children: const <InfoCard>[
                 /// Example: it is good practice to put widgets in separate files.

diff --git a/lib/ui/widgets/first_screen/info_card.dart b/lib/ui/widgets/first_screen/info_card.dart
@@ -33,9 +33,12 @@ class InfoCard extends StatelessWidget {
           mainAxisSize: MainAxisSize.min,
           crossAxisAlignment: CrossAxisAlignment.start,
           children: <Widget>[
-            Text(
-              tr(title),
-              style: textTheme.titleLarge!.apply(fontWeightDelta: 2),
+            FittedBox(
+              fit: BoxFit.fitWidth,
+              child: Text(
+                tr(title),
+                style: textTheme.titleLarge!.apply(fontWeightDelta: 2),
+              ),
             ),
             const SizedBox(height: 10),
             Text(
@@ -45,7 +48,7 @@ class InfoCard extends StatelessWidget {
             const Spacer(),
             Icon(
               icon,
-              size: 32,
+              size: 28,
               color: textTheme.bodyMedium!.color,
             ),
           ],