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

Mobile Apps Academy

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.

GitHub - Mobile-Apps-Academy/AnimatedListFlutter

Once again Thanks for stopping by.
Do check out our YOUTUBE CHANNEL

Mobile Apps Academy

Social Handles

Instagram : https://www.instagram.com/mobileappsacademy/

Twitter : https://twitter.com/MobileAppsAcdmy

LinkedIn : https://www.linkedin.com/company/mobile-apps-academy/