feat: Add crt shader

.metadata

@@ -4,7 +4,7 @@
 # This file should be version controlled.
 
 version:
-  revision: d3d8effc686d73e0114d71abdcccef63fa1f25d2
+  revision: 9cd3d0d9ff05768afa249e036acc66e8abe93bff
   channel: stable
 
 project_type: app
@@ -13,11 +13,26 @@ project_type: app
 migration:
   platforms:
     - platform: root
-      create_revision: d3d8effc686d73e0114d71abdcccef63fa1f25d2
-      base_revision: d3d8effc686d73e0114d71abdcccef63fa1f25d2
+      create_revision: 9cd3d0d9ff05768afa249e036acc66e8abe93bff
+      base_revision: 9cd3d0d9ff05768afa249e036acc66e8abe93bff
+    - platform: android
+      create_revision: 9cd3d0d9ff05768afa249e036acc66e8abe93bff
+      base_revision: 9cd3d0d9ff05768afa249e036acc66e8abe93bff
+    - platform: ios
+      create_revision: 9cd3d0d9ff05768afa249e036acc66e8abe93bff
+      base_revision: 9cd3d0d9ff05768afa249e036acc66e8abe93bff
+    - platform: linux
+      create_revision: 9cd3d0d9ff05768afa249e036acc66e8abe93bff
+      base_revision: 9cd3d0d9ff05768afa249e036acc66e8abe93bff
     - platform: macos
-      create_revision: d3d8effc686d73e0114d71abdcccef63fa1f25d2
-      base_revision: d3d8effc686d73e0114d71abdcccef63fa1f25d2
+      create_revision: 9cd3d0d9ff05768afa249e036acc66e8abe93bff
+      base_revision: 9cd3d0d9ff05768afa249e036acc66e8abe93bff
+    - platform: web
+      create_revision: 9cd3d0d9ff05768afa249e036acc66e8abe93bff
+      base_revision: 9cd3d0d9ff05768afa249e036acc66e8abe93bff
+    - platform: windows
+      create_revision: 9cd3d0d9ff05768afa249e036acc66e8abe93bff
+      base_revision: 9cd3d0d9ff05768afa249e036acc66e8abe93bff
 
   # User provided section
 

lib/leaderboard/view/leaderboard_page.dart

@@ -9,9 +9,9 @@ import 'package:lightrunners/utils/gamepad_navigator.dart';
 import 'package:lightrunners/widgets/widgets.dart';
 
 const _maxScoreDigits = 3;
-const _maxCharactersScoreBoard = 32;
-const _lightrunnersInfoBlob = '''
-  Light Runners was made with 💙 by Blue Fire and Invertase for Fluttercon 2023
+const _maxCharactersScoreBoard = 26;
+const _lightrunnersInfoBlob =
+    '''Light Runners was made with 💙 by Blue Fire and Invertase for Fluttercon 2023
 ''';
 final _leaderboard = [
   (name: 'Erick', score: 100),
@@ -97,7 +97,8 @@ class _LeaderboardPageState extends State<LeaderboardPage> {
                       _toScoreboardLine(entry),
                       style: TextStyle(
                         fontFamily: major,
-                        fontSize: 28,
+                        fontWeight: FontWeight.bold,
+                        fontSize: 38,
                         color: Colors.white,
                       ),
                     )

lib/main.dart

@@ -1,22 +1,26 @@
 import 'package:flame/flame.dart';
 import 'package:flutter/material.dart';
 import 'package:google_fonts/google_fonts.dart';
+import 'package:lightrunners/shaders/shaders.dart';
 import 'package:lightrunners/title/title.dart';
 
 void main() async {
   WidgetsFlutterBinding.ensureInitialized();
   await Flame.device.fullScreen();
   runApp(
-    MaterialApp(
-      debugShowCheckedModeBanner: false,
-      home: const TitlePage(),
-      themeMode: ThemeMode.dark,
-      theme: ThemeData(
-        colorScheme: const ColorScheme.dark(
-          primary: Color(0xFFE0D932),
-          secondary: Color(0xFFE032CF),
+    CRTShader(
+      enabled: true,
+      child: MaterialApp(
+        debugShowCheckedModeBanner: false,
+        home: const TitlePage(),
+        themeMode: ThemeMode.dark,
+        theme: ThemeData(
+          colorScheme: const ColorScheme.dark(
+            primary: Color(0xFFE0D932),
+            secondary: Color(0xFFE032CF),
+          ),
+          textTheme: GoogleFonts.bungeeShadeTextTheme(),
         ),
-        textTheme: GoogleFonts.bungeeShadeTextTheme(),
       ),
     ),
   );

lib/shaders/crt.dart

@@ -0,0 +1,103 @@
+import 'dart:ui' as ui;
+
+import 'package:flutter/material.dart';
+import 'package:flutter_shaders/flutter_shaders.dart';
+import 'package:vector_math/vector_math.dart' hide Colors;
+
+class CRTShader extends StatelessWidget {
+  const CRTShader({
+    required this.enabled,
+    required this.child,
+    super.key,
+  });
+
+  final bool enabled;
+  final Widget child;
+
+  @override
+  Widget build(BuildContext context) {
+    if (!enabled) {
+      return child;
+    }
+
+    return ColoredBox(
+      color: Colors.black,
+      child: ImageBuilder(
+        assetImageProvider: const AssetImage('assets/images/liltex_3.jpg'),
+        (context, pixelTexture) {
+          return ShaderBuilder(
+            assetKey: 'shaders/super_crt.glsl',
+            child: child,
+            (context, shader, child) {
+              return AnimatedSampler(
+                (image, size, canvas) {
+                  shader
+                    ..setFloatUniforms((value) {
+                      value
+                        ..setSize(size)
+                        ..setFloat(1)
+                        ..setVector(Vector2(2, 3));
+                    })
+                    ..setImageSampler(0, pixelTexture)
+                    ..setImageSampler(1, image);
+
+                  canvas.drawRect(
+                    Offset.zero & size,
+                    Paint()..shader = shader,
+                  );
+                },
+                child: child!,
+              );
+            },
+          );
+        },
+      ),
+    );
+  }
+}
+
+class ImageBuilder extends StatefulWidget {
+  const ImageBuilder(
+    this.builder, {
+    required this.assetImageProvider,
+    super.key,
+  });
+
+  final Widget Function(BuildContext context, ui.Image image) builder;
+  final ImageProvider assetImageProvider;
+
+  @override
+  State<ImageBuilder> createState() => _ImageBuilderState();
+}
+
+class _ImageBuilderState extends State<ImageBuilder> {
+  ui.Image? image;
+
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+
+    getImage();
+  }
+
+  Future<void> getImage() async {
+    widget.assetImageProvider.resolve(ImageConfiguration.empty).addListener(
+      ImageStreamListener((info, synchronousCall) {
+        setState(() {
+          image = info.image;
+        });
+      }),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final image = this.image;
+
+    if (image == null) {
+      return const SizedBox.shrink();
+    }
+
+    return widget.builder(context, image);
+  }
+}

lib/shaders/shaders.dart

@@ -0,0 +1 @@
+export 'crt.dart';

lib/widgets/controller_menu.dart

@@ -55,7 +55,7 @@ class _ControllerMenuState extends State<ControllerMenu> {
   @override
   Widget build(BuildContext context) {
     return SizedBox(
-      width: 250,
+      width: 340,
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         crossAxisAlignment: CrossAxisAlignment.start,
@@ -76,7 +76,7 @@ class _ControllerMenuState extends State<ControllerMenu> {
                       option.name,
                       style: TextStyle(
                         fontFamily: GoogleFonts.bungee().fontFamily,
-                        fontSize: 22,
+                        fontSize: 36,
                         color: Colors.white,
                       ),
                     ),

macos/Podfile.lock

@@ -32,4 +32,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 236401fc2c932af29a9fcf0e97baeeb2d750d367
 
-COCOAPODS: 1.12.0
+COCOAPODS: 1.12.1

pubspec.lock

@@ -211,6 +211,14 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  flutter_shaders:
+    dependency: "direct main"
+    description:
+      name: flutter_shaders
+      sha256: "02750b545c01ff4d8e9bbe8f27a7731aa3778402506c67daa1de7f5fc3f4befe"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.1.2"
   flutter_test:
     dependency: "direct dev"
     description: flutter
@@ -653,7 +661,7 @@ packages:
     source: hosted
     version: "3.0.7"
   vector_math:
-    dependency: transitive
+    dependency: "direct main"
     description:
       name: vector_math
       sha256: "80b3257d1492ce4d091729e3a67a60407d227c27241d6927be0130c98e741803"
@@ -726,4 +734,4 @@ packages:
     version: "3.1.1"
 sdks:
   dart: ">=3.0.0 <4.0.0"
-  flutter: ">=3.3.7"
+  flutter: ">=3.7.0-0.0"

pubspec.yaml

@@ -13,9 +13,11 @@ dependencies:
   flame_audio: ^2.0.3
   flutter:
     sdk: flutter
+  flutter_shaders: ^0.1.2
   gamepads: ^0.1.1
   google_fonts: ^4.0.4
   phased: ^0.0.3
+  vector_math: ^2.1.4
 
 dev_dependencies:
   flame_lint: ^1.0.0
@@ -27,6 +29,8 @@ dev_dependencies:
 
 flutter:
   uses-material-design: false
+  shaders:
+    - shaders/super_crt.glsl
   assets:
     - google_fonts/
     - assets/images/