flutteranimation

how to make background animation with stripes


Button example

I need to implement button animation like this. Please help if any plugin or class avaliable on Flutter.

Need to button animation like this when i have click the button. Please help me to implement this.


Solution

  • you can use shaders I'm using Flutter 3.7.8

    enter image description here

    shaders/simple.frag

    #version 460 core
    
    #include <flutter/runtime_effect.glsl>
    
    precision mediump float;
    
    layout(location = 0) uniform float uAnimation;
    layout(location = 1) uniform float uResolutionX;
    layout(location = 2) uniform float uResolutionY;
    
    out vec4 fragColor;
    
    void main() {
      vec2 st = FlutterFragCoord().xy / vec2(uResolutionX, uResolutionY);
      float angle = 3.14159 / 3; 
      float frequency = 5; 
    
      st.x += uAnimation * 10;
    
      float pattern = smoothstep(0, 0, sin((st.x * cos(angle) + st.y * sin(angle)) * frequency * 3.14159));
    
      vec3 color1 = vec3(0.798, 0.873, 0.621);
      vec3 color2 = vec3(0.844, 0.904, 0.724);
      vec3 color = mix(color1, color2, pattern);
    
      fragColor = vec4(color, 1.0);
    }
    
    import 'dart:ui' as ui;
    
    import 'package:flutter/material.dart';
    import 'package:flutter_shaders/flutter_shaders.dart';
    
    void main() {
      runApp(const MyApp());
    }
    
    class MyApp extends StatelessWidget {
      const MyApp({super.key});
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Simple Shader Demo',
          theme: ThemeData(
            colorSchemeSeed: Colors.blue,
            useMaterial3: true,
          ),
          home: const MyHomePage(),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      const MyHomePage({super.key});
    
      @override
      State<MyHomePage> createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage>
        with SingleTickerProviderStateMixin {
      late AnimationController _controller;
    
      @override
      void initState() {
        super.initState();
    
        _controller = AnimationController(
          duration: const Duration(seconds: 10),
          vsync: this,
        )..addListener(() {
            setState(() {});
          });
        // _controller.repeat();
        _controller.forward();
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: const Text('Simple Shader Demo'),
          ),
          body: Center(
            child: ClipRRect(
              borderRadius: BorderRadius.circular(10),
              child: SizedBox(
                height: 100,
                width: 400,
                child: AnimatedBuilder(
                    animation: _controller,
                    builder: (context, snapshot) {
                      return ShaderBuilder(
                        assetKey: 'shaders/simple.frag',
                        (context, shader, child) {
                          return CustomPaint(
                            size: MediaQuery.of(context).size,
                            painter: ShaderPainter(
                              shader: shader,
                              value: _controller.value,
                            ),
                            child: child,
                          );
                        },
                        child: const Center(
                          child: Text(
                            'Save',
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 30,
                              fontWeight: FontWeight.w800,
                            ),
                          ),
                        ),
                      );
                    }),
              ),
            ),
          ),
        );
      }
    }
    
    class ShaderPainter extends CustomPainter {
      ShaderPainter({required this.shader, required this.value});
      ui.FragmentShader shader;
    
      final double value;
    
      @override
      void paint(Canvas canvas, Size size) {
        shader.setFloat(0, value);
        shader.setFloat(1, size.height);
        shader.setFloat(2, size.width);
    
        final paint = Paint()..shader = shader;
    
        canvas.drawRect(
          Rect.fromLTWH(0, 0, size.width, size.height),
          paint,
        );
      }
    
      @override
      bool shouldRepaint(covariant ShaderPainter oldDelegate) {
        return oldDelegate.value != value;
      }
    }
    
    

    pubspec.yaml

    ...
    environment:
      sdk: '>=2.19.5 <4.0.0'
    
    dependencies:
      flutter:
        sdk: flutter
      flutter_shaders: ^0.1.0
    
    flutter:
      uses-material-design: true
      shaders:
        - shaders/simple.frag