Animated List(No Package) In Flutter

Mobile Apps Academy
3 min readMar 16, 2024

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/

--

--

Mobile Apps Academy

Welcome to Mobile Apps Academy, your go-to channel for all things mobile app development!