Change AboutDialog to separate page #265

lib/main.dart

@@ -47,6 +47,7 @@ import 'package:wger/screens/weight_screen.dart';
 import 'package:wger/screens/workout_plan_screen.dart';
 import 'package:wger/screens/workout_plans_screen.dart';
 import 'package:wger/theme/theme.dart';
+import 'package:wger/widgets/core/about.dart';
 
 import 'providers/auth.dart';
 
@@ -148,6 +149,7 @@ class MyApp extends StatelessWidget {
             ExercisesScreen.routeName: (ctx) => const ExercisesScreen(),
             ExerciseDetailScreen.routeName: (ctx) => const ExerciseDetailScreen(),
             AddExerciseScreen.routeName: (ctx) => const AddExerciseScreen(),
+            AboutPage.routeName: (ctx) => const AboutPage(),
           },
           localizationsDelegates: AppLocalizations.localizationsDelegates,
           supportedLocales: AppLocalizations.supportedLocales,

lib/widgets/core/about.dart

@@ -22,99 +22,164 @@ import 'package:provider/provider.dart';
 import 'package:wger/helpers/misc.dart';
 import 'package:wger/providers/auth.dart';
 
-class WgerAboutListTile extends StatelessWidget {
+class AboutPage extends StatefulWidget {
+  static String routeName = '/AboutPage';
+  const AboutPage({Key? key}) : super(key: key);
+
+  @override
+  State<AboutPage> createState() => _AboutPageState();
+}
+
+class _AboutPageState extends State<AboutPage> {
   @override
   Widget build(BuildContext context) {
+    final deviceSize = MediaQuery.of(context).size;
     final authProvider = Provider.of<AuthProvider>(context, listen: false);
 
-    return AboutListTile(
-      //dense: true,
-      icon: const Icon(Icons.info),
-      applicationName: 'wger',
-      applicationVersion: 'App: ${authProvider.applicationVersion!.version}\n'
-          'Server: ${authProvider.serverVersion}',
-      applicationLegalese: '\u{a9} 2020 - 2021 contributors',
-      applicationIcon: Padding(
-        padding: const EdgeInsets.only(top: 10),
-        child: Image.asset(
-          'assets/images/logo.png',
-          width: 60,
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('About wger'),
+      ),
+      body: SingleChildScrollView(
+        padding: const EdgeInsets.all(20.0),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            SizedBox(
+              width: double.infinity,
+              height: 0.125 * deviceSize.height,
+              // color: Colors.red,
+              child: Row(
+                // mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  Image.asset(
+                    'assets/images/logo.png',
+                    width: 75,
+                  ),
+                  const SizedBox(width: 20),
+                  Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    children: [
+                      const Text(
+                        'Wger',
+                        style: TextStyle(
+                          fontSize: 23,
+                          fontWeight: FontWeight.w600,
+                        ),
+                      ),
+                      Text('App: ${authProvider.applicationVersion!.version}\n'
+                          'Server: ${authProvider.serverVersion}'),
+                    ],
+                  ),
+                ],
+              ),
+            ),
+            Padding(
+              padding: EdgeInsets.only(left: 0.225 * deviceSize.width),
+              child: Text(
+                '\u{a9} 2020 - 2021 contributors',
+                style: Theme.of(context).textTheme.bodySmall,
+              ),
+            ),
+            SizedBox(height: 0.025 * deviceSize.height),
+            Text(
+              AppLocalizations.of(context).aboutDescription,
+              style: Theme.of(context).textTheme.bodyMedium!.copyWith(fontSize: 16),
+            ),
+            SizedBox(height: 0.04 * deviceSize.height),
+            ListTile(
+              leading: const Icon(Icons.code),
+              title: Text(AppLocalizations.of(context).aboutSourceTitle),
+              subtitle: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text(AppLocalizations.of(context).aboutSourceText),
+                  const Text(
+                    'https://github.com/wger-project',
+                    style: TextStyle(color: Colors.blue),
+                  ),
+                ],
+              ),
+              contentPadding: EdgeInsets.zero,
+              onTap: () async => launchURL('https://github.com/wger-project', context),
+            ),
+            const SizedBox(height: 10),
+            ListTile(
+              leading: const Icon(Icons.bug_report),
+              title: Text(AppLocalizations.of(context).aboutBugsTitle),
+              subtitle: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text(AppLocalizations.of(context).aboutBugsText),
+                  const Text(
+                    'https://github.com/wger-project/flutter/issues/new/choose',
+                    style: TextStyle(color: Colors.blue),
+                  )
+                ],
+              ),
+              contentPadding: EdgeInsets.zero,
+              onTap: () async =>
+                  launchURL('https://github.com/wger-project/flutter/issues/new/choose', context),
+            ),
+            const SizedBox(height: 10),
+            ListTile(
+              leading: const Icon(Icons.chat),
+              title: Text(AppLocalizations.of(context).aboutContactUsTitle),
+              subtitle: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text(AppLocalizations.of(context).aboutContactUsText),
+                  const Text(
+                    'https://discord.gg/rPWFv6W',
+                    style: TextStyle(color: Colors.blue),
+                  ),
+                ],
+              ),
+              contentPadding: EdgeInsets.zero,
+              onTap: () async => launchURL('https://discord.gg/rPWFv6W', context),
+            ),
+            const SizedBox(height: 10),
+            ListTile(
+              leading: const Icon(Icons.translate),
+              title: Text(AppLocalizations.of(context).aboutTranslationTitle),
+              subtitle: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text(AppLocalizations.of(context).aboutTranslationText),
+                  const Text(
+                    'https://hosted.weblate.org/engage/wger/',
+                    style: TextStyle(color: Colors.blue),
+                  ),
+                ],
+              ),
+              contentPadding: EdgeInsets.zero,
+              onTap: () async => launchURL('https://hosted.weblate.org/engage/wger/', context),
+            ),
+            ListTile(
+              leading: const Icon(Icons.article),
+              title: const Text('View Licenses'),
+              contentPadding: EdgeInsets.zero,
+              onTap: () {
+                showLicensePage(
+                  context: context,
+                  applicationName: 'wger',
+                  applicationVersion: 'App: ${authProvider.applicationVersion!.version}\n'
+                      'Server: ${authProvider.serverVersion}',
+                  applicationLegalese: '\u{a9} 2020 - 2021 contributors',
+                  applicationIcon: Padding(
+                    padding: const EdgeInsets.only(top: 10),
+                    child: Image.asset(
+                      'assets/images/logo.png',
+                      width: 60,
+                    ),
+                  ),
+                );
+              },
+            ),
+          ],
         ),
       ),
-
-      aboutBoxChildren: [
-        const SizedBox(height: 10),
-        Text(AppLocalizations.of(context).aboutDescription),
-        const SizedBox(height: 20),
-        ListTile(
-          leading: const Icon(Icons.code),
-          title: Text(AppLocalizations.of(context).aboutSourceTitle),
-          subtitle: Column(
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: [
-              Text(AppLocalizations.of(context).aboutSourceText),
-              const Text(
-                'https://github.com/wger-project',
-                style: TextStyle(color: Colors.blue),
-              ),
-            ],
-          ),
-          contentPadding: EdgeInsets.zero,
-          onTap: () async => launchURL('https://github.com/wger-project', context),
-        ),
-        const SizedBox(height: 10),
-        ListTile(
-          leading: const Icon(Icons.bug_report),
-          title: Text(AppLocalizations.of(context).aboutBugsTitle),
-          subtitle: Column(
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: [
-              Text(AppLocalizations.of(context).aboutBugsText),
-              const Text(
-                'https://github.com/wger-project/flutter/issues/new/choose',
-                style: TextStyle(color: Colors.blue),
-              )
-            ],
-          ),
-          contentPadding: EdgeInsets.zero,
-          onTap: () async =>
-              launchURL('https://github.com/wger-project/flutter/issues/new/choose', context),
-        ),
-        const SizedBox(height: 10),
-        ListTile(
-          leading: const Icon(Icons.chat),
-          title: Text(AppLocalizations.of(context).aboutContactUsTitle),
-          subtitle: Column(
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: [
-              Text(AppLocalizations.of(context).aboutContactUsText),
-              const Text(
-                'https://discord.gg/rPWFv6W',
-                style: TextStyle(color: Colors.blue),
-              ),
-            ],
-          ),
-          contentPadding: EdgeInsets.zero,
-          onTap: () async => launchURL('https://discord.gg/rPWFv6W', context),
-        ),
-        const SizedBox(height: 10),
-        ListTile(
-          leading: const Icon(Icons.translate),
-          title: Text(AppLocalizations.of(context).aboutTranslationTitle),
-          subtitle: Column(
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: [
-              Text(AppLocalizations.of(context).aboutTranslationText),
-              const Text(
-                'https://hosted.weblate.org/engage/wger/',
-                style: TextStyle(color: Colors.blue),
-              ),
-            ],
-          ),
-          contentPadding: EdgeInsets.zero,
-          onTap: () async => launchURL('https://hosted.weblate.org/engage/wger/', context),
-        ),
-      ],
     );
   }
 }

lib/widgets/core/app_bar.dart

@@ -17,7 +17,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:wger/providers/auth.dart';
@@ -76,7 +75,13 @@ class MainAppBar extends StatelessWidget with PreferredSizeWidget {
                             );
                           },
                         ),
-                        WgerAboutListTile(),
+                        ListTile(
+                          leading: const Icon(Icons.info),
+                          onTap: () {
+                            Navigator.of(context).pushNamed(AboutPage.routeName);
+                          },
+                          title: const Text('About wger'),
+                        ),
                         const Divider(),
                         ListTile(
                           //dense: true,