Improve mobile layout (#6)

ubuntu-flutter-community · Feb 26, 2024 · 8ff149f · 8ff149f
1 parent 9e05310
commit 8ff149f
Show file tree

Hide file tree

Showing 7 changed files with 202 additions and 142 deletions.
diff --git a/lib/contributors_page.dart b/lib/contributors_page.dart
@@ -4,6 +4,7 @@ import 'package:ubuntu_service/ubuntu_service.dart';
 import 'constants.dart';
 import 'contributor_grid.dart';
 import 'contributor_service.dart';
+import 'foot_note.dart';
 import 'header_lead.dart';
 import 'header_title.dart';
 import 'message_fab.dart';
@@ -38,6 +39,7 @@ class _ContributorsPageState extends State<ContributorsPage> {
     return Container(
       decoration: scaffoldGradient(context),
       child: Scaffold(
+        bottomNavigationBar: const FootNote(),
         backgroundColor: Colors.transparent,
         appBar: AppBar(
           backgroundColor: Colors.transparent,

diff --git a/lib/foot_note.dart b/lib/foot_note.dart
@@ -0,0 +1,23 @@
+import 'build_context_x.dart';
+import 'constants.dart';
+import 'package:flutter/material.dart';
+
+class FootNote extends StatelessWidget {
+  const FootNote({
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: [
+        Text(
+          '$kAppTitle · 2024',
+          style: context.theme.textTheme.labelSmall
+              ?.copyWith(color: Colors.white.withOpacity(0.7)),
+        ),
+      ],
+    );
+  }
+}
diff --git a/lib/home_page.dart b/lib/home_page.dart
@@ -5,22 +5,25 @@ import 'package:universal_html/html.dart' as html;
 
 import 'build_context_x.dart';
 import 'constants.dart';
+import 'foot_note.dart';
 import 'header_lead.dart';
 import 'header_title.dart';
 import 'message_fab.dart';
+import 'plated_icon.dart';
 import 'repositories.dart';
 import 'scaffold_gradient.dart';
+import 'screen_message.dart';
 import 'top_menu_entry.dart';
 
 class HomePage extends StatelessWidget {
   const HomePage({super.key});
 
   @override
   Widget build(BuildContext context) {
-    final height = context.mq.size.height;
     return Container(
       decoration: scaffoldGradient(context),
       child: Scaffold(
+        bottomNavigationBar: const FootNote(),
         backgroundColor: Colors.transparent,
         floatingActionButton: const MessageFab(),
         appBar: AppBar(
@@ -37,7 +40,6 @@ class HomePage extends StatelessWidget {
             padding: const EdgeInsets.all(50),
             children: [
               ScreenMessage(
-                height: height,
                 title: Shimmer.fromColors(
                   loop: 1,
                   period: const Duration(seconds: 3),
@@ -58,7 +60,6 @@ class HomePage extends StatelessWidget {
               ),
               ...repositories.map(
                 (e) => ScreenMessage(
-                  height: height,
                   label: Text(e.$1),
                   title: Text(e.$2),
                   subTitle: Text(e.$3),
@@ -77,141 +78,3 @@ class HomePage extends StatelessWidget {
     );
   }
 }
-
-class ScreenMessage extends StatefulWidget {
-  const ScreenMessage({
-    super.key,
-    required this.height,
-    required this.label,
-    required this.title,
-    required this.subTitle,
-    this.icon,
-  });
-
-  final double height;
-  final Widget label, title, subTitle;
-  final Widget? icon;
-
-  @override
-  State<ScreenMessage> createState() => _ScreenMessageState();
-}
-
-class _ScreenMessageState extends State<ScreenMessage> {
-  double _opacity = 0.0;
-
-  @override
-  void initState() {
-    super.initState();
-    Future.delayed(const Duration(milliseconds: 300), () {
-      setState(() => _opacity = 1);
-    });
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return AnimatedOpacity(
-      opacity: _opacity,
-      duration: const Duration(seconds: 3),
-      child: Padding(
-        padding: EdgeInsets.only(
-          top: (widget.height / 2) - (2.3 * kToolBarHeight),
-          bottom: widget.height / 2,
-        ),
-        child: Row(
-          crossAxisAlignment: CrossAxisAlignment.center,
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: [
-            Flexible(
-              child: Column(
-                mainAxisAlignment: MainAxisAlignment.center,
-                crossAxisAlignment: CrossAxisAlignment.start,
-                mainAxisSize: MainAxisSize.min,
-                children: [
-                  DefaultTextStyle(
-                    style: context.theme.textTheme.headlineSmall ??
-                        const TextStyle(),
-                    child: Padding(
-                      padding: const EdgeInsets.only(left: 3, bottom: 5),
-                      child: widget.label,
-                    ),
-                  ),
-                  DefaultTextStyle(
-                    style: context.theme.textTheme.displaySmall ??
-                        const TextStyle(),
-                    child: widget.title,
-                  ),
-                  DefaultTextStyle(
-                    style: context.theme.textTheme.headlineSmall
-                            ?.copyWith(overflow: TextOverflow.visible) ??
-                        const TextStyle(),
-                    child: Padding(
-                      padding: const EdgeInsets.only(
-                        left: 3,
-                        top: 8,
-                      ),
-                      child: ConstrainedBox(
-                        constraints: const BoxConstraints(maxWidth: 400),
-                        child: widget.subTitle,
-                      ),
-                    ),
-                  ),
-                ],
-              ),
-            ),
-            if (widget.icon != null)
-              Padding(
-                padding: const EdgeInsets.only(left: 40),
-                child: widget.icon,
-              ),
-          ],
-        ),
-      ),
-    );
-  }
-}
-
-class PlatedIcon extends StatelessWidget {
-  const PlatedIcon({
-    super.key,
-    required this.icon,
-    this.shape,
-    this.onTap,
-    this.iconSize = 70.0,
-  });
-
-  final IconData icon;
-  final BoxShape? shape;
-  final VoidCallback? onTap;
-  final double iconSize;
-
-  @override
-  Widget build(BuildContext context) {
-    return Opacity(
-      opacity: 0.5,
-      child: Shimmer.fromColors(
-        baseColor: kBaseColor,
-        highlightColor: kHighlightColor,
-        child: InkWell(
-          onTap: onTap,
-          borderRadius:
-              BorderRadius.circular(shape == BoxShape.circle ? iconSize : 10),
-          child: Container(
-            padding: EdgeInsets.all(iconSize / 5.8),
-            decoration: BoxDecoration(
-              shape: shape ?? BoxShape.rectangle,
-              borderRadius:
-                  shape == BoxShape.circle ? null : BorderRadius.circular(10),
-              border: const Border.fromBorderSide(
-                BorderSide(width: 1, color: Colors.white),
-              ),
-            ),
-            child: Icon(
-              icon,
-              size: iconSize,
-            ),
-          ),
-        ),
-      ),
-    );
-  }
-}
diff --git a/lib/plated_icon.dart b/lib/plated_icon.dart
@@ -0,0 +1,49 @@
+import 'constants.dart';
+import 'package:flutter/material.dart';
+import 'package:shimmer/shimmer.dart';
+
+class PlatedIcon extends StatelessWidget {
+  const PlatedIcon({
+    super.key,
+    required this.icon,
+    this.shape,
+    this.onTap,
+    this.iconSize = 70.0,
+  });
+
+  final IconData icon;
+  final BoxShape? shape;
+  final VoidCallback? onTap;
+  final double iconSize;
+
+  @override
+  Widget build(BuildContext context) {
+    return Opacity(
+      opacity: 0.7,
+      child: Shimmer.fromColors(
+        baseColor: kBaseColor,
+        highlightColor: kHighlightColor,
+        child: InkWell(
+          onTap: onTap,
+          borderRadius:
+              BorderRadius.circular(shape == BoxShape.circle ? iconSize : 10),
+          child: Container(
+            padding: EdgeInsets.all(iconSize / 5.8),
+            decoration: BoxDecoration(
+              shape: shape ?? BoxShape.rectangle,
+              borderRadius:
+                  shape == BoxShape.circle ? null : BorderRadius.circular(10),
+              border: const Border.fromBorderSide(
+                BorderSide(width: 1, color: Colors.white),
+              ),
+            ),
+            child: Icon(
+              icon,
+              size: iconSize,
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/projects_list.dart b/lib/projects_list.dart
@@ -20,7 +20,13 @@ class ProjectsList extends StatelessWidget {
           leading: Icon(repo.$4),
           title: Text(repo.$2),
           subtitle: Text(repo.$3),
-          trailing: Text(repo.$1),
+          trailing: SizedBox(
+            width: 80,
+            child: Text(
+              repo.$1,
+              overflow: TextOverflow.visible,
+            ),
+          ),
           onTap: () =>
               html.window.open(p.join(kGitHubPrefix, repo.$1, repo.$2), ''),
         );

diff --git a/lib/projects_page.dart b/lib/projects_page.dart
@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 
 import 'constants.dart';
+import 'foot_note.dart';
 import 'header_lead.dart';
 import 'header_title.dart';
 import 'message_fab.dart';
@@ -16,6 +17,7 @@ class ProjectsPage extends StatelessWidget {
     return Container(
       decoration: scaffoldGradient(context),
       child: Scaffold(
+        bottomNavigationBar: const FootNote(),
         backgroundColor: Colors.transparent,
         floatingActionButton: const MessageFab(),
         appBar: AppBar(