Flutter Staggered Animations Example | GridView Animation

Staggered animation flutter Example

Flutter Staggered Animations Full project code example:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_staggered_animations/flutter_staggered_animations.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
          body: AnimationLimiter(
            child: GridView.count(
              crossAxisCount: 2,
              crossAxisSpacing: 10,
              children: List.generate(102, (index) {
                return AnimationConfiguration.staggeredGrid(
                    position: index,
                    columnCount: 2,
                    child: ScaleAnimation(
                      duration: Duration(milliseconds: 3000),
                      child: FadeInAnimation(
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Container(
                            height: 200,
                            width: 200,
                            color: Colors.deepOrange,
                            child: Center(
                              child: Text(
                                ""Animated"",
                                style: TextStyle(
                                    fontWeight: FontWeight.w800,
                                    color: Colors.white),
                              ),
                            ),
                          ),
                        ),
                      ),
                    ));
              }),
            ),
          ),
        ));
  }
}

Read also, Flutter Menu Example.