How to delay list items in flutter?

Question

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

Prent

Please format your code neatly. – Hemielytron

Please explain more. Where are the items coming from? Do you want the list to grow one by one? Or do you want to see the complete list and them to change initially from what to what? – Own

i need something like : github.com/Yalantis/Side-Menu.Android – Prent

Answer 1

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.

Rheumatism

Answer 2

Maybe you can Check this response: https://mcmap.net/q/971470/-how-to-animate-the-items-rendered-initially-using-animated-list-in-flutter

for (var i = 0; i < fetchedList.length; i++) {
 future = future.then((_) {
  return Future.delayed(Duration(milliseconds: 100), () {
     // add/remove item
   });
 });

Bergeron

Answer 3

 Future.delayed(const Duration(seconds: 2)).then((val) {
 // To do here 
 });

Maximalist