🐱‍👤 Flutter-Animation 🔥 🔥 List Animated Staggered Animations

Overview

🐱‍👤 Flutter-Animation 🔥 🔥 List Animated Staggered Animations


GridView ListView Column

Getting Started #

First you need to add flutter_staggered_animations 1.0.0 Or + in the dependency at pubspec.yaml:

Get New Version of flutter_staggered_animations Check in .Here !

dependencies:
  flutter_staggered_animations: ^1.0.0

Import #


import 'package:flutter_staggered_animations/flutter_staggered_animations.dart';

Basic Usage #

For List.builder


@override
Widget build(BuildContext context) {
  return Scaffold(
    body: AnimationLimiter(
      child: ListView.builder(
        itemCount: 100,
        itemBuilder: (BuildContext context, int index) {
          return AnimationConfiguration.staggeredList(
            position: index,
            duration: const Duration(milliseconds: 375),
            child: SlideAnimation(
              verticalOffset: 50.0,
              child: FadeInAnimation(
                child: YourListChild(),
              ),
            ),
          );
        },
      ),
    ),
  );
}

For List Manual List Generate


@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: AnimationLimiter(
          child: Column(
            children: AnimationConfiguration.toStaggeredList(
              duration: const Duration(milliseconds: 375),
              childAnimationBuilder: (widget) => SlideAnimation(
                horizontalOffset: 50.0,
                child: FadeInAnimation(
                  child: widget,
                ),
              ),
              children: YourColumnChildren(),
            ),
          ),
        ),
      ),
    );
  }

Note From : flutter_staggered_animations in pub.dev !!


Note : This Package dont Support Null-Safety for see run in terminall ==> flutter run --no-sound-null-safety


🐱‍👤 Staggered Animations made with algeria ❤

You might also like...

BKash-Ballance-Animation - BKash Ballance Animation For Flutter

BKash-Ballance-Animation - BKash Ballance Animation For Flutter

BKash-Ballance-Animation before clone the GitHub repository please give a star o

Sep 1, 2022

Fisherman-Fishing-Animation - Fisherman Fishing Animation With Flutter

Fisherman-Fishing-Animation - Fisherman Fishing Animation With Flutter

Fisherman Fishing Animation before clone the GitHub repository please give a sta

Oct 27, 2022

Nubank card animation - Nubank card animation built with flutter

Nubank card animation - Nubank card animation built with flutter

Nubank card animation Project | Technologies | How to run | How to contribute 💻

Nov 6, 2022

Fade animation - Add fade animation to your app easily

Fade animation - Add fade animation to your app easily

fade_animation Add fade animation to your app easily using simple_animations pac

Oct 6, 2022

🔔 A flutter package to create cool and beautiful text animations. [Flutter Favorite Package]

🔔  A flutter package to create cool and beautiful text animations. [Flutter Favorite Package]

Animated Text Kit A flutter package which contains a collection of some cool and awesome text animations. Recommended package for text animations in C

Dec 3, 2022

Flutter package for creating awesome animations.

Flutter package for creating awesome animations.

🎬 Simple Animations Simple Animations is a powerful package to create beautiful custom animations in no time. 💪 fully tested 📝 well documented 💼 e

Nov 16, 2022

Fun canvas animations in Flutter based on time and math functions.

Fun canvas animations in Flutter based on time and math functions.

funvas Flutter package that allows creating canvas animations based on time and math (mostly trigonometric) functions. The name "funvas" is based on F

Nov 26, 2022

A flutter package that adds support for vector data based animations.

animated_vector Description and inspiration A package that adds support for vector data based animations. The data format is heavily inspired from the

Apr 26, 2022

Simple reactive animations in your Flutter apps.

just.motion Flutter package to create organic motion transitions. Why? The Motion Value stateless hot reload status notifier Ease Motion Spring Motion

Nov 14, 2022
Owner
Hmida
🚀Software Developer 💻 💯Love Linux 🐧
Hmida
Create powerful animations in Flutter and use the hero animation for complex animations

Hero Animation - Locations UI - Flutter Create powerful animations in Flutter and use the hero animation for complex animations. ⚡  Social Media  Twit

null 3 Dec 11, 2021
Arisstaggeredgridview - Staggered Grid View For Flutter

Flutter - StaggeredGridView We complete the design challenge by integrating a St

Behruz Hurramov 2 Jan 9, 2022
A simple animated circular menu for Flutter, Adjustable radius, colors, alignment, animation curve and animation duration.

A simple animated circular menu for Flutter, Adjustable radius, colors, alignment, animation curve and animation duration. pub package Getting Started

Hasan Mohammed 90 Nov 21, 2022
Flutter animation tutorials, such common animation, flare animation.

❤️ Star ❤️ the repo to support the project or ?? Follow Me.Thanks! Facebook Page Facebook Group QQ Group Developer Flutter Open Flutter Open 963828159

Flutter开源社区 123 Sep 3, 2022
Flutter animation tutorials, such common animation, flare animation.

❤️ Star ❤️ the repo to support the project or ?? Follow Me.Thanks! Facebook Page Facebook Group QQ Group Developer Flutter Open Flutter Open 963828159

Flutter开源社区 123 Sep 3, 2022
A new Flutter dialog with a series of beautiful animations, slide fade rotate size scale rotate3D animations.

flutter_animated_dialog A new Flutter dialog with a series of beautiful animations, slide fade rotate size scale rotate3D animations. Dialog barrier i

null 20 Dec 3, 2022
Flutter-animated-ui-space-app - ⚡Animated UI Space App Challenge Part 5 🐱‍👤🐱‍👤

Flutter-animated-ui-space-app ?? ?? Project img : Image Challenge Code Image Note !! : Please include your photos to show and install simple_animation

Hmida 7 Sep 15, 2022
Timer UI animation challenge from 'Flutter Animations Masterclass'

stopwatch_flutter An IOS stopwatch challenge from Flutter Animations Masterclass - Full Course What I learned; Use timer Use ticker Create custom shap

Ali Riza Reisoglu 10 Oct 24, 2021
A Flutter library that makes animation easer. It allows for separation of animation setup from the User Interface.

animator This library is an animation library for Flutter that: makes animation as simple as the simplest widget in Flutter with the help of Animator

MELLATI Fatah 226 Nov 23, 2022
Like Button is a flutter library that allows you to create a button with animation effects similar to Twitter's heart when you like something and animation effects to increase like count.

like_button Language: English | 中文简体 Like Button is a flutter library that allows you to create a button with animation effects similar to Twitter's h

FlutterCandies 355 Nov 24, 2022