Free copy-paste Loader 006 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_006.dart) and use the widget anywhere in your widget tree.
import 'dart:math' as math;
import 'package:flutter/material.dart';
class Loader006 extends StatefulWidget {
const Loader006({
super.key,
this.size = 72.0,
this.thickness = 8.0,
this.purpleColor = const Color(0xFFBA42FF),
this.cyanColor = const Color(0xFF00E1FF),
this.innerColor = const Color(0xFF212121),
this.duration = const Duration(milliseconds: 1000),
});
final double size;
final double thickness;
final Color purpleColor;
final Color cyanColor;
final Color innerColor;
final Duration duration;
@override
State<Loader006> createState() => _Loader006State();
}
class _Loader006State extends State<Loader006>
with SingleTickerProviderStateMixin {
late final AnimationController _controller;
@override
void initState() {
super.initState();
_controller = AnimationController(vsync: this, duration: widget.duration)
..repeat();
}
@override
void didUpdateWidget(covariant Loader006 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) {
return AnimatedBuilder(
animation: _controller,
builder: (context, _) {
final angle = _controller.value * 2 * math.pi;
return Transform.rotate(
angle: angle,
child: Container(
width: widget.size,
height: widget.size,
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [widget.purpleColor, widget.cyanColor],
stops: const [0.35, 1.0],
),
boxShadow: [
BoxShadow(
color: widget.purpleColor.withValues(alpha: 0.6),
blurRadius: 16,
offset: const Offset(0, -5),
),
BoxShadow(
color: widget.cyanColor.withValues(alpha: 0.6),
blurRadius: 16,
offset: const Offset(0, 5),
),
],
),
child: Center(
child: Container(
width: widget.size - (widget.thickness * 2),
height: widget.size - (widget.thickness * 2),
decoration: BoxDecoration(
color: widget.innerColor,
shape: BoxShape.circle,
),
),
),
),
);
},
);
}
}