flutterflutter-animation

How to delay list items in flutter?


I am trying to generate a list in flutter which delays every item after some delay. I was tried using FutureBuilder and AnimatedList but i failed to get it.

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

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Example(),
    );
  }
}

class Example extends StatefulWidget {
  @override
  _ExampleState createState() => new _ExampleState();
}

class _ExampleState extends State<Example> with TickerProviderStateMixin{
  AnimationController listViewController;
  final Animation listView;
  Duration duration = new Duration(seconds: 3);
  Timer _timer;

  @override
  void initState() {
    listViewController = new AnimationController(
        duration: new Duration(seconds: 2),
        vsync: this
    );
    super.initState();
  }

  FlutterLogoStyle _logoStyle = FlutterLogoStyle.markOnly;
  item() {
    _timer = new Timer(const Duration(seconds: 1), () {
      return Text("cdscs");
    });
  }

  @override
  void dispose() {
    listViewController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("hello"),
        ),
        // ListView Builder
        body: AnimatedList(
          initialItemCount: 10,
          itemBuilder: (BuildContext context,
              int index,
              Animation<double> animation){
            return item();
          },
        )
    );
  }
}

Solution

  • You could use the AnimationController and an Animation for every child like this example:

        class Example extends StatefulWidget {
          @override
          _ExampleState createState() => new _ExampleState();
        }
    
        class _ExampleState extends State<Example> with TickerProviderStateMixin {
    
        AnimationController _animationController;
        double animationDuration = 0.0;
        int totalItems = 10;
    
          @override
          void initState() {
              super.initState();
              final int totalDuration = 4000;
            _animationController = AnimationController(
                vsync: this, duration: new Duration(milliseconds: totalDuration));
                animationDuration = totalDuration/(100*(totalDuration/totalItems));
             _animationController.forward();
          }
    
          FlutterLogoStyle _logoStyle = FlutterLogoStyle.markOnly;
    
          @override
          void dispose() {
            _animationController.dispose();
            super.dispose();
          }
    
          @override
          Widget build(BuildContext context) {
            return new Scaffold(
                appBar: new AppBar(
                  title: new Text("hello"),
                ),
                // ListView Builder
                body: ListView.builder(
                  itemCount: totalItems,
                  itemBuilder: (BuildContext context, int index) {
                    return new Item(index: index, animationController: _animationController, duration: animationDuration);
                  },
                ));
          }
        }
    
        class Item extends StatefulWidget {
    
        final int index;
        final AnimationController animationController;
        final double duration;
    
        Item({this.index, this.animationController, this.duration});
    
          @override
          _ItemState createState() => _ItemState();
        }
    
        class _ItemState extends State<Item> {
          Animation _animation;
          double start;
          double end;
    
          @override
          void initState() {
            super.initState();
            start = (widget.duration * widget.index ).toDouble();
            end = start + widget.duration;
            print("START $start , end $end");
            _animation = Tween<double>(
              begin: 0.0,
              end: 1.0,
            ).animate(
              CurvedAnimation(
                parent: widget.animationController,
                curve: Interval(
                  start,
                  end,
                  curve: Curves.easeIn,
                ),
              ),
            )..addListener((){
              setState(() {
                    });
            });
          }
    
    
         @override
          Widget build(BuildContext context) {
            return Opacity(
              opacity: _animation.value,
                  child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: new Text("New Sample Item ${widget.index}"),
              ),
            );
          }
        }
    

    You can change the animation, in this case I was using opacity to simulate fade animation.