changed everything from filcnaplo to refilc finally
This commit is contained in:
Kima
509
refilc_mobile_ui/lib/common/widgets/grade/surprise_grade.dart
Normal file
509
refilc_mobile_ui/lib/common/widgets/grade/surprise_grade.dart
Normal file
@@ -0,0 +1,509 @@
|
||||
// ignore_for_file: use_build_context_synchronously
|
||||
|
||||
import 'dart:math';
|
||||
import 'dart:ui';
|
||||
|
||||
import 'package:animated_background/animated_background.dart' as bg;
|
||||
import 'package:refilc/api/providers/database_provider.dart';
|
||||
import 'package:refilc/api/providers/user_provider.dart';
|
||||
import 'package:refilc/helpers/subject.dart';
|
||||
import 'package:refilc/models/settings.dart';
|
||||
import 'package:refilc/ui/widgets/grade/grade_tile.dart';
|
||||
import 'package:refilc_kreta_api/models/grade.dart';
|
||||
import 'package:refilc_mobile_ui/pages/home/particle.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:refilc/utils/format.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import 'package:rive/rive.dart' as rive;
|
||||
|
||||
import 'new_grades.i18n.dart';
|
||||
|
||||
class SurpriseGrade extends StatefulWidget {
|
||||
const SurpriseGrade(this.grade, {super.key});
|
||||
|
||||
final Grade grade;
|
||||
|
||||
@override
|
||||
State<SurpriseGrade> createState() => _SurpriseGradeState();
|
||||
}
|
||||
|
||||
class _SurpriseGradeState extends State<SurpriseGrade>
|
||||
with TickerProviderStateMixin {
|
||||
late AnimationController _revealAnimFade;
|
||||
late AnimationController _revealAnimScale;
|
||||
late AnimationController _revealAnimGrade;
|
||||
late AnimationController _revealAnimParticle;
|
||||
late rive.RiveAnimationController _controller;
|
||||
|
||||
late SettingsProvider settingsProvider;
|
||||
|
||||
List<String> defaultRarities = [
|
||||
"common",
|
||||
"uncommon",
|
||||
"rare",
|
||||
"epic",
|
||||
"legendary",
|
||||
];
|
||||
Map<String, String> rarities = {};
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
|
||||
_revealAnimFade = AnimationController(
|
||||
vsync: this, duration: const Duration(milliseconds: 500));
|
||||
_revealAnimScale = AnimationController(
|
||||
vsync: this, duration: const Duration(milliseconds: 300));
|
||||
_revealAnimGrade =
|
||||
AnimationController(vsync: this, duration: const Duration(seconds: 1));
|
||||
_revealAnimParticle =
|
||||
AnimationController(vsync: this, duration: const Duration(seconds: 2));
|
||||
_revealAnimScale.animateTo(0.7, duration: Duration.zero);
|
||||
_controller = rive.SimpleAnimation('Timeline 1', autoplay: false);
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||
_revealAnimFade.animateTo(1.0, curve: Curves.easeInOut);
|
||||
Future.delayed(const Duration(milliseconds: 200), () {
|
||||
_revealAnimScale.animateTo(1.0, curve: Curves.easeInOut).then((_) {
|
||||
setState(() => subtitle = true);
|
||||
});
|
||||
});
|
||||
|
||||
_fetchRarities();
|
||||
});
|
||||
|
||||
seed = Random().nextInt(100000000);
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_revealAnimFade.dispose();
|
||||
_revealAnimScale.dispose();
|
||||
_revealAnimGrade.dispose();
|
||||
_revealAnimParticle.dispose();
|
||||
_controller.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
_fetchRarities() async {
|
||||
rarities = await Provider.of<DatabaseProvider>(context, listen: false)
|
||||
.userQuery
|
||||
.getGradeRarities(
|
||||
userId: Provider.of<UserProvider>(context, listen: false).id!);
|
||||
|
||||
setState(() {});
|
||||
}
|
||||
|
||||
bool hold = false;
|
||||
bool subtitle = false;
|
||||
late int seed;
|
||||
|
||||
void reveal() async {
|
||||
if (!subtitle) {
|
||||
_revealAnimParticle.animateBack(0.0,
|
||||
curve: Curves.fastLinearToSlowEaseIn,
|
||||
duration: const Duration(milliseconds: 300));
|
||||
await Future.delayed(const Duration(milliseconds: 50));
|
||||
_revealAnimGrade.animateBack(0.0, curve: Curves.fastLinearToSlowEaseIn);
|
||||
await Future.delayed(const Duration(milliseconds: 50));
|
||||
_revealAnimFade.animateBack(0.0, curve: Curves.easeInOut);
|
||||
_revealAnimScale.animateBack(0.0, curve: Curves.easeInOut);
|
||||
if (mounted) Navigator.of(context).pop();
|
||||
return;
|
||||
}
|
||||
subtitle = false;
|
||||
setState(() => hold = false);
|
||||
_controller.isActive = true;
|
||||
await Future.delayed(const Duration(seconds: 2));
|
||||
if (mounted) {
|
||||
_revealAnimGrade.animateTo(1.0, curve: Curves.fastLinearToSlowEaseIn);
|
||||
}
|
||||
await Future.delayed(const Duration(milliseconds: 700));
|
||||
if (mounted) {
|
||||
await _revealAnimParticle.animateTo(1.0,
|
||||
curve: Curves.fastLinearToSlowEaseIn);
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
settingsProvider = Provider.of<SettingsProvider>(context);
|
||||
|
||||
return AnimatedBuilder(
|
||||
animation: _revealAnimFade,
|
||||
builder: (context, child) {
|
||||
return FadeTransition(
|
||||
opacity: _revealAnimFade,
|
||||
child: Material(
|
||||
color: Colors.black.withOpacity(.75),
|
||||
child: Container(
|
||||
color: Theme.of(context).colorScheme.secondary.withOpacity(.05),
|
||||
child: Container(
|
||||
decoration: const BoxDecoration(
|
||||
gradient: RadialGradient(
|
||||
colors: [Colors.transparent, Colors.black],
|
||||
radius: 1.5,
|
||||
stops: [0.2, 1.0],
|
||||
),
|
||||
),
|
||||
child: bg.AnimatedBackground(
|
||||
vsync: this,
|
||||
behaviour: bg.RandomParticleBehaviour(
|
||||
options: bg.ParticleOptions(
|
||||
baseColor: Theme.of(context).colorScheme.secondary,
|
||||
spawnMinSpeed: 5.0,
|
||||
spawnMaxSpeed: 10.0,
|
||||
minOpacity: .05,
|
||||
maxOpacity: .08,
|
||||
spawnMinRadius: 30.0,
|
||||
spawnMaxRadius: 50.0,
|
||||
particleCount: 20,
|
||||
),
|
||||
),
|
||||
child: ScaleTransition(
|
||||
scale: _revealAnimScale,
|
||||
child: child,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
child: AnimatedBuilder(
|
||||
animation: _revealAnimGrade,
|
||||
builder: (context, child) {
|
||||
return Stack(
|
||||
alignment: Alignment.center,
|
||||
children: [
|
||||
Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
SlideTransition(
|
||||
position: _revealAnimGrade.drive(
|
||||
Tween(begin: Offset.zero, end: const Offset(0, 0.7))),
|
||||
child: AnimatedScale(
|
||||
scale: hold ? 1.1 : 1.0,
|
||||
curve: Curves.easeOutBack,
|
||||
duration: const Duration(milliseconds: 200),
|
||||
child: GestureDetector(
|
||||
onLongPressDown: (_) => setState(() => hold = true),
|
||||
onLongPressEnd: (_) => reveal(),
|
||||
onLongPressCancel: reveal,
|
||||
child: ScaleTransition(
|
||||
scale: CurvedAnimation(
|
||||
curve: Curves.easeInOut,
|
||||
parent: _revealAnimGrade
|
||||
.drive(Tween(begin: 1.0, end: 0.8))),
|
||||
child: Stack(
|
||||
alignment: Alignment.center,
|
||||
children: [
|
||||
SizedBox(
|
||||
width: 300,
|
||||
height: 300,
|
||||
child: rive.RiveAnimation.asset(
|
||||
"assets/animations/backpack-2.riv",
|
||||
fit: BoxFit.contain,
|
||||
controllers: [_controller],
|
||||
antialiasing: false,
|
||||
),
|
||||
),
|
||||
SlideTransition(
|
||||
position: _revealAnimParticle.drive(Tween(
|
||||
begin: const Offset(0, 0.3),
|
||||
end: const Offset(0, 0.8))),
|
||||
child: FadeTransition(
|
||||
opacity: _revealAnimParticle,
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(24.0),
|
||||
child: BackdropFilter(
|
||||
filter: ImageFilter.blur(
|
||||
sigmaX: 32.0, sigmaY: 32.0),
|
||||
child: Container(
|
||||
width: double.infinity,
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 32.0, vertical: 20.0),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white.withOpacity(.3),
|
||||
borderRadius:
|
||||
BorderRadius.circular(24.0),
|
||||
border: Border.all(
|
||||
color: Colors.black
|
||||
.withOpacity(.3),
|
||||
width: 1.0),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment:
|
||||
CrossAxisAlignment.start,
|
||||
mainAxisSize:
|
||||
MainAxisSize.min,
|
||||
children: [
|
||||
if (widget.grade
|
||||
.description !=
|
||||
"")
|
||||
Text(
|
||||
widget
|
||||
.grade.description,
|
||||
style: const TextStyle(
|
||||
color: Colors.white,
|
||||
fontWeight:
|
||||
FontWeight.bold,
|
||||
fontSize: 26.0,
|
||||
),
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow
|
||||
.ellipsis,
|
||||
),
|
||||
Text(
|
||||
widget.grade.subject
|
||||
.renamedTo ??
|
||||
widget.grade.subject
|
||||
.name
|
||||
.capital(),
|
||||
style: TextStyle(
|
||||
color: Colors.white
|
||||
.withOpacity(.8),
|
||||
fontWeight:
|
||||
FontWeight.bold,
|
||||
fontSize: 24.0,
|
||||
fontStyle: widget
|
||||
.grade
|
||||
.subject
|
||||
.isRenamed &&
|
||||
settingsProvider
|
||||
.renamedSubjectsItalics
|
||||
? FontStyle.italic
|
||||
: null),
|
||||
maxLines: 2,
|
||||
overflow:
|
||||
TextOverflow.ellipsis,
|
||||
),
|
||||
const SizedBox(height: 2),
|
||||
Text(
|
||||
"${widget.grade.value.weight}%",
|
||||
style: TextStyle(
|
||||
color: Colors.white
|
||||
.withOpacity(.7),
|
||||
fontWeight:
|
||||
FontWeight.w600,
|
||||
fontSize: 20.0,
|
||||
),
|
||||
maxLines: 2,
|
||||
overflow:
|
||||
TextOverflow.ellipsis,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 20.0),
|
||||
Icon(
|
||||
SubjectIcon.resolveVariant(
|
||||
subject:
|
||||
widget.grade.subject,
|
||||
context: context),
|
||||
color: Colors.white,
|
||||
size: 82.0,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 42.0),
|
||||
AnimatedOpacity(
|
||||
opacity: subtitle ? 1.0 : 0.0,
|
||||
duration: const Duration(milliseconds: 300),
|
||||
child: Text(
|
||||
"open_subtitle".i18n,
|
||||
style: TextStyle(
|
||||
color: Colors.white.withOpacity(.8),
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: 24.0,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
if (_revealAnimGrade.value > 0)
|
||||
AnimatedBuilder(
|
||||
animation: _revealAnimParticle,
|
||||
builder: (context, child) {
|
||||
bool shouldPaint = false;
|
||||
if (_revealAnimParticle.status ==
|
||||
AnimationStatus.forward ||
|
||||
_revealAnimParticle.status ==
|
||||
AnimationStatus.reverse) {
|
||||
shouldPaint = true;
|
||||
}
|
||||
|
||||
String? rr =
|
||||
rarities[widget.grade.value.value.toString()];
|
||||
rr ??= '';
|
||||
|
||||
if (rr.replaceAll(' ', '') == '') {
|
||||
rr = defaultRarities[widget.grade.value.value - 1].i18n;
|
||||
}
|
||||
|
||||
return ScaleTransition(
|
||||
scale: _revealAnimGrade,
|
||||
child: FadeTransition(
|
||||
opacity: _revealAnimGrade,
|
||||
child: SlideTransition(
|
||||
position: _revealAnimGrade.drive(Tween(
|
||||
begin: Offset.zero,
|
||||
end: const Offset(0, -0.6))),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
SlideTransition(
|
||||
position: _revealAnimGrade.drive(Tween(
|
||||
begin: Offset.zero,
|
||||
end: const Offset(0, -0.9))),
|
||||
child: Text(
|
||||
rr,
|
||||
style: TextStyle(
|
||||
fontSize: 46.0,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: gradeColor(
|
||||
context: context,
|
||||
value: widget.grade.value.value),
|
||||
shadows: [
|
||||
Shadow(
|
||||
color: gradeColor(
|
||||
context: context,
|
||||
value:
|
||||
widget.grade.value.value)
|
||||
.withOpacity(.5),
|
||||
blurRadius: 24.0,
|
||||
),
|
||||
Shadow(
|
||||
color: gradeColor(
|
||||
context: context,
|
||||
value:
|
||||
widget.grade.value.value)
|
||||
.withOpacity(.3),
|
||||
offset: const Offset(-3, -3),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 32.0),
|
||||
ScaleTransition(
|
||||
scale: CurvedAnimation(
|
||||
curve: Curves.easeInOutBack,
|
||||
parent: _revealAnimParticle
|
||||
.drive(Tween(begin: 0.6, end: 1.0))),
|
||||
child: CustomPaint(
|
||||
painter: PimpPainter(
|
||||
particle: Sprinkles(),
|
||||
controller: _revealAnimParticle,
|
||||
seed: seed + 1,
|
||||
shouldPaint: shouldPaint,
|
||||
),
|
||||
child: CustomPaint(
|
||||
painter: PimpPainter(
|
||||
particle: Sprinkles(),
|
||||
controller: _revealAnimParticle,
|
||||
seed: seed,
|
||||
shouldPaint: shouldPaint,
|
||||
),
|
||||
child: RotationTransition(
|
||||
turns: CurvedAnimation(
|
||||
curve: Curves.easeInBack,
|
||||
parent: _revealAnimGrade)
|
||||
.drive(
|
||||
Tween(begin: 0.95, end: 1.0)),
|
||||
child: GradeValueWidget(
|
||||
widget.grade.value,
|
||||
fill: true,
|
||||
contrast: true,
|
||||
shadow: true,
|
||||
outline: true,
|
||||
size: 100.0,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
}),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class PimpPainter extends CustomPainter {
|
||||
PimpPainter(
|
||||
{required this.particle,
|
||||
required this.seed,
|
||||
required this.controller,
|
||||
required this.shouldPaint})
|
||||
: super(repaint: controller);
|
||||
|
||||
final Particle particle;
|
||||
final int seed;
|
||||
final AnimationController controller;
|
||||
final bool shouldPaint;
|
||||
|
||||
@override
|
||||
void paint(Canvas canvas, Size size) {
|
||||
if (shouldPaint) {
|
||||
canvas.translate(size.width / 2, size.height / 2);
|
||||
particle.paint(canvas, size, controller.value, seed);
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
bool shouldRepaint(PimpPainter oldDelegate) => shouldPaint;
|
||||
}
|
||||
|
||||
Color randomColor(int c) {
|
||||
c = c % 5;
|
||||
if (c == 0) return Colors.red.shade300;
|
||||
if (c == 1) return Colors.green.shade300;
|
||||
if (c == 2) return Colors.orange.shade300;
|
||||
if (c == 3) return Colors.blue.shade300;
|
||||
if (c == 4) return Colors.pink.shade300;
|
||||
if (c == 5) return Colors.brown.shade300;
|
||||
return Colors.black;
|
||||
}
|
||||
|
||||
class Sprinkles extends Particle {
|
||||
@override
|
||||
void paint(Canvas canvas, Size size, progress, seed) {
|
||||
Random random = Random(seed);
|
||||
int randomMirrorOffset = random.nextInt(8) + 1;
|
||||
CompositeParticle(children: [
|
||||
Firework(),
|
||||
RectangleMirror.builder(
|
||||
numberOfParticles: 6,
|
||||
particleBuilder: (n) {
|
||||
return AnimatedPositionedParticle(
|
||||
begin: const Offset(0.0, -10.0),
|
||||
end: const Offset(0.0, -60.0),
|
||||
child:
|
||||
FadingRect(width: 5.0, height: 15.0, color: randomColor(n)),
|
||||
);
|
||||
},
|
||||
initialDistance: -pi / randomMirrorOffset),
|
||||
]).paint(canvas, size, progress, seed);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user