当滚动方向为水平时，如何显示设置的 ListView 的中间孩子？

Question

So, I am trying to show pricing cards.

Where idea is to show them horizontally scrollable, so I used listView and set the scrollDirection: Axis.horizontal but, now as it gets render it show the first child in a weird position.

So, I was trying if I can show the middle child on-screen rather than the first. Like shown here:

Also, is it possible to add more margin to the children from ListView? or any other way.

Following is my code:

Container _priceCard() {
    return Container(
      margin: new EdgeInsets.only(top: 35),
      height: 480,
      child: ListView(
        shrinkWrap: true,
        scrollDirection: Axis.horizontal,
        children: <Widget>[
          Card(
            child: InkWell(
              // splashColor: Colors.blue.withAlpha(30),
              onTap: () {
                print('Card tapped.');
              },
              child: Container(
                width: 300,
                height: 450,
                padding: new EdgeInsets.all(30),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Text(
                      '3 month Test Pass',
                      style:
                          TextStyle(fontSize: 23, fontWeight: FontWeight.bold),
                    ),
                    Container(
                      margin: new EdgeInsets.only(top: 10),
                      child: Text(
                        '50% off for early Birds',
                        style: TextStyle(color: Colors.black54, fontSize: 16),
                      ),
                    ),
                    Container(
                      margin: new EdgeInsets.only(top: 40),
                      child: Text(
                        'INR 49/month',
                        style: TextStyle(
                            fontSize: 21, fontWeight: FontWeight.bold),
                      ),
                    ),
                    Container(
                      margin: new EdgeInsets.only(top: 7),
                      child: Text(
                        'INR 147 for 90 days',
                        style: TextStyle(
                            color: Colors.black54,
                            fontSize: 16,
                            fontWeight: FontWeight.bold),
                      ),
                    ),
                    Container(
                      margin: new EdgeInsets.only(top: 30),
                      child: Text(
                        'New live exam every Monday',
                        style: TextStyle(
                          color: Colors.black87,
                          fontSize: 16,
                        ),
                      ),
                    ),
                    Container(
                      margin: new EdgeInsets.only(top: 15),
                      child: Text(
                        'Unlimited practise tests series',
                        style: TextStyle(
                          color: Colors.black87,
                          fontSize: 16,
                        ),
                      ),
                    ),
                    Container(
                      margin: new EdgeInsets.only(top: 15),
                      child: Text(
                        'Paper tailored by AI for you',
                        style: TextStyle(
                          color: Colors.black87,
                          fontSize: 16,
                        ),
                      ),
                    ),
                    Container(
                      margin: new EdgeInsets.only(top: 15),
                      child: Text(
                        'Solved previous year questions',
                        style: TextStyle(
                          color: Colors.black87,
                          fontSize: 16,
                        ),
                      ),
                    ),
                    Container(
                      margin: new EdgeInsets.only(top: 35),
                      child: RaisedButton(
                        padding: const EdgeInsets.only(
                            top: 10, bottom: 10, left: 40, right: 40),
                        textColor: Colors.black,
                        color: Colors.green,
                        child: Text(
                          'Buy Now',
                          style: TextStyle(fontSize: 20),
                        ),
                        onPressed: null,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
          Card(
            child: InkWell(
              // splashColor: Colors.blue.withAlpha(30),
              onTap: () {
                print('Card tapped.');
              },
              child: Container(
                width: 300,
                height: 450,
                padding: new EdgeInsets.all(30),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Text(
                      '3 month Test Pass',
                      style:
                          TextStyle(fontSize: 23, fontWeight: FontWeight.bold),
                    ),
                    Container(
                      margin: new EdgeInsets.only(top: 10),
                      child: Text(
                        '50% off for early Birds',
                        style: TextStyle(color: Colors.black54, fontSize: 16),
                      ),
                    ),
                    Container(
                      margin: new EdgeInsets.only(top: 40),
                      child: Text(
                        'INR 49/month',
                        style: TextStyle(
                            fontSize: 21, fontWeight: FontWeight.bold),
                      ),
                    ),
                    Container(
                      margin: new EdgeInsets.only(top: 7),
                      child: Text(
                        'INR 147 for 90 days',
                        style: TextStyle(
                            color: Colors.black54,
                            fontSize: 16,
                            fontWeight: FontWeight.bold),
                      ),
                    ),
                    Container(
                      margin: new EdgeInsets.only(top: 30),
                      child: Text(
                        'New live exam every Monday',
                        style: TextStyle(
                          color: Colors.black87,
                          fontSize: 16,
                        ),
                      ),
                    ),
                    Container(
                      margin: new EdgeInsets.only(top: 15),
                      child: Text(
                        'Unlimited practise tests series',
                        style: TextStyle(
                          color: Colors.black87,
                          fontSize: 16,
                        ),
                      ),
                    ),
                    Container(
                      margin: new EdgeInsets.only(top: 15),
                      child: Text(
                        'Paper tailored by AI for you',
                        style: TextStyle(
                          color: Colors.black87,
                          fontSize: 16,
                        ),
                      ),
                    ),
                    Container(
                      margin: new EdgeInsets.only(top: 15),
                      child: Text(
                        'Solved previous year questions',
                        style: TextStyle(
                          color: Colors.black87,
                          fontSize: 16,
                        ),
                      ),
                    ),
                    Container(
                      margin: new EdgeInsets.only(top: 35),
                      child: RaisedButton(
                        padding: const EdgeInsets.only(
                            top: 10, bottom: 10, left: 40, right: 40),
                        textColor: Colors.black,
                        color: Colors.green,
                        child: Text(
                          'Buy Now',
                          style: TextStyle(fontSize: 20),
                        ),
                        onPressed: null,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
          Card(
            child: InkWell(
              // splashColor: Colors.blue.withAlpha(30),
              onTap: () {
                print('Card tapped.');
              },
              child: Container(
                width: 300,
                height: 450,
                padding: new EdgeInsets.all(30),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Text(
                      '3 month Test Pass',
                      style:
                          TextStyle(fontSize: 23, fontWeight: FontWeight.bold),
                    ),
                    Container(
                      margin: new EdgeInsets.only(top: 10),
                      child: Text(
                        '50% off for early Birds',
                        style: TextStyle(color: Colors.black54, fontSize: 16),
                      ),
                    ),
                    Container(
                      margin: new EdgeInsets.only(top: 40),
                      child: Text(
                        'INR 49/month',
                        style: TextStyle(
                            fontSize: 21, fontWeight: FontWeight.bold),
                      ),
                    ),
                    Container(
                      margin: new EdgeInsets.only(top: 7),
                      child: Text(
                        'INR 147 for 90 days',
                        style: TextStyle(
                            color: Colors.black54,
                            fontSize: 16,
                            fontWeight: FontWeight.bold),
                      ),
                    ),
                    Container(
                      margin: new EdgeInsets.only(top: 30),
                      child: Text(
                        'New live exam every Monday',
                        style: TextStyle(
                          color: Colors.black87,
                          fontSize: 16,
                        ),
                      ),
                    ),
                    Container(
                      margin: new EdgeInsets.only(top: 15),
                      child: Text(
                        'Unlimited practise tests series',
                        style: TextStyle(
                          color: Colors.black87,
                          fontSize: 16,
                        ),
                      ),
                    ),
                    Container(
                      margin: new EdgeInsets.only(top: 15),
                      child: Text(
                        'Paper tailored by AI for you',
                        style: TextStyle(
                          color: Colors.black87,
                          fontSize: 16,
                        ),
                      ),
                    ),
                    Container(
                      margin: new EdgeInsets.only(top: 15),
                      child: Text(
                        'Solved previous year questions',
                        style: TextStyle(
                          color: Colors.black87,
                          fontSize: 16,
                        ),
                      ),
                    ),
                    Container(
                      margin: new EdgeInsets.only(top: 35),
                      child: RaisedButton(
                        padding: const EdgeInsets.only(
                            top: 10, bottom: 10, left: 40, right: 40),
                        textColor: Colors.black,
                        color: Colors.green,
                        child: Text(
                          'Buy Now',
                          style: TextStyle(fontSize: 20),
                        ),
                        onPressed: null,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

Currently, the children are the same. Also, for now, my children will be 3 only. Hence the middle one to show.

Answer 1

Example of PageView

class SO extends StatefulWidget {
  @override
  _SOState createState() => _SOState();
}

class _SOState extends State<SO> {
  var colors = [Colors.red, Colors.pink, Colors.yellow, Colors.green];
  PageController _controller;

  @override
  void initState() {
    super.initState();
    _controller = PageController(viewportFraction: .9,initialPage: 1);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      backgroundColor: Colors.blue,
      body: PageView.builder(
        controller: _controller,
        itemCount: colors.length,
        itemBuilder: (BuildContext context, int index) {
          return Container(
            margin: EdgeInsets.symmetric(horizontal: 8, vertical: 8),
            child: Card(
              color: colors[index],
            ),
          );
        },
      ),
    );
  }
}