Free copy-paste Loader 010 for Flutter: a ready-to-use loader widget with full Dart source code and a live preview. Works on mobile & desktop. No external packages.
Copy the Dart code below into a new file in your Flutter project (for example lib/widgets/loader_010.dart) and use the widget anywhere in your widget tree.
import 'dart:math' as math;
import 'package:flutter/material.dart';
class Loader010 extends StatefulWidget {
const Loader010({
super.key,
this.squareSize = 10.0,
this.spacing = 10.0,
this.color = const Color(0xFFDDDDDD),
this.duration = const Duration(milliseconds: 1000),
});
final double squareSize;
final double spacing;
final Color color;
final Duration duration;
@override
State<Loader010> createState() => _Loader010State();
}
class _Loader010State extends State<Loader010>
with SingleTickerProviderStateMixin {
late final AnimationController _controller;
@override
void initState() {
super.initState();
_controller = AnimationController(vsync: this, duration: widget.duration)
..repeat();
}
@override
void didUpdateWidget(covariant Loader010 oldWidget) {
super.didUpdateWidget(oldWidget);
if (oldWidget.duration != widget.duration) {
_controller.duration = widget.duration;
}
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
final s = widget.squareSize;
final gap = widget.spacing;
final totalWidth = 3 * s + 2 * gap;
return SizedBox(
width: totalWidth,
height: totalWidth,
child: AnimatedBuilder(
animation: _controller,
builder: (context, _) {
return Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: List.generate(3, (row) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: List.generate(3, (col) {
final index = row * 3 + col;
final delay = (index * 75) / widget.duration.inMilliseconds;
final t = (_controller.value - delay) % 1.0;
final adjustedT = t < 0 ? t + 1.0 : t;
final opacity =
(0.5 - 0.5 * math.cos(adjustedT * 2 * math.pi)).clamp(
0.0,
1.0,
);
return Container(
width: s,
height: s,
color: widget.color.withValues(alpha: opacity),
);
}),
);
}),
);
},
),
);
}
}