feat: implement routing management with go_router integration

Author: orestesgaolin

lib/main.dart

@@ -1,5 +1,7 @@
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_web_plugins/flutter_web_plugins.dart';
+import 'package:go_router/go_router.dart';
 import 'package:url_launcher/url_launcher.dart';
 
 import 'shader_builder.dart';
@@ -11,6 +13,8 @@ import 'shader_screen.dart';
 import 'tv_test_screen.dart';
 
 void main() {
+  usePathUrlStrategy();
+
   runApp(const RgbGlitchDemo());
 }
 
@@ -81,6 +85,52 @@ final shaders = [
   ),
 ];
 
+// Helper function to create URL-safe shader names
+String shaderNameToPath(String name) {
+  return name.toLowerCase().replaceAll(' ', '-');
+}
+
+// Helper function to find shader by path
+ShaderInfo? findShaderByPath(String path) {
+  try {
+    return shaders.firstWhere(
+      (shader) => shaderNameToPath(shader.name) == path,
+    );
+  } catch (e) {
+    return null;
+  }
+}
+
+// Router configuration
+final GoRouter _router = GoRouter(
+  routes: [
+    GoRoute(
+      path: '/',
+      name: 'home',
+      builder: (context, state) => const HomeScreen(),
+    ),
+    GoRoute(
+      path: '/shader/:shaderName',
+      name: 'shader',
+      builder: (context, state) {
+        final shaderName = state.pathParameters['shaderName']!;
+        final shaderInfo = findShaderByPath(shaderName);
+
+        if (shaderInfo == null) {
+          // If shader not found, redirect to home
+          WidgetsBinding.instance.addPostFrameCallback((_) {
+            context.go('/');
+          });
+          return const HomeScreen();
+        }
+
+        return ShaderScreen(shaderInfo: shaderInfo);
+      },
+    ),
+  ],
+  errorBuilder: (context, state) => const HomeScreen(),
+);
+
 // Custom page transition builder that provides no animation (instant transition)
 class _NoTransitionPageTransitionsBuilder extends PageTransitionsBuilder {
   const _NoTransitionPageTransitionsBuilder();
@@ -107,22 +157,27 @@ class RgbGlitchDemo extends StatefulWidget {
 class _RgbGlitchDemoState extends State<RgbGlitchDemo> {
   @override
   Widget build(BuildContext context) {
-    return MaterialApp(
+    return MaterialApp.router(
       debugShowCheckedModeBanner: false,
+      routerConfig: _router,
       theme: ThemeData.dark(useMaterial3: true).copyWith(
-        pageTransitionsTheme: kIsWeb 
-          ? PageTransitionsTheme(
-              builders: {
-                TargetPlatform.android: const _NoTransitionPageTransitionsBuilder(),
-                TargetPlatform.iOS: const _NoTransitionPageTransitionsBuilder(),
-                TargetPlatform.linux: const _NoTransitionPageTransitionsBuilder(),
-                TargetPlatform.macOS: const _NoTransitionPageTransitionsBuilder(),
-                TargetPlatform.windows: const _NoTransitionPageTransitionsBuilder(),
-              },
-            )
-          : null,
+        pageTransitionsTheme: kIsWeb
+            ? PageTransitionsTheme(
+                builders: {
+                  TargetPlatform.android:
+                      const _NoTransitionPageTransitionsBuilder(),
+                  TargetPlatform.iOS:
+                      const _NoTransitionPageTransitionsBuilder(),
+                  TargetPlatform.linux:
+                      const _NoTransitionPageTransitionsBuilder(),
+                  TargetPlatform.macOS:
+                      const _NoTransitionPageTransitionsBuilder(),
+                  TargetPlatform.windows:
+                      const _NoTransitionPageTransitionsBuilder(),
+                },
+              )
+            : null,
       ),
-      home: const HomeScreen(),
     );
   }
 }
@@ -150,12 +205,8 @@ class HomeScreen extends StatelessWidget {
               return _ShaderTile(
                 shaderInfo: shaderInfo,
                 onTap: () {
-                  Navigator.of(context).push(
-                    MaterialPageRoute(
-                      builder: (context) =>
-                          ShaderScreen(shaderInfo: shaderInfo),
-                    ),
-                  );
+                  final shaderPath = shaderNameToPath(shaderInfo.name);
+                  context.go('/shader/$shaderPath');
                 },
               );
             },

pubspec.lock

@@ -84,10 +84,18 @@ packages:
     source: sdk
     version: "0.0.0"
   flutter_web_plugins:
-    dependency: transitive
+    dependency: "direct main"
     description: flutter
     source: sdk
     version: "0.0.0"
+  go_router:
+    dependency: "direct main"
+    description:
+      name: go_router
+      sha256: f02fd7d2a4dc512fec615529824fdd217fecb3a3d3de68360293a551f21634b3
+      url: "https://pub.dev"
+    source: hosted
+    version: "14.8.1"
   leak_tracker:
     dependency: transitive
     description:
@@ -120,6 +128,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "5.1.1"
+  logging:
+    dependency: transitive
+    description:
+      name: logging
+      sha256: c8245ada5f1717ed44271ed1c26b8ce85ca3228fd2ffdb75468ab01979309d61
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.3.0"
   matcher:
     dependency: transitive
     description:

pubspec.yaml

@@ -11,12 +11,15 @@ environment:
 dependencies:
   flutter:
     sdk: flutter
+  flutter_web_plugins:
+    sdk: flutter
   flutter_shaders: ^0.1.0
 
   # The following adds the Cupertino Icons font to your application.
   cupertino_icons: ^1.0.8
   url_launcher: ^6.3.2
   path: ^1.9.1
+  go_router: ^14.6.2
 
 dev_dependencies:
   flutter_test: