Skip to content

Instantly share code, notes, and snippets.

@manelfera
Last active October 23, 2023 13:46
Show Gist options
  • Save manelfera/e77d0cbcecfe2aa6460aace16aa21576 to your computer and use it in GitHub Desktop.
Save manelfera/e77d0cbcecfe2aa6460aace16aa21576 to your computer and use it in GitHub Desktop.
Flutter multiple easy animations
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: TextAnimationScreen(),
);
}
}
class TextAnimationScreen extends StatefulWidget {
@override
_TextAnimationScreenState createState() => _TextAnimationScreenState();
}
class _TextAnimationScreenState extends State<TextAnimationScreen> {
final List<String> texts = ["Star 1", "Star 2", "Star 3"];
int textIndex = 0;
bool buttonVisible = false;
List<double> turns = [0.0, 0.0, 0.0];
List<bool> unlocked = [false, false, false];
int spinDuration = 4;
void showNextText() {
if (textIndex < texts.length) {
setState(() {
textIndex++;
});
}
}
@override
void initState() {
super.initState();
for (int i = 0; i < texts.length; i++) {
Future.delayed(Duration(seconds: i), showNextText);
Future.delayed(Duration(seconds: i + 1), () {
setState(() {
turns[i] = 4.0;
});
});
}
Future.delayed(Duration(seconds: texts.length + spinDuration), () {
setState(() {
buttonVisible = true;
});
});
}
/// Evaluate whatever is needed
evaluateStar(int index) {
switch (index) {
case 0:
case 1:
unlocked[index] = true;
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Text Animation Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: ListView(
children: <Widget>[
const Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Results',
style:
TextStyle(fontSize: 32.0, color: Colors.black))
]),
const SizedBox(height: 10),
for (int i = 0; i < textIndex; i++)
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
AnimatedRotation(
curve: Curves.easeOut,
onEnd: () {
setState(() {
evaluateStar(i);
});
},
duration: Duration(seconds: spinDuration),
turns: turns[i],
child: unlocked[i]
? const Icon(Icons.star, color: Colors.orange)
: const Icon(Icons.star_border,
color: Colors.grey),
),
Text(
texts[i],
style: const TextStyle(
fontSize: 24.0, color: Colors.black),
),
],
),
const SizedBox(height: 10),
if (buttonVisible)
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {},
child: const Text('Close'),
),
],
),
],
),
),
],
),
),
);
}
}
@manelfera
Copy link
Author

manelfera commented Oct 22, 2023

Simple example with flutter animations

88A265EF-0E8E-4203-97BC-9BD64DBD776C

See it live at dartpad

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment