Skip to content

Commit

Permalink
shader
Browse files Browse the repository at this point in the history
  • Loading branch information
danemadsen committed Jun 27, 2024
1 parent d5a56c0 commit 7f08aee
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 6 deletions.
7 changes: 6 additions & 1 deletion lib/ui/shared/chat_widgets/chat_message.dart
Original file line number Diff line number Diff line change
Expand Up @@ -229,17 +229,22 @@ class _ChatMessageWidgetState extends State<ChatMessageWidget> with SingleTicker
}

Widget buildTypingIndicatorBar(int flex) {
double durationFactor = (100 - flex) / 100.0;
double animationOffset = Random().nextDouble();

return Row(
children: [
Expanded(
flex: 100 - flex,
child: WaveGradientShader(
durationFactor: durationFactor,
animationOffset: animationOffset,
child: Container(
margin: const EdgeInsets.symmetric(vertical: 5),
height: 25,
width: 25,
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surfaceDim,
color: Colors.white,
borderRadius: BorderRadius.circular(10),
),
),
Expand Down
26 changes: 21 additions & 5 deletions lib/ui/shared/shaders/wave_gradient_shader.dart
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,15 @@ import 'package:flutter/material.dart';

class WaveGradientShader extends StatefulWidget {
final Widget child;
const WaveGradientShader({required this.child, super.key});
final double durationFactor;
final double animationOffset;

const WaveGradientShader({
required this.child,
required this.durationFactor,
required this.animationOffset,
super.key,
});

@override
State<WaveGradientShader> createState() => _WaveGradientShaderState();
Expand All @@ -15,9 +23,10 @@ class _WaveGradientShaderState extends State<WaveGradientShader> with SingleTick
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(seconds: 2),
value: widget.animationOffset,
duration: Duration(milliseconds: (3000 * widget.durationFactor).clamp(2000, 4000).toInt()),
vsync: this,
)..repeat(reverse: true);
)..repeat();
}

@override
Expand All @@ -28,6 +37,9 @@ class _WaveGradientShaderState extends State<WaveGradientShader> with SingleTick

@override
Widget build(BuildContext context) {
final boundary = Theme.of(context).colorScheme.surfaceDim;
final wave = Theme.of(context).colorScheme.secondary;

return AnimatedBuilder(
animation: _controller,
builder: (context, child) {
Expand All @@ -36,8 +48,12 @@ class _WaveGradientShaderState extends State<WaveGradientShader> with SingleTick
return LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
stops: [0.0, _controller.value, 1.0],
colors: const [Colors.transparent, Colors.blue, Colors.transparent],
stops: [0.0, _controller.value, 1.0],
colors: [
boundary,
wave,
boundary,
],
).createShader(bounds);
},
child: widget.child,
Expand Down

0 comments on commit 7f08aee

Please sign in to comment.