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.
you can use shaders
I'm using Flutter 3.7.8
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