Merge branch 'f40-rework-settings-screen-from-mockup' into 'dev'

Changes the settings screen to fit the Mockup specifications.

Closes #79

See merge request !67

lib/ui/screens/settings_screen.dart

@@ -4,7 +4,6 @@ import 'package:flutter/material.dart';
 import 'package:flutter/widgets.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:provider/provider.dart';
-import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
 
 //***********************************************
 //*****         Custom Imports            *******
@@ -39,6 +38,11 @@ class _SettingsScreenState extends State<SettingsScreen> {
   /// An instance of [AppSetting]
   late AppSetting appSetting;
 
+  /// Colors for the visible Buttons
+  final brightButtonColor = Colors.grey[500]!;
+  final normalButtonColor = Colors.grey[600]!;
+  final darkButtonColor = Colors.grey[700]!;
+
   //***************************************************
   //******           Main Widget              *********
   //***************************************************
@@ -46,40 +50,69 @@ class _SettingsScreenState extends State<SettingsScreen> {
   Widget build(BuildContext context) {
     appSetting = Provider.of<AppSetting>(context);
     final artworkService = Provider.of<ArtworkService>(context);
-    return Padding(
-      padding: const EdgeInsets.only(top: 10.0),
-      child: Center(
-        child: StaggeredGridView.count(
-          crossAxisCount: 4,
-          crossAxisSpacing: 1,
-          mainAxisSpacing: 1,
-          children: <Widget>[
-            createButtons(AppLocalizations.of(context)!.aboutus.toUpperCase(),
-                artworkService.appInfo.aboutUs, Colors.grey),
-            createButtons(AppLocalizations.of(context)!.aboutart.toUpperCase(),
-                artworkService.appInfo.aboutTUArt, Colors.grey[600]!),
-            createButtons(AppLocalizations.of(context)!.colors.toUpperCase(),
-                "", Colors.grey[600]!),
-            createButtons(AppLocalizations.of(context)!.sizes.toUpperCase(), "",
-                Colors.grey),
-            createButtons(AppLocalizations.of(context)!.favorites.toUpperCase(),
-                "", Colors.grey),
-            createButtons(AppLocalizations.of(context)!.lang.toUpperCase(), "",
-                Colors.grey[600]!),
-            createButtons(AppLocalizations.of(context)!.about.toUpperCase(),
-                artworkService.appInfo.imprint, Colors.grey[600]!),
-          ],
-          staggeredTiles: const <StaggeredTile>[
-            StaggeredTile.count(2, 1.3),
-            StaggeredTile.count(2, 1.3),
-            StaggeredTile.count(2, 1.3),
-            StaggeredTile.count(2, 1.3),
-            StaggeredTile.count(2, 1.3),
-            StaggeredTile.count(2, 1.3),
-            StaggeredTile.count(4, 1.3),
-          ],
+    return Column(
+      children: [
+        Flexible(
+          child: Row(
+            children: [
+              Flexible(
+                child: createButtons(
+                    AppLocalizations.of(context)!.aboutus.toUpperCase(),
+                    artworkService.appInfo.aboutUs,
+                    normalButtonColor),
+              ),
+              Flexible(
+                child: createButtons(
+                    AppLocalizations.of(context)!.aboutart.toUpperCase(),
+                    artworkService.appInfo.aboutTUArt,
+                    brightButtonColor),
+              ),
+            ],
+          ),
         ),
-      ),
+        Flexible(
+          child: Row(
+            children: [
+              Flexible(
+                child: createButtons(
+                    AppLocalizations.of(context)!.colors.toUpperCase(),
+                    "",
+                    brightButtonColor),
+              ),
+              Flexible(
+                child: createButtons(
+                    AppLocalizations.of(context)!.sizes.toUpperCase(),
+                    "",
+                    normalButtonColor),
+              ),
+            ],
+          ),
+        ),
+        Flexible(
+          child: Row(
+            children: [
+              Flexible(
+                child: createButtons(
+                    AppLocalizations.of(context)!.favorites.toUpperCase(),
+                    "",
+                    normalButtonColor),
+              ),
+              Flexible(
+                child: createButtons(
+                    AppLocalizations.of(context)!.lang.toUpperCase(),
+                    "",
+                    brightButtonColor),
+              ),
+            ],
+          ),
+        ),
+        Flexible(
+          child: createButtons(
+              AppLocalizations.of(context)!.about.toUpperCase(),
+              artworkService.appInfo.imprint,
+              darkButtonColor),
+        ),
+      ],
     );
   }
 
@@ -96,30 +129,23 @@ class _SettingsScreenState extends State<SettingsScreen> {
   Widget createButtons(String text, String infoText, Color color,
       {void Function()? onPressed}) {
     appSetting = Provider.of<AppSetting>(context);
-    return Padding(
-      padding: const EdgeInsets.all(1.0),
-      child: ElevatedButton(
-        onPressed: () {
-          showOptionDialog(text, infoText);
-        },
-        style: ButtonStyle(
-            backgroundColor: MaterialStateProperty.all<Color>(color),
-            elevation: MaterialStateProperty.resolveWith<double>(
-              (Set<MaterialState> states) {
-                if (states.contains(MaterialState.pressed) ||
-                    states.contains(MaterialState.disabled)) {
-                  return 0;
-                }
-                return 10;
-              },
-            )),
-        child: Center(
-          child: AutoSizeText(
-            text,
-            style: Theme.of(context).textTheme.button!.copyWith(
-                fontSize: appSetting.buttonTextFontSize, color: Colors.white),
-            textAlign: TextAlign.center,
-          ),
+    return TextButton(
+      onPressed: () {
+        showOptionDialog(text, infoText);
+      },
+      style: ButtonStyle(
+          shape: MaterialStateProperty.all<RoundedRectangleBorder>(
+              RoundedRectangleBorder(borderRadius: BorderRadius.zero)),
+          backgroundColor: MaterialStateProperty.all<Color>(color),
+          splashFactory: NoSplash.splashFactory),
+      child: Align(
+        alignment: Alignment(-1, -0.75),
+        child: Padding(
+          padding: EdgeInsets.fromLTRB(10, 0, 0, 0),
+          child: AutoSizeText(text,
+              style: Theme.of(context).textTheme.button!.copyWith(
+                  fontSize: appSetting.buttonTextFontSize, color: Colors.white),
+              textAlign: TextAlign.left),
         ),
       ),
     );

pubspec.lock

@@ -235,13 +235,6 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.3.2"
-  flutter_staggered_grid_view:
-    dependency: "direct main"
-    description:
-      name: flutter_staggered_grid_view
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "0.4.1"
   flutter_test:
     dependency: "direct dev"
     description: flutter

pubspec.yaml

@@ -33,7 +33,6 @@ dependencies:
   auto_size_text: ^3.0.0
   smooth_page_indicator: ^1.0.0+2
 
-  flutter_staggered_grid_view: ^0.4.1
   http: ^0.13.4
   qr_code_scanner: ^0.6.1
   flutter_map: ^0.14.0