?‍? Flutter-Animation ?? 列表动画交错动画


GridView ListView Column

入门 #

首先,您需要在 pubspec.yaml 文件中将 flutter_staggered_animations 1.0.0 或更高版本添加到依赖项中

获取 flutter_staggered_animations 的新版本,请在此处查看 .这里!


dependencies:
  flutter_staggered_animations: ^1.0.0

导入 #


import 'package:flutter_staggered_animations/flutter_staggered_animations.dart';

基本用法 #

对于 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(),
              ),
            ),
          );
        },
      ),
    ),
  );
}

对于列表 手动列表生成


@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(),
            ),
          ),
        ),
      ),
    );
  }


来自 pub.dev 的 flutter_staggered_animations 注意! pub.dev !!


注意:此包不支持空安全,请在终端运行 ==> flutter run –no-sound-null-safety 查看



?‍? 交错动画由阿尔及利亚制造 ❤

GitHub

https://github.com/Hmida71/Flutter-Animation-ListAnimated