Animated List(No Package) In Flutter
In this article, We will explore how to implement an Animated List in Flutter
Before proceeding, please consider subscribing to our YOUTUBE CHANNEL
It gives us a lot of motivation to produce high-quality content for you guys.
if you are interested in watching the video tutorial, Check out below.
Let's start by creating StatefulWidget
class AnimatedListPage extends StatefulWidget {
const AnimatedListPage({super.key});
@override
State<AnimatedListPage> createState() => _AnimatedListPageState();
}
class _AnimatedListPageState extends State<AnimatedListPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
body:
);
}
}
We need screenWidth
and screenHeight
to animate the list.
class AnimatedListPage extends StatefulWidget {
const AnimatedListPage({super.key});
@override
State<AnimatedListPage> createState() => _AnimatedListPageState();
}
class _AnimatedListPageState extends State<AnimatedListPage> {
double screenHeight = 0;
double screenWidth = 0;
bool startAnimation = false;
List<String> countries = ["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla", "Argentina","Armenia","Aruba"];
@override
void initState() {
// TODO: implement initState
super.initState();
WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
setState(() {
startAnimation = true;
});
});
}
@override
Widget build(BuildContext context) {
screenHeight = MediaQuery.of(context).size.height;
screenWidth = MediaQuery.of(context).size.width;
return Scaffold(
backgroundColor: Colors.black,
body:
);
}
}
Create a simple List Widget with ListView.builder
class AnimatedListPage extends StatefulWidget {
const AnimatedListPage({super.key});
@override
State<AnimatedListPage> createState() => _AnimatedListPageState();
}
class _AnimatedListPageState extends State<AnimatedListPage> {
double screenHeight = 0;
double screenWidth = 0;
bool startAnimation = false;
List<String> countries = ["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla", "Argentina","Armenia","Aruba"];
@override
void initState() {
// TODO: implement initState
super.initState();
WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
setState(() {
startAnimation = true;
});
});
}
@override
Widget build(BuildContext context) {
screenHeight = MediaQuery.of(context).size.height;
screenWidth = MediaQuery.of(context).size.width;
return Scaffold(
backgroundColor: Colors.black,
body: SingleChildScrollView(
physics: const BouncingScrollPhysics(),
padding: EdgeInsets.symmetric(
horizontal: screenWidth / 20
),
child: Column(
children: [
const SizedBox(
height: 30,
),
ListView.builder(
primary: false,
shrinkWrap: true,
itemCount: countries.length,
itemBuilder: (context, index) {
return item(index);
},
)
],
)
),
);
}
Widget item(int index) {
return
}
}
We’ll be animating the items with Matrix4.translationValues(startAnimation ? 0 : screenWidth, 0, 0)
class AnimatedListPage extends StatefulWidget {
const AnimatedListPage({super.key});
@override
State<AnimatedListPage> createState() => _AnimatedListPageState();
}
class _AnimatedListPageState extends State<AnimatedListPage> {
double screenHeight = 0;
double screenWidth = 0;
bool startAnimation = false;
List<String> countries = ["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla", "Argentina","Armenia","Aruba"];
@override
void initState() {
// TODO: implement initState
super.initState();
WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
setState(() {
startAnimation = true;
});
});
}
@override
Widget build(BuildContext context) {
screenHeight = MediaQuery.of(context).size.height;
screenWidth = MediaQuery.of(context).size.width;
return Scaffold(
backgroundColor: Colors.black,
body: SingleChildScrollView(
physics: const BouncingScrollPhysics(),
padding: EdgeInsets.symmetric(
horizontal: screenWidth / 20
),
child: Column(
children: [
const SizedBox(
height: 30,
),
ListView.builder(
primary: false,
shrinkWrap: true,
itemCount: countries.length,
itemBuilder: (context, index) {
return item(index);
},
)
],
)
),
);
}
Widget item(int index) {
return AnimatedContainer(
height: 70,
width: screenWidth,
curve: Curves.easeInOut,
duration: Duration(milliseconds: 1000 + (index * 100)),
transform: Matrix4.translationValues(startAnimation ? 0 : screenWidth, 0, 0),
margin: const EdgeInsets.only(
bottom: 12,
),
padding: EdgeInsets.symmetric(
horizontal: screenWidth / 20
),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"${index + 1}. ${countries[index]}",
style: const TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold
),
)
],
),
);
}
}
That’s it. Below is the result.
Once again Thanks for stopping by.
Do check out our YOUTUBE CHANNEL
Social Handles
Instagram : https://www.instagram.com/mobileappsacademy/
Twitter : https://twitter.com/MobileAppsAcdmy
LinkedIn : https://www.linkedin.com/company/mobile-apps-academy/