You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
164 lines
4.3 KiB
Dart
164 lines
4.3 KiB
Dart
import 'package:flutter/animation.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:test_sa/extensions/int_extensions.dart';
|
|
import 'package:test_sa/new_views/app_style/app_color.dart';
|
|
|
|
class CircularAnimationWithProgressIndicator extends StatefulWidget {
|
|
Widget child;
|
|
CircularAnimationWithProgressIndicator({Key key, this.child}) : super(key: key);
|
|
@override
|
|
_CircularAnimationWithProgressIndicatorState createState() =>
|
|
_CircularAnimationWithProgressIndicatorState();
|
|
}
|
|
|
|
class _CircularAnimationWithProgressIndicatorState
|
|
extends State<CircularAnimationWithProgressIndicator>
|
|
with SingleTickerProviderStateMixin {
|
|
AnimationController _controller;
|
|
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
|
|
// Animation controller for progress indicator
|
|
_controller = AnimationController(
|
|
vsync: this,
|
|
duration: const Duration(seconds: 40), // Duration of one full rotation
|
|
)..repeat(); // Repeat animation continuously
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_controller.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Center(
|
|
child: Stack(
|
|
alignment: Alignment.center,
|
|
children: [
|
|
// Animated CircularProgressIndicator
|
|
AnimatedBuilder(
|
|
animation: _controller,
|
|
builder: (context, child) {
|
|
return Transform.rotate(
|
|
angle: _controller.value * 2 * 3.1416, // Full rotation
|
|
child: child,
|
|
);
|
|
},
|
|
child: SizedBox(
|
|
width: 100.toScreenHeight,
|
|
height: 100.toScreenWidth,
|
|
child: const CircularProgressIndicator(
|
|
strokeWidth: 3.0,
|
|
backgroundColor: AppColor.primary30,
|
|
|
|
value: null, // Infinite animation
|
|
),
|
|
),
|
|
),
|
|
|
|
// Static container in the center
|
|
widget.child?? const SizedBox(),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class CircularAnimatedContainer extends StatefulWidget {
|
|
Widget child;
|
|
|
|
CircularAnimatedContainer({Key key, @required this.child}) : super(key: key);
|
|
@override
|
|
_CircularAnimatedContainerState createState() => _CircularAnimatedContainerState();
|
|
}
|
|
|
|
class _CircularAnimatedContainerState extends State<CircularAnimatedContainer>
|
|
with SingleTickerProviderStateMixin {
|
|
AnimationController _controller;
|
|
Animation<double> _animation;
|
|
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
_controller = AnimationController(
|
|
duration: const Duration(seconds: 2),
|
|
vsync: this,
|
|
)..repeat();
|
|
|
|
_animation = CurvedAnimation(
|
|
parent: _controller,
|
|
curve: Curves.easeInOut, // Applies the ease-in-out effect
|
|
);
|
|
// Repeats animation
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_controller.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Center(
|
|
child: Stack(
|
|
alignment: Alignment.center,
|
|
children: [
|
|
widget.child,
|
|
AnimatedBuilder(
|
|
animation: _animation,
|
|
builder: (context, child) {
|
|
return CustomPaint(
|
|
painter: CircularProgressPainter(
|
|
progress: _animation.value),
|
|
size: Size(100.toScreenHeight, 100.toScreenWidth),
|
|
);
|
|
},
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class CircularProgressPainter extends CustomPainter {
|
|
final double progress;
|
|
|
|
CircularProgressPainter({@required this.progress});
|
|
@override
|
|
void paint(Canvas canvas, Size size) {
|
|
|
|
|
|
final Paint paint = Paint()
|
|
..color = AppColor.primary80
|
|
..style = PaintingStyle.stroke
|
|
..strokeWidth = 3
|
|
..strokeCap = StrokeCap.round;
|
|
|
|
final center = Offset(size.width / 2, size.height / 2);
|
|
final radius = size.width / 2.05;
|
|
final double startAngle = 2.5 * 3.141592653589793 * progress;
|
|
final double sweepAngle = 2 * 3.141592653589793 * progress;
|
|
// const double startAngle = -90 * (3.141592653589793 / 180);
|
|
// final double sweepAngle = 2.05 * 3.141592653589793 * progress;
|
|
|
|
canvas.drawArc(
|
|
Rect.fromCircle(center: center, radius: radius),
|
|
startAngle,
|
|
sweepAngle,
|
|
false,
|
|
paint,
|
|
);
|
|
}
|
|
|
|
@override
|
|
bool shouldRepaint(covariant CustomPainter oldDelegate) {
|
|
return true;
|
|
}
|
|
} |