Simplify the website since getting started looks bad (#15)

ubuntu-flutter-community · Feb 29, 2024 · d5f8bca · d5f8bca
1 parent 5d9c699
commit d5f8bca
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 163 deletions.
diff --git a/lib/getting_started_page.dart b/lib/getting_started_page.dart
diff --git a/lib/home_page.dart b/lib/home_page.dart
@@ -1,12 +1,7 @@
 import 'package:flutter/material.dart';
-import 'package:path/path.dart' as p;
 import 'package:shimmer/shimmer.dart';
-import 'package:universal_html/html.dart' as html;
 
-import 'build_context_x.dart';
 import 'constants.dart';
-import 'plated_icon.dart';
-import 'repositories.dart';
 import 'screen_message.dart';
 import 'sub_page.dart';
 
@@ -16,44 +11,28 @@ class HomePage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return SubPage(
-      body: SizedBox(
-        height: context.mq.size.height,
-        child: ListView(
+      body: Center(
+        child: Padding(
           padding: const EdgeInsets.all(50),
-          children: [
-            ScreenMessage(
-              title: Shimmer.fromColors(
-                loop: 1,
-                period: const Duration(seconds: 3),
-                baseColor: kBaseColor,
-                highlightColor: kHighlightColor,
-                child: const Text(kWelcomeTitle),
-              ),
-              subTitle: Shimmer.fromColors(
-                baseColor: kBaseColor,
-                highlightColor: kHighlightColor,
-                child: InkWell(
-                  borderRadius: BorderRadius.circular(5),
-                  onTap: () => Navigator.of(context).pushNamed('/projects'),
-                  child: const Text(kWelcomeButtonText),
-                ),
-              ),
-              label: const Text(kAppTitle),
+          child: ScreenMessage(
+            title: Shimmer.fromColors(
+              loop: 1,
+              period: const Duration(seconds: 3),
+              baseColor: kBaseColor,
+              highlightColor: kHighlightColor,
+              child: const Text(kWelcomeTitle),
             ),
-            ...repositories.map(
-              (e) => ScreenMessage(
-                label: Text(e.$1),
-                title: Text(e.$2),
-                subTitle: Text(e.$3),
-                icon: PlatedIcon(
-                  onTap: () =>
-                      html.window.open(p.join(kGitHubPrefix, e.$1, e.$2), ''),
-                  icon: e.$4,
-                  shape: e.$2 == 'settings' ? BoxShape.circle : null,
-                ),
+            subTitle: Shimmer.fromColors(
+              baseColor: kBaseColor,
+              highlightColor: kHighlightColor,
+              child: InkWell(
+                borderRadius: BorderRadius.circular(5),
+                onTap: () => Navigator.of(context).pushNamed('/projects'),
+                child: const Text(kWelcomeButtonText),
               ),
             ),
-          ],
+            label: const Text(kAppTitle),
+          ),
         ),
       ),
     );

diff --git a/lib/main.dart b/lib/main.dart
@@ -3,7 +3,6 @@ import 'package:github/github.dart';
 import 'package:ubuntu_service/ubuntu_service.dart';
 import 'constants.dart';
 import 'contributor_service.dart';
-import 'getting_started_page.dart';
 import 'globals.dart';
 import 'home_page.dart';
 import 'contributors_page.dart';
@@ -47,7 +46,6 @@ class _MainAppState extends State<MainApp> {
         '/': (context) => const HomePage(),
         '/contributors': (context) => const ContributorsPage(),
         '/projects': (context) => const ProjectsPage(),
-        '/gettingstarted': (context) => const GettingStartedPage(),
       },
     );
   }

diff --git a/lib/projects_list.dart b/lib/projects_list.dart
@@ -1,7 +1,10 @@
 import 'package:flutter/material.dart';
 import 'package:path/path.dart' as p;
 import 'package:universal_html/html.dart' as html;
+import 'package:yaru_widgets/constants.dart';
+import 'package:yaru_widgets/widgets.dart';
 
+import 'build_context_x.dart';
 import 'constants.dart';
 import 'repositories.dart';
 
@@ -10,27 +13,52 @@ class ProjectsList extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return ListView.builder(
-      itemCount: repositories.length,
-      itemBuilder: (context, index) {
-        final repo = repositories.elementAt(index);
-        return ListTile(
-          contentPadding:
-              const EdgeInsets.symmetric(horizontal: 35, vertical: 10),
-          leading: Icon(repo.$4),
-          title: Text(repo.$2),
-          subtitle: Text(repo.$3),
-          trailing: SizedBox(
-            width: 80,
-            child: Text(
-              repo.$1,
-              overflow: TextOverflow.visible,
+    final smallWindow = context.mq.size.width < 700;
+    return Center(
+      child: SingleChildScrollView(
+        padding: smallWindow ? EdgeInsets.zero : const EdgeInsets.all(50),
+        child: Center(
+          child: SizedBox(
+            width: 600,
+            child: ClipRRect(
+              borderRadius: BorderRadius.circular(kYaruContainerRadius),
+              child: YaruBorderContainer(
+                border: Border.all(
+                  color: smallWindow
+                      ? Colors.transparent
+                      : context.theme.dividerColor,
+                ),
+                padding: EdgeInsets.zero,
+                child: Column(
+                  mainAxisSize: MainAxisSize.min,
+                  crossAxisAlignment: CrossAxisAlignment.center,
+                  children: List.generate(repositories.length, (index) {
+                    final repo = repositories.elementAt(index);
+                    return ListTile(
+                      contentPadding: const EdgeInsets.symmetric(
+                        horizontal: 20,
+                        vertical: 5,
+                      ),
+                      leading: Icon(repo.$4),
+                      title: Text(repo.$2),
+                      subtitle: Text(repo.$3),
+                      trailing: SizedBox(
+                        width: 80,
+                        child: Text(
+                          repo.$1,
+                          overflow: TextOverflow.visible,
+                        ),
+                      ),
+                      onTap: () => html.window
+                          .open(p.join(kGitHubPrefix, repo.$1, repo.$2), ''),
+                    );
+                  }),
+                ),
+              ),
             ),
           ),
-          onTap: () =>
-              html.window.open(p.join(kGitHubPrefix, repo.$1, repo.$2), ''),
-        );
-      },
+        ),
+      ),
     );
   }
 }
diff --git a/lib/repositories.dart b/lib/repositories.dart
@@ -4,6 +4,12 @@ import 'package:yaru_icons/yaru_icons.dart';
 import 'constants.dart';
 
 final repositories = <(String, String, String, IconData)>{
+  (
+    kUfcOrgaName,
+    'samples',
+    'Template Projects to get you started!',
+    YaruIcons.rule_and_pen,
+  ),
   (
     kUfcOrgaName,
     'musicpod',

diff --git a/lib/screen_message.dart b/lib/screen_message.dart
@@ -1,7 +1,6 @@
 import 'package:flutter/material.dart';
 
 import 'build_context_x.dart';
-import 'constants.dart';
 
 class ScreenMessage extends StatefulWidget {
   const ScreenMessage({
@@ -33,7 +32,6 @@ class _ScreenMessageState extends State<ScreenMessage> {
   @override
   Widget build(BuildContext context) {
     final size = context.mq.size;
-    final height = size.height;
     final width = size.width;
 
     final smallWindow = width < 600;
@@ -99,11 +97,7 @@ class _ScreenMessageState extends State<ScreenMessage> {
     return AnimatedOpacity(
       opacity: _opacity,
       duration: const Duration(seconds: 3),
-      child: Padding(
-        padding: EdgeInsets.only(
-          top: (height / 2) - (2.3 * kToolBarHeight),
-          bottom: height / 2,
-        ),
+      child: Center(
         child: Row(
           crossAxisAlignment: CrossAxisAlignment.center,
           mainAxisAlignment: MainAxisAlignment.center,

diff --git a/lib/top_menu_entry.dart b/lib/top_menu_entry.dart
@@ -36,10 +36,6 @@ List<Widget> createTopMenu(BuildContext context) => [
         text: 'Contributors',
         onPressed: () => Navigator.of(context).pushNamed('/contributors'),
       ),
-      TopMenuEntry(
-        text: 'Getting Started',
-        onPressed: () => Navigator.of(context).pushNamed('/gettingstarted'),
-      ),
       const SizedBox(
         width: kYaruPagePadding,
       ),