flutter：animate_do（flutter中的Animate.css）

Introduction

Most people who have done web development should know Animate.cssthat it provides developers with a series of predefined animation effects, and various animation effects can be realized through simple CSS classes. And animate_doequivalent to flutter Animate.css, it provides a lot of well-defined animation effects

basic use

Official address
https://pub-web.flutter-io.cn/packages/animate_do

Install

flutter pub add animate_do

example one

class SwitcherContainerState extends State<SwitcherContainer> {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          FadeInLeft(child: const Square(label: '1')),
          FadeInUp(child: const Square(label: '2') ),
          FadeInDown(child: const Square(label: '3') ),
          FadeInRight(child: const Square(label: '4') ),
        ],
      ),
    );
  }
}

class Square extends StatelessWidget {
    
    
  final String label;
  const Square({
    
    Key? key,required this.label}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    
    
    return Container(
      width: 50,
      height: 50,
      color: Colors.blueAccent,
      child: Text(label,style: const TextStyle(color: Colors.white),),
    );
  }
}

Example 2

class SwitcherContainerState extends State<SwitcherContainer> {
    
    
  bool isVisible = true;
  @override
  Widget build(BuildContext context) {
    
    
    return Center(
        child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Visibility(
          visible: isVisible,
          replacement: FadeOut(
            duration: const Duration(seconds: 1),
            child: Container(
              width: 100,
              height: 100,
              color: Colors.blue,
            ),
          ),
          child: FadeIn(
            duration: const Duration(seconds: 1),
            child: Container(
              width: 100,
              height: 100,
              color: Colors.blue,
            ),
          ),
        ),
        const SizedBox(
          height: 100,
        ),
        ElevatedButton(
            onPressed: () {
    
    
              setState(() {
    
    
                isVisible = true;
              });
            },
            child: const Text("淡入")),
        ElevatedButton(
            onPressed: () {
    
    
              setState(() {
    
    
                isVisible = false;
              });
            },
            child: const Text("淡出"))
      ],
    ));
  }
}

Example 3

class SwitcherContainerState extends State<SwitcherContainer> {
    
    
  List<String> items = [
    'item 1',
    'item 2',
    'item 3',
    'item 4',
    'item 5',
    'item 6',
    'item 7',
    'item 8',
    'item 9',
    'item 10'
  ];
  @override
  Widget build(BuildContext context) {
    
    
    return ListView.builder(
        itemCount: items.length,
        itemBuilder: (BuildContext context, int index) {
    
    
          return FadeInRight(
              delay: Duration(milliseconds: 200 * index),
              child: SlideInUp(
                delay: Duration(milliseconds: 200 * index),
                child: ListTile(
                  title: Text(items[index]),
                ),
              ));
        });
  }
}

Example 4

class SwitcherContainerState extends State<SwitcherContainer> {
    
    

  @override
  Widget build(BuildContext context) {
    
    
    return GridView.builder(
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
        ),
        itemCount: 4,
        itemBuilder: (BuildContext context, int index) {
    
    
          return FadeInRight(
              delay: const Duration(seconds: 1),
              child: ZoomIn(
                delay: const Duration(seconds: 1),
                child: Container(
                  width: 120,
                  height: 100,
                  margin: const EdgeInsets.all(8),
                  color: Colors.blue,
                  child: Center(
                    child: Text("item $index",style: const TextStyle(color: Colors.white),),
                  ),
                ),
              ));
        });
  }
}

Example 5

The animations in the above examples are all triggered automatically. If you need to trigger manually, you can do as follows

Column(
  children: [
    ElevatedButton(
        onPressed: () {
    
    
          animationController.forward();
        },
        child: const Text("开始")),
    Expanded(
        child: ZoomIn(
      manualTrigger: true,
      controller: (controller) => animationController = controller,
      delay: const Duration(seconds: 1),
      child: Container(
        width: 120,
        height: 100,
        margin: const EdgeInsets.all(8),
        color: Colors.blue,
        child: const Center(
          child: Text(
            "item",
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
    ))
  ],
)