How to center an Item inside ListView

Question

Suppose I have a List of integer numbers between 0-1000 suppose picture below:

but instead of fruits , I want to show the number. now I have 3 problem:

1:as you know at last the item must be centered in its box , how can I do that inside ListView

2:I should only controll the ListView with controllers and user shouldn't move it.

3:how to gradually spin it ?

this is my code:

class SpinnerChance extends StatefulWidget {
  @override
  _SpinnerChanceState createState() => _SpinnerChanceState();
}

class _SpinnerChanceState extends State<SpinnerChance>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  Animation<double> _animation1;
  Animation<double> _animation2;
  Animation<double> _animation3;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      vsync: this,
      duration: Duration(seconds: 5),
    );

    _animation1 = Tween(begin: 0.0, end: 100.0).animate(
      CurvedAnimation(
        parent: _animationController,
        curve: Curves.fastOutSlowIn,
      ),
    )..addListener(() {
        setState(() {});
      });

    _animation2 = Tween(begin: 0.0, end: 30.0).animate(
      CurvedAnimation(
        parent: _animationController,
        curve: Curves.fastOutSlowIn,
      ),
    )..addListener(() {
        setState(() {});
      });

    _animation3 = Tween(begin: 0.0, end: 10.0).animate(
      CurvedAnimation(
        parent: _animationController,
        curve: Curves.fastOutSlowIn,
      ),
    )..addListener(() {
        setState(() {});
      });
  }

  List<Widget> items = [];

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

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Container(
                child: Text(_animation1?.value?.toStringAsFixed(1) ??
                    "You Dont Spin It Yet"),
              ),
              Container(
                child: Text(_animation2?.value?.toStringAsFixed(1) ??
                    "You Dont Spin It Yet"),
              ),
              Container(
                child: Text(_animation3?.value?.toStringAsFixed(1) ??
                    "You Dont Spin It Yet"),
              ),
            ],
          ),
          RaisedButton(
            child: Text("Spin!"),
            onPressed: () {
              _animationController.forward();
            },
          )
        ],
      ),
    );
  }
}

Answer 1

I could imagine there's a lot of ways to create the effect you want. It's basically a slot machine but instead of fruits, you use numbers.

I found this tutorial which answers most of your questions on how to achieve the animation and as for how to turn it into numbers, you could use Text widgets instead of images since you would only need the numbers 0-9.

This isn't completely connected to ListViews in general but if you want to center its item then wrap the specific widget you want to center inside an Align widget, something like so:

Align(
   alignment: Alignment.center
   child: yourWidgetHere
),