Use fade transitions on Web, refactor code

mkobuolys · Jan 26, 2024 · 124aaa3 · 124aaa3
1 parent 66707f0
commit 124aaa3
Show file tree

Hide file tree

Showing 11 changed files with 194 additions and 31 deletions.
diff --git a/assets/markdown/composite.md b/assets/markdown/composite.md
@@ -138,7 +138,9 @@ class Directory extends StatelessWidget implements IFile {
   Widget render(BuildContext context) {
     return Theme(
       data: ThemeData(
-        colorScheme: ColorScheme.fromSwatch().copyWith(primary: Colors.black),
+        expansionTileTheme: Theme.of(context)
+            .expansionTileTheme
+            .copyWith(iconColor: Colors.black, textColor: Colors.black),
       ),
       child: Padding(
         padding: const EdgeInsets.only(left: LayoutConstants.paddingS),

diff --git a/assets/markdown/visitor.md b/assets/markdown/visitor.md
@@ -207,7 +207,9 @@ class Directory extends StatelessWidget implements IFile {
   Widget render(BuildContext context) {
     return Theme(
       data: ThemeData(
-        colorScheme: ColorScheme.fromSwatch().copyWith(primary: Colors.black),
+        expansionTileTheme: Theme.of(context)
+            .expansionTileTheme
+            .copyWith(iconColor: Colors.black, textColor: Colors.black),
       ),
       child: Padding(
         padding: const EdgeInsets.only(left: LayoutConstants.paddingS),

diff --git a/lib/data/repositories/design_pattern_categories_repository.g.dart b/lib/data/repositories/design_pattern_categories_repository.g.dart
diff --git a/lib/data/repositories/markdown_repository.g.dart b/lib/data/repositories/markdown_repository.g.dart
diff --git a/lib/design_patterns/visitor/directory.dart b/lib/design_patterns/visitor/directory.dart
@@ -36,7 +36,9 @@ class Directory extends StatelessWidget implements IFile {
   Widget render(BuildContext context) {
     return Theme(
       data: ThemeData(
-        colorScheme: ColorScheme.fromSwatch().copyWith(primary: Colors.black),
+        expansionTileTheme: Theme.of(context)
+            .expansionTileTheme
+            .copyWith(iconColor: Colors.black, textColor: Colors.black),
       ),
       child: Padding(
         padding: const EdgeInsets.only(left: LayoutConstants.paddingS),

diff --git a/lib/modules/design_pattern_details/layouts/tabs_layout.dart b/lib/modules/design_pattern_details/layouts/tabs_layout.dart
@@ -46,7 +46,7 @@ class _TabsLayoutState extends State<TabsLayout>
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: DetailsAppBar(designPattern: widget.designPattern),
+      appBar: DetailsAppBar.compact(designPattern: widget.designPattern),
       bottomNavigationBar: BottomNavigationBar(
         currentIndex: _controller.index,
         backgroundColor: lightBackgroundColor,

diff --git a/lib/modules/design_pattern_details/widgets/details_app_bar.dart b/lib/modules/design_pattern_details/widgets/details_app_bar.dart
@@ -1,3 +1,5 @@
+import 'dart:async';
+
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 
@@ -11,26 +13,53 @@ import '../../../widgets/logo_button.dart';
 class DetailsAppBar extends StatelessWidget implements PreferredSizeWidget {
   const DetailsAppBar({
     required this.designPattern,
-  });
+  }) : compact = false;
+
+  const DetailsAppBar.compact({
+    required this.designPattern,
+  }) : compact = true;
 
   final DesignPattern designPattern;
+  final bool compact;
+
+  void _openArticle() {
+    unawaited(UrlLauncher.launchUrl(designPattern.articleUrl));
+  }
 
   @override
   Widget build(BuildContext context) {
+    const color = Colors.black;
+
     return AppBar(
       automaticallyImplyLeading: false,
       backgroundColor: lightBackgroundColor,
-      leading: !kIsWeb ? const PlatformBackButton(color: Colors.black) : null,
+      leading: !kIsWeb ? const PlatformBackButton(color: color) : null,
       title: Text(
         designPattern.title,
-        style: const TextStyle(color: Colors.black),
+        style: const TextStyle(color: color),
       ),
       actions: [
         Padding(
           padding: const EdgeInsets.only(right: LayoutConstants.paddingM),
-          child: LogoButton(
-            onPressed: () => UrlLauncher.launchUrl(designPattern.articleUrl),
-          ),
+          child: !compact
+              ? TextButton.icon(
+                  onPressed: _openArticle,
+                  icon: Image.asset('assets/images/logo.png', width: 24.0),
+                  label: Row(
+                    children: [
+                      Text(
+                        'Read blog post',
+                        style: Theme.of(context)
+                            .textTheme
+                            .bodyLarge
+                            ?.copyWith(color: color),
+                      ),
+                      const SizedBox(width: LayoutConstants.spaceM),
+                      const Icon(Icons.open_in_new, size: 16.0, color: color),
+                    ],
+                  ),
+                )
+              : LogoButton(onPressed: _openArticle),
         ),
       ],
     );

diff --git a/lib/navigation/router.dart b/lib/navigation/router.dart
@@ -1,4 +1,5 @@
-import 'package:flutter/widgets.dart';
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 import 'package:riverpod_annotation/riverpod_annotation.dart';
 
@@ -20,19 +21,47 @@ GoRouter router(_) => GoRouter(
   ],
 )
 @immutable
-class MainMenuRoute extends GoRouteData {
+class MainMenuRoute extends GoRouteData with _CustomTransitionPageMixin {
   const MainMenuRoute();
 
   @override
-  Widget build(_, __) => const MainMenuPage();
+  Page<void> buildPage(BuildContext context, GoRouterState state) {
+    const child = MainMenuPage();
+
+    return buildCustomTransitionPage(context, state, child);
+  }
 }
 
 @immutable
-class DesignPatternDetailsRoute extends GoRouteData {
+class DesignPatternDetailsRoute extends GoRouteData
+    with _CustomTransitionPageMixin {
   const DesignPatternDetailsRoute(this.id);
 
   final String id;
 
   @override
-  Widget build(_, __) => DesignPatternDetailsPage(id: id);
+  Page<void> buildPage(BuildContext context, GoRouterState state) {
+    final child = DesignPatternDetailsPage(id: id);
+
+    return buildCustomTransitionPage(context, state, child);
+  }
+}
+
+mixin _CustomTransitionPageMixin on GoRouteData {
+  Page<void> buildCustomTransitionPage(
+    BuildContext context,
+    GoRouterState state,
+    Widget child,
+  ) {
+    if (kIsWeb) {
+      return CustomTransitionPage(
+        key: state.pageKey,
+        transitionsBuilder: (context, animation, secondaryAnimation, child) =>
+            FadeTransition(opacity: animation, child: child),
+        child: child,
+      );
+    }
+
+    return MaterialPage(key: state.pageKey, child: child);
+  }
 }
diff --git a/lib/navigation/router.g.dart b/lib/navigation/router.g.dart
diff --git a/lib/widgets/design_patterns/composite/directory.dart b/lib/widgets/design_patterns/composite/directory.dart
@@ -29,7 +29,9 @@ class Directory extends StatelessWidget implements IFile {
   Widget render(BuildContext context) {
     return Theme(
       data: ThemeData(
-        colorScheme: ColorScheme.fromSwatch().copyWith(primary: Colors.black),
+        expansionTileTheme: Theme.of(context)
+            .expansionTileTheme
+            .copyWith(iconColor: Colors.black, textColor: Colors.black),
       ),
       child: Padding(
         padding: const EdgeInsets.only(left: LayoutConstants.paddingS),

diff --git a/lib/widgets/logo_button.dart b/lib/widgets/logo_button.dart
@@ -10,8 +10,7 @@ class LogoButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return IconButton(
-      icon: Image.asset('assets/images/logo.png'),
-      splashRadius: 20.0,
+      icon: Image.asset('assets/images/logo.png', width: 24.0),
       onPressed: onPressed,
     );
   }