Free copy-paste Loader 001 for Flutter: a ready-to-use loader widget with full Dart source code and a live preview. Works on android & ios & web & windows & macos &…
Copy the Dart code below into a new file in your Flutter project (for example lib/widgets/loader_001.dart) and use the widget anywhere in your widget tree.
import 'dart:math';
import 'package:flutter/material.dart';
class Loader001 extends StatefulWidget {
final Color color;
final double size;
const Loader001({
super.key,
this.color = Colors.blueAccent,
this.size = 50.0,
});
@override
State<Loader001> createState() => _Loader001State();
}
class _Loader001State extends State<Loader001>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 1000),
)..repeat();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _controller,
builder: (context, child) {
return Transform.rotate(
angle: _controller.value * 2 * pi,
child: SizedBox(
width: widget.size,
height: widget.size,
child: Stack(
children: [
Positioned(top: 0, left: widget.size / 4, child: _buildOrb()),
Positioned(
bottom: 0,
right: widget.size / 4,
child: _buildOrb(),
),
],
),
),
);
},
);
}
Widget _buildOrb() {
return Container(
width: widget.size / 2.5,
height: widget.size / 2.5,
decoration: BoxDecoration(
color: widget.color,
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: widget.color.withValues(alpha: 0.5),
blurRadius: 10,
spreadRadius: 2,
),
],
),
);
}
}