// main.dart
import 'dart:ui';

import 'package:flutter/material.dart';

void main() async {
  final shader = await FragmentProgram.fromAsset('shaders/circle.frag');

  runApp(MainApp(shader: shader));
}

class MainApp extends StatefulWidget {
  const MainApp({super.key, required this.shader});

  final FragmentProgram shader;

  @override
  State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> with SingleTickerProviderStateMixin {
  late final animationController = AnimationController(
    vsync: this,
    lowerBound: 0,
    upperBound: 10,
    duration: Duration(seconds: 2),
  )..repeat(reverse: true);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ListenableBuilder(
        listenable: animationController,
        builder: (context, child) {
          return Scaffold(
            body: Stack(
              children: [
                const Center(child: FlutterLogo(size: 100)),
                Positioned.fill(
                  child: LayoutBuilder(
                    builder: (context, constraints) {
                      return BackdropFilter(
                        filter: ImageFilter.compose(
                          inner: ImageFilter.blur(
                            sigmaX: animationController.value,
                            sigmaY: animationController.value,
                            tileMode: TileMode.clamp,
                          ),
                          outer: ImageFilter.shader(
                            widget.shader.fragmentShader()
                              ..setFloat(2, 100) // uCirclePos.x (center)
                              ..setFloat(3, 100) // uCirclePos.y (center)
                              ..setFloat(4, 100.0), // uCircleRadius
                          ),
                        ),
                        child: Center(
                          child: Text(
                            animationController.value.toStringAsFixed(2),
                          ),
                        ),
                      );
                    },
                  ),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}