mirror of
https://github.com/PranshulGG/WeatherMaster.git
synced 2026-10-22 11:02:53 -05:00
146 lines
12 KiB
Dart
146 lines
12 KiB
Dart
import 'dart:async';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter_svg/flutter_svg.dart';
|
|
|
|
class LoaderWidget extends StatefulWidget {
|
|
final double size;
|
|
final bool isContained;
|
|
|
|
|
|
const LoaderWidget({super.key,
|
|
required this.size,
|
|
required this.isContained
|
|
});
|
|
|
|
@override
|
|
_LoaderWidgetState createState() => _LoaderWidgetState();
|
|
}
|
|
|
|
class _LoaderWidgetState extends State<LoaderWidget> with SingleTickerProviderStateMixin {
|
|
late AnimationController _rotationController;
|
|
int _currentShapeIndex = 0;
|
|
late Timer _shapeTimer;
|
|
late Animation<double> _rotationAnimation;
|
|
bool _isInitialized = false;
|
|
|
|
|
|
|
|
final List<String Function(String)> _svgShapes = [
|
|
(color) => '''<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M22.4683 7.83978C23.1732 6.72008 24.8268 6.72007 25.5317 7.83977L27.2214 10.5237C27.6848 11.2599 28.6197 11.5592 29.4338 11.232L32.4021 10.0391C33.6404 9.54145 34.9781 10.499 34.8804 11.8131L34.6461 14.963C34.5819 15.8269 35.1597 16.6104 36.0135 16.8172L39.1265 17.571C40.4252 17.8855 40.9362 19.4349 40.0731 20.4414L38.0044 22.854C37.437 23.5158 37.437 24.4842 38.0044 25.146L40.0731 27.5586C40.9362 28.5651 40.4252 30.1145 39.1265 30.429L36.0135 31.1828C35.1597 31.3896 34.5819 32.1731 34.6461 33.037L34.8804 36.1869C34.9781 37.501 33.6404 38.4585 32.4021 37.9609L29.4338 36.768C28.6197 36.4408 27.6848 36.7401 27.2214 37.4763L25.5317 40.1602C24.8268 41.2799 23.1732 41.2799 22.4683 40.1602L20.7786 37.4763C20.3152 36.7401 19.3803 36.4408 18.5662 36.768L15.5979 37.9609C14.3596 38.4585 13.0219 37.501 13.1196 36.1869L13.3539 33.037C13.4181 32.1731 12.8403 31.3896 11.9865 31.1828L8.87348 30.429C7.57479 30.1145 7.0638 28.5651 7.92684 27.5586L9.99559 25.146C10.563 24.4842 10.563 23.5158 9.99559 22.854L7.92685 20.4414C7.0638 19.4349 7.57478 17.8855 8.87348 17.571L11.9865 16.8172C12.8403 16.6104 13.4181 15.8269 13.3539 14.963L13.1196 11.8131C13.0219 10.499 14.3596 9.54145 15.5979 10.0391L18.5662 11.232C19.3803 11.5592 20.3152 11.2599 20.7786 10.5237L22.4683 7.83978Z" fill="$color"/>
|
|
</svg>
|
|
|
|
''',
|
|
(color) => '''<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M20.3091 8.60362C20.4924 8.454 20.584 8.37919 20.6677 8.31603C22.6389 6.82799 25.3611 6.82799 27.3323 8.31603C27.416 8.37919 27.5076 8.454 27.6909 8.60362C27.7727 8.67041 27.8136 8.70381 27.8541 8.7356C28.7818 9.46445 29.9191 9.87748 31.0993 9.91409C31.1508 9.91568 31.2037 9.91634 31.3094 9.91765C31.5462 9.92059 31.6646 9.92206 31.7694 9.92733C34.2381 10.0516 36.3234 11.7974 36.8747 14.2015C36.8982 14.3036 36.9202 14.4197 36.9642 14.6518C36.9838 14.7555 36.9937 14.8073 37.0042 14.8576C37.2452 16.0109 37.8504 17.0567 38.7309 17.8416C38.7693 17.8759 38.8094 17.9103 38.8895 17.9791C39.069 18.1332 39.1588 18.2102 39.2357 18.2815C41.0467 19.96 41.5194 22.6347 40.393 24.8299C40.3451 24.9231 40.2872 25.0262 40.1714 25.2322C40.1196 25.3242 40.0938 25.3702 40.0694 25.4155C39.5111 26.4536 39.3009 27.6428 39.4697 28.8088C39.4771 28.8597 39.4856 28.9117 39.5027 29.0158C39.5409 29.249 39.56 29.3656 39.573 29.4695C39.879 31.9168 38.5179 34.2689 36.2407 35.2281C36.1441 35.2688 36.0333 35.3106 35.8118 35.3942C35.7129 35.4315 35.6635 35.4501 35.6156 35.4692C34.5192 35.9063 33.592 36.6826 32.9701 37.684C32.943 37.7277 32.916 37.7731 32.862 37.8637C32.741 38.0669 32.6806 38.1685 32.6236 38.2564C31.2814 40.3273 28.7233 41.2563 26.3609 40.5306C26.2606 40.4998 26.1489 40.4608 25.9253 40.3827C25.8256 40.3479 25.7757 40.3305 25.7268 40.3144C24.6052 39.9461 23.3948 39.9461 22.2732 40.3144C22.2243 40.3305 22.1744 40.3479 22.0747 40.3827C21.8511 40.4608 21.7394 40.4998 21.6391 40.5306C19.2767 41.2563 16.7186 40.3273 15.3764 38.2564C15.3194 38.1685 15.259 38.0669 15.138 37.8637C15.084 37.7731 15.057 37.7277 15.0299 37.684C14.408 36.6826 13.4808 35.9063 12.3844 35.4692C12.3365 35.4501 12.2871 35.4315 12.1882 35.3942C11.9667 35.3106 11.8559 35.2688 11.7593 35.2281C9.48205 34.2689 8.12097 31.9168 8.42698 29.4695C8.43997 29.3656 8.45908 29.249 8.4973 29.0158C8.51436 28.9117 8.52289 28.8597 8.53026 28.8088C8.69906 27.6428 8.48889 26.4536 7.93056 25.4155C7.90621 25.3702 7.88035 25.3242 7.82863 25.2322C7.71278 25.0262 7.65485 24.9231 7.60704 24.8299C6.48057 22.6347 6.95327 19.96 8.76433 18.2815C8.8412 18.2102 8.93096 18.1332 9.11047 17.9791C9.19061 17.9103 9.23068 17.8759 9.26908 17.8416C10.1496 17.0567 10.7548 16.0109 10.9958 14.8576C11.0063 14.8073 11.0162 14.7555 11.0358 14.6518C11.0798 14.4197 11.1019 14.3036 11.1253 14.2015C11.6766 11.7974 13.7619 10.0516 16.2306 9.92733C16.3354 9.92206 16.4538 9.92059 16.6906 9.91765C16.7963 9.91634 16.8492 9.91568 16.9007 9.91409C18.0809 9.87748 19.2182 9.46445 20.1459 8.7356C20.1864 8.70381 20.2273 8.67041 20.3091 8.60362Z" fill="$color"/>
|
|
</svg>
|
|
|
|
''',
|
|
(color) => '''<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M18.6481 9.93735C20.3067 8.72903 21.136 8.12486 22.022 7.82514C23.3035 7.39162 24.6965 7.39162 25.978 7.82514C26.864 8.12486 27.6933 8.72903 29.3519 9.93735L32.9794 12.5801L36.6049 15.0564C38.3249 16.2312 39.1849 16.8185 39.7598 17.5573C40.5914 18.6258 41.0282 19.9391 40.9986 21.2824C40.9781 22.211 40.6363 23.1817 39.9526 25.1232L38.529 29.1657L37.215 33.308C36.5983 35.2519 36.29 36.2239 35.7509 36.98C34.9712 38.0736 33.838 38.878 32.5341 39.2634C31.6327 39.5299 30.5936 39.5144 28.5154 39.4835L24 39.4162L19.4846 39.4835C17.4064 39.5144 16.3673 39.5299 15.4659 39.2634C14.162 38.878 13.0288 38.0736 12.2491 36.98C11.71 36.2239 11.4017 35.2519 10.785 33.308L9.47101 29.1657L8.04741 25.1232C7.36372 23.1817 7.02187 22.211 7.00141 21.2824C6.97182 19.9391 7.40855 18.6258 8.24017 17.5573C8.8151 16.8185 9.67508 16.2312 11.395 15.0564L15.0206 12.5801L18.6481 9.93735Z" fill="$color"/>
|
|
</svg>
|
|
''',
|
|
|
|
(color) => '''
|
|
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M16.9857 12.7771C22.0217 7.74098 30.1869 7.74098 35.2229 12.7771C40.259 17.8131 40.259 25.9783 35.2229 31.0143L31.0143 35.2229C25.9783 40.259 17.8131 40.259 12.7771 35.2229C7.74098 30.1869 7.74098 22.0217 12.7771 16.9857L16.9857 12.7771Z" fill="$color"/>
|
|
</svg>
|
|
|
|
''',
|
|
(color) => '''
|
|
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M33.1856 11.1238C34.2431 11.1956 34.7718 11.2315 35.1991 11.4184C35.8175 11.6889 36.3111 12.1825 36.5816 12.8009C36.7685 13.2282 36.8044 13.7569 36.8762 14.8144L37.0402 17.2275C37.0693 17.6552 37.0838 17.869 37.1303 18.0733C37.1975 18.3684 37.3142 18.6501 37.4754 18.9063C37.5869 19.0836 37.7279 19.2451 38.0097 19.5681L39.6001 21.3903C40.297 22.1889 40.6455 22.5881 40.8155 23.0225C41.0615 23.6509 41.0615 24.3491 40.8155 24.9775C40.6455 25.4119 40.297 25.8111 39.6001 26.6097L38.0097 28.4319C37.7279 28.7549 37.5869 28.9164 37.4754 29.0937C37.3142 29.3499 37.1975 29.6316 37.1303 29.9267C37.0838 30.131 37.0693 30.3448 37.0402 30.7725L36.8762 33.1856C36.8044 34.2431 36.7685 34.7718 36.5816 35.1991C36.3111 35.8175 35.8175 36.3111 35.1991 36.5816C34.7718 36.7685 34.2431 36.8044 33.1856 36.8762L30.7725 37.0402C30.3448 37.0693 30.131 37.0838 29.9267 37.1303C29.6316 37.1975 29.3499 37.3142 29.0937 37.4754C28.9164 37.5869 28.7549 37.7279 28.4319 38.0097L26.6097 39.6001C25.8111 40.297 25.4119 40.6455 24.9775 40.8155C24.3491 41.0615 23.6509 41.0615 23.0225 40.8155C22.5881 40.6455 22.1889 40.297 21.3903 39.6001L19.5681 38.0097C19.2451 37.7279 19.0836 37.5869 18.9063 37.4754C18.6501 37.3142 18.3684 37.1975 18.0733 37.1303C17.869 37.0838 17.6552 37.0693 17.2275 37.0402L14.8144 36.8762C13.7569 36.8044 13.2282 36.7685 12.8009 36.5816C12.1825 36.3111 11.6889 35.8175 11.4184 35.1991C11.2315 34.7718 11.1956 34.2431 11.1238 33.1856L10.9598 30.7725C10.9307 30.3448 10.9162 30.131 10.8697 29.9267C10.8025 29.6316 10.6858 29.3499 10.5246 29.0937C10.4131 28.9164 10.2721 28.7549 9.99027 28.4319L8.3999 26.6097C7.703 25.8111 7.35454 25.4119 7.18452 24.9775C6.93849 24.3491 6.93849 23.6509 7.18452 23.0225C7.35454 22.5881 7.703 22.1889 8.3999 21.3903L9.99027 19.5681C10.2721 19.2451 10.4131 19.0836 10.5246 18.9063C10.6858 18.6501 10.8025 18.3684 10.8697 18.0733C10.9162 17.869 10.9307 17.6552 10.9598 17.2275L11.1238 14.8144C11.1956 13.7569 11.2315 13.2282 11.4184 12.8009C11.6889 12.1825 12.1825 11.6889 12.8009 11.4184C13.2282 11.2315 13.7569 11.1956 14.8144 11.1238L17.2275 10.9598C17.6552 10.9307 17.869 10.9162 18.0733 10.8697C18.3684 10.8025 18.6501 10.6858 18.9063 10.5246C19.0836 10.4131 19.2451 10.2721 19.5681 9.99027L21.3903 8.3999C22.1889 7.703 22.5881 7.35454 23.0225 7.18452C23.6509 6.93849 24.3491 6.93849 24.9775 7.18452C25.4119 7.35454 25.8111 7.703 26.6097 8.3999L28.4319 9.99027C28.7549 10.2721 28.9164 10.4131 29.0937 10.5246C29.3499 10.6858 29.6316 10.8025 29.9267 10.8697C30.131 10.9162 30.3448 10.9307 30.7725 10.9598L33.1856 11.1238Z" fill="$color"/>
|
|
</svg>
|
|
''',
|
|
(color) => '''
|
|
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M27.8729 10.6207C33.8872 8.00862 39.9914 14.1128 37.3793 20.1271L36.9474 21.1214C36.1499 22.9576 36.1499 25.0424 36.9474 26.8786L37.3793 27.8729C39.9914 33.8872 33.8872 39.9914 27.8729 37.3793L26.8786 36.9474C25.0424 36.1499 22.9576 36.1499 21.1214 36.9474L20.1271 37.3793C14.1128 39.9914 8.00862 33.8872 10.6207 27.8729L11.0526 26.8786C11.8501 25.0424 11.8501 22.9576 11.0526 21.1214L10.6207 20.1271C8.00862 14.1128 14.1128 8.00862 20.1271 10.6207L21.1214 11.0526C22.9576 11.8501 25.0424 11.8501 26.8786 11.0526L27.8729 10.6207Z" fill="$color"/>
|
|
</svg>
|
|
''',
|
|
(color) => '''
|
|
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M32.1309 32.1309C25.1705 39.0913 15.8877 41.0935 11.3971 36.6029C6.90648 32.1123 8.90867 22.8295 15.8691 15.8691C22.8295 8.90867 32.1123 6.90648 36.6029 11.3971C41.0935 15.8877 39.0913 25.1705 32.1309 32.1309Z" fill="$color"/>
|
|
</svg>
|
|
|
|
'''
|
|
|
|
];
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
|
|
_rotationController = AnimationController(
|
|
vsync: this,
|
|
duration: Duration(milliseconds: 800),
|
|
)..repeat();
|
|
|
|
_rotationAnimation = CurvedAnimation(
|
|
parent: _rotationController,
|
|
curve: Curves.easeInOut,
|
|
);
|
|
|
|
Future.delayed(Duration(milliseconds: 0), () {
|
|
setState(() {
|
|
_isInitialized = true;
|
|
});
|
|
});
|
|
|
|
_shapeTimer = Timer.periodic(Duration(milliseconds: 800), (_) {
|
|
setState(() {
|
|
_currentShapeIndex = (_currentShapeIndex + 1) % _svgShapes.length;
|
|
});
|
|
});
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_rotationController.dispose();
|
|
_shapeTimer.cancel();
|
|
super.dispose();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return widget.isContained ? Container(
|
|
decoration: BoxDecoration(
|
|
color: Theme.of(context).colorScheme.primaryContainer,
|
|
borderRadius: BorderRadius.circular(50),
|
|
),
|
|
child: animationBlock()) : animationBlock();
|
|
}
|
|
|
|
|
|
Widget animationBlock() {
|
|
return AnimatedBuilder(
|
|
animation: _rotationController,
|
|
|
|
builder: (context, child) {
|
|
return Transform.rotate(
|
|
angle: _rotationAnimation.value * 2 * 3.14159,
|
|
child: AnimatedSwitcher(
|
|
duration: Duration(milliseconds: 500),
|
|
transitionBuilder: (child, animation) {
|
|
return ScaleTransition(
|
|
scale: CurvedAnimation(
|
|
parent: animation,
|
|
curve: Curves.easeOutBack,
|
|
),
|
|
child: child,
|
|
);
|
|
},
|
|
child: SvgPicture.string(
|
|
_svgShapes[_currentShapeIndex](colorToHex(Theme.of(context).colorScheme.primary)),
|
|
key: ValueKey(_svgShapes[_currentShapeIndex]),
|
|
width: widget.size,
|
|
height: widget.size,
|
|
),
|
|
),
|
|
);
|
|
},
|
|
);
|
|
}
|
|
}
|
|
|
|
|
|
String colorToHex(Color color) =>
|
|
'#${color.value.toRadixString(16).substring(2).toUpperCase()}'; |