1175: Language switch

frontend/assets/l10n/app_de.json

@@ -3,18 +3,22 @@
     "dependencies": "Software-Bibliotheken",
     "developmentOptions": "Entwickleroptionen",
     "disclaimer": "Haftung, Haftungsausschluss und Impressum",
+    "infoTitle": "Info",
+    "languageChange": "Sprache wechseln",
+    "languageChangeSuccessful": "Ihre Sprache wurde erfolgreich geändert!",
     "licenses": {
       "one": "Lizenz",
       "other": "Lizenzen"
     },
     "moreInformation": "Mehr Informationen",
     "numberLicenses": {
-      "zero": "Keine Lizenzen",
       "one": "1 Lizenz",
-      "other": "$n Lizenzen"
+      "other": "$n Lizenzen",
+      "zero": "Keine Lizenzen"
     },
     "privacyDeclaration": "Datenschutzerklärung",
     "publisher": "Herausgeber",
+    "settingsTitle": "Einstellungen",
     "sourceCode": "Quellcode der App",
     "title": "Über"
   },

frontend/assets/l10n/app_en.json

@@ -3,18 +3,22 @@
     "dependencies": "Libraries",
     "developmentOptions": "Developer options",
     "disclaimer": "Liability, disclaimer and imprint",
+    "infoTitle": "Info",
+    "languageChange": "Change language",
+    "languageChangeSuccessful": "Your language was changed successfully!",
     "licenses": {
       "one": "License",
       "other": "Licenses"
     },
     "moreInformation": "More information",
     "numberLicenses": {
-      "zero": "No licenses",
       "one": "1 license",
-      "other": "$n licenses"
+      "other": "$n licenses",
+      "zero": "No licenses"
     },
     "privacyDeclaration": "Privacy policy",
     "publisher": "Publisher",
+    "settingsTitle": "Settings",
     "sourceCode": "Source code",
     "title": "About"
   },

frontend/assets/nuernberg/l10n/override_de.json

@@ -30,5 +30,8 @@
     "usageDescription": "Auf der Karte von Nürnberg können Sie alle Akzeptanzstellen finden. Tippen Sie auf einen Standort, um mehr Informationen sehen zu können.",
     "usageTitle": "Wo kann ich den Nürnberg-Pass nutzen?",
     "welcomeDescription": "Vielen Dank, dass Sie sich die App zum Nürnberg-Pass heruntergeladen haben!"
+  },
+  "about": {
+    "title": "Mehr"
   }
 }

frontend/assets/nuernberg/l10n/override_en.json

@@ -30,5 +30,8 @@
     "usageDescription": "On the map of Nürnberg you can find all acceptance points. Tap on a location to be able to see more information.",
     "usageTitle": "Where can I use my Nürnberg-Pass?",
     "welcomeDescription": "Thank you for downloading the app for the Nürnberg-Pass!"
+  },
+  "about": {
+    "title": "More"
   }
 }

frontend/build-configs/bayern/index.ts

@@ -62,7 +62,7 @@ export const bayernCommon: CommonBuildConfigType = {
         "assets/bayern/intro_slides/search_with_location.png",
     ],
     featureFlags: {
-        verification: true
+        verification: true,
     },
     applicationUrl: "https://bayern.ehrenamtskarte.app/beantragen",
     dataPrivacyPolicyUrl: "https://bayern.ehrenamtskarte.app/data-privacy-policy",

frontend/build-configs/nuernberg/index.ts

@@ -62,7 +62,7 @@ export const nuernbergCommon: CommonBuildConfigType = {
         "assets/nuernberg/intro_slides/search_with_location.png",
     ],
     featureFlags: {
-        verification: true
+        verification: true,
     },
     applicationUrl: "https://beantragen.nuernberg.sozialpass.app",
     publisherAddress:

frontend/lib/about/about_page.dart

@@ -1,7 +1,9 @@
 import 'package:ehrenamtskarte/about/backend_switch_dialog.dart';
 import 'package:ehrenamtskarte/about/content_tile.dart';
 import 'package:ehrenamtskarte/about/dev_settings_view.dart';
+import 'package:ehrenamtskarte/about/language_change.dart';
 import 'package:ehrenamtskarte/about/license_page.dart';
+import 'package:ehrenamtskarte/about/section.dart';
 import 'package:ehrenamtskarte/about/texts.dart';
 import 'package:ehrenamtskarte/build_config/build_config.dart' show buildConfig;
 import 'package:ehrenamtskarte/configuration/configuration.dart';
@@ -27,7 +29,6 @@ class AboutPageState extends State<AboutPage> {
   @override
   Widget build(BuildContext context) {
     final config = Configuration.of(context);
-
     return FutureBuilder<PackageInfo>(
       future: PackageInfo.fromPlatform(),
       builder: (context, snapshot) {
@@ -95,53 +96,75 @@ class AboutPageState extends State<AboutPage> {
                 );
               },
             ),
+            if (buildConfig.appLocales.length > 1)
+              Column(children: [
+                const Divider(
+                  height: 1,
+                  thickness: 1,
+                ),
+                Section(
+                  headline: t.about.settingsTitle,
+                  children: [
+                    ContentTile(icon: Icons.language, title: t.about.languageChange, children: [LanguageChange()]),
+                  ],
+                ),
+              ]),
             const Divider(
               height: 1,
               thickness: 1,
             ),
-            const SizedBox(height: 20),
-            ContentTile(icon: Icons.copyright, title: t.about.licenses(n: 1), children: getCopyrightText(context)),
-            ListTile(
-              leading: const Icon(Icons.privacy_tip_outlined),
-              title: Text(t.about.privacyDeclaration),
-              onTap: () => launchUrlString(buildConfig.dataPrivacyPolicyUrl, mode: LaunchMode.externalApplication),
-            ),
-            ContentTile(
-              icon: Icons.info_outline,
-              title: t.about.disclaimer,
-              children: getDisclaimerText(context),
-            ),
-            ListTile(
-              leading: const Icon(Icons.book_outlined),
-              title: Text(t.about.dependencies),
-              onTap: () {
-                Navigator.push(
-                  context,
-                  AppRoute(
-                    builder: (context) => const CustomLicensePage(),
-                  ),
-                );
-              },
-            ),
-            ListTile(
-              leading: const Icon(Icons.code_outlined),
-              title: Text(t.about.sourceCode),
-              onTap: () {
-                launchUrlString(
-                  'https://github.com/digitalfabrik/entitlementcard',
-                  mode: LaunchMode.externalApplication,
-                );
-              },
-            ),
-            if (config.showDevSettings)
+            Section(headline: t.about.infoTitle, children: [
+              ContentTile(icon: Icons.copyright, title: t.about.licenses(n: 1), children: getCopyrightText(context)),
               ListTile(
-                leading: const Icon(Icons.build),
-                title: Text(t.about.developmentOptions),
-                onTap: () => showDialog(
-                  context: context,
-                  builder: (context) =>
-                      SimpleDialog(title: Text(t.about.developmentOptions), children: [DevSettingsView()]),
-                ),
+                leading: const Icon(Icons.privacy_tip_outlined),
+                title: Text(t.about.privacyDeclaration),
+                onTap: () => launchUrlString(buildConfig.dataPrivacyPolicyUrl, mode: LaunchMode.externalApplication),
+              ),
+              ContentTile(
+                icon: Icons.info_outline,
+                title: t.about.disclaimer,
+                children: getDisclaimerText(context),
+              ),
+              ListTile(
+                leading: const Icon(Icons.book_outlined),
+                title: Text(t.about.dependencies),
+                onTap: () {
+                  Navigator.push(
+                    context,
+                    AppRoute(
+                      builder: (context) => const CustomLicensePage(),
+                    ),
+                  );
+                },
+              ),
+              ListTile(
+                leading: const Icon(Icons.code_outlined),
+                title: Text(t.about.sourceCode),
+                onTap: () {
+                  launchUrlString(
+                    'https://github.com/digitalfabrik/entitlementcard',
+                    mode: LaunchMode.externalApplication,
+                  );
+                },
+              ),
+            ]),
+            if (config.showDevSettings)
+              Column(
+                children: [
+                  const Divider(
+                    height: 1,
+                    thickness: 1,
+                  ),
+                  ListTile(
+                    leading: const Icon(Icons.build),
+                    title: Text(t.about.developmentOptions),
+                    onTap: () => showDialog(
+                      context: context,
+                      builder: (context) =>
+                          SimpleDialog(title: Text(t.about.developmentOptions), children: [DevSettingsView()]),
+                    ),
+                  )
+                ],
               )
           ];
         } else {

frontend/lib/about/language_change.dart

@@ -0,0 +1,40 @@
+import 'package:ehrenamtskarte/build_config/build_config.dart' show buildConfig;
+import 'package:ehrenamtskarte/l10n/translations.g.dart';
+import 'package:flutter/material.dart';
+
+Map<String, String> languages = {'en': 'Englisch', 'de': 'Deutsch'};
+
+class LanguageChange extends StatelessWidget {
+  const LanguageChange({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(children: [
+      ...buildConfig.appLocales.map((item) => DecoratedBox(
+          decoration: BoxDecoration(
+              color: LocaleSettings.currentLocale.languageCode == item
+                  ? Theme.of(context).colorScheme.surfaceVariant
+                  : null),
+          child: ListTile(
+              title: Text(
+                languages[item]!,
+                textAlign: TextAlign.center,
+                style: TextStyle(fontWeight: FontWeight.bold),
+              ),
+              onTap: () => switchLanguage(context, item))))
+    ]);
+  }
+
+  switchLanguage(BuildContext context, String language) {
+    final messengerState = ScaffoldMessenger.of(context);
+    LocaleSettings.setLocaleRaw(language);
+    messengerState.showSnackBar(
+      SnackBar(
+        backgroundColor: Theme.of(context).colorScheme.primary,
+        content:
+            Text(t.about.languageChangeSuccessful, style: TextStyle(color: Theme.of(context).colorScheme.background)),
+      ),
+    );
+    Navigator.pop(context);
+  }
+}

frontend/lib/about/section.dart

@@ -0,0 +1,27 @@
+import 'package:flutter/material.dart';
+
+class Section extends StatelessWidget {
+  final String headline;
+  final List<Widget> children;
+
+  const Section({super.key, required this.headline, required this.children});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Padding(
+          padding: EdgeInsets.only(top: 16, left: 16, right: 16),
+          child: Text(headline,
+              style: Theme.of(context)
+                  .textTheme
+                  .bodySmall
+                  ?.merge(TextStyle(color: Theme.of(context).colorScheme.secondary))),
+        ),
+        Column(children: children),
+        const SizedBox(height: 10),
+      ],
+    );
+  }
+}

frontend/lib/home/home_page.dart

@@ -51,12 +51,12 @@ class HomePageState extends State<HomePage> {
       if (buildConfig.featureFlags.verification)
         AppFlow(
           IdentificationPage(),
-          Icons.remove_red_eye_outlined,
+          Icons.credit_card,
           (BuildContext context) => t.identification.title,
           GlobalKey<NavigatorState>(debugLabel: 'Auth tab key'),
         ),
-      AppFlow(const AboutPage(), Icons.info_outline, (BuildContext context) => t.about.title,
-          GlobalKey<NavigatorState>(debugLabel: 'About tab key')),
+      AppFlow(const AboutPage(), buildConfig.appLocales.length > 1 ? Icons.menu : Icons.info_outline,
+          (BuildContext context) => t.about.title, GlobalKey<NavigatorState>(debugLabel: 'About tab key')),
     ];
   }
 

frontend/lib/themes.dart

@@ -16,7 +16,7 @@ ThemeData get lightTheme {
     ),
     textTheme: defaultTypography.copyWith(
       headlineMedium: defaultTypography.headlineMedium?.apply(color: Colors.black87),
-      headlineSmall: defaultTypography.headlineMedium?.apply(color: Colors.black87),
+      headlineSmall: defaultTypography.headlineSmall?.apply(color: Colors.black87),
       titleLarge: const TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
       bodyLarge: const TextStyle(fontSize: 15.0, fontWeight: FontWeight.normal),
       bodyMedium: const TextStyle(fontSize: 15.0, color: Color(0xFF505050)),
@@ -59,7 +59,7 @@ ThemeData get darkTheme {
     ),
     textTheme: defaultTypography.copyWith(
       headlineMedium: defaultTypography.headlineMedium?.apply(color: Colors.white),
-      headlineSmall: defaultTypography.headlineMedium?.apply(color: Colors.white),
+      headlineSmall: defaultTypography.headlineSmall?.apply(color: Colors.white),
       titleLarge: const TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
       bodyLarge: const TextStyle(fontSize: 15.0, fontWeight: FontWeight.normal),
       bodyMedium: const TextStyle(fontSize: 15.0, color: Color(0xFFC6C4C4)),