title: How do I convert a scrolling view into a ListView in Flutter?
body: <p>I have a scrolling view of a few cards in a stack. Upon scrolling the card selected disappears. I want to retain this card and the consequent card and have all of them displayed in a ListView and not disappear. 
  I saw this feature implemented in this repository and it looks like this: </p>
  
  <p><a href="https://i.stack.imgur.com/8u0Yt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8u0Yt.png" alt="enter image description here"></a>
  However this shows me only one card at a time. I want to achieve the cards to transition into a list view after removed from the stack. 
  So I tried implementing this and it worked but I wasn't able to achieve the stack below. 
  This is the code for my implementation: </p>
  
  <pre><code>class _HomePageState extends State&lt;HomePage&gt; {
    final _pageController = PageController(
      viewportFraction: 0.3,
    );
  
    List&lt;CreditCard&gt; _creditCards = [];
  
    @override
    void initState() {
      super.initState();
  
      _creditCards = [
        CreditCard(
          decoration: BoxDecoration(
            color: Colors.black.withOpacity(0.6),
          ),
          image: 'images/visa.png',
          name: 'ANDREW MITCHELL',
          number: '1234',
          company: Text(
            'AMERICAN \nEXPRESS',
            textAlign: TextAlign.right,
            style: TextStyle(
              color: Colors.white,
              fontWeight: FontWeight.w800,
              fontSize: 16,
            ),
          ),
        ),
        CreditCard(
          decoration: BoxDecoration(
            color: kRed.withOpacity(0.4),
          ),
          image: 'images/visa.png',
          name: 'ANDREW MITCHELL',
          number: '2434',
          company: Image.asset(
            'images/virgin.png',
            height: 50,
          ),
        ),
        CreditCard(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.centerLeft,
              end: Alignment.centerRight,
              colors: [kBlue, kPurple],
              stops: [0.3, 0.95],
            ),
          ),
          image: 'images/mastercard.png',
          name: 'ANDREW MITCHELL',
          number: '4567',
          company: Text(
            'AMERICAN \nEXPRESS',
            textAlign: TextAlign.right,
            style: TextStyle(
              color: Colors.white,
              fontWeight: FontWeight.w800,
              fontSize: 16,
            ),
          ),
        ),
      ];
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: Center(
          child: PageView.builder(
            controller: _pageController,
            scrollDirection: Axis.vertical,
            itemCount: _creditCards.length,
            itemBuilder: (context, index) =&gt; _builder(index),
          ),
        ),
      );
    }
  
    _builder(int index) {
      CreditCard _card = _creditCards[index];
      return AnimatedBuilder(
        animation: _pageController,
        builder: (context, child) {
          double value = 1.6;
  
          if (_pageController.position.haveDimensions) {
            value = _pageController.page - index;
  
            if (value &gt;= 0) {
              double _lowerLimit = 0+1.55;
              double _upperLimit = pi / 2;
  
              value = (_upperLimit - (value.abs() * (_upperLimit - _lowerLimit)))
                  .clamp(_lowerLimit, _upperLimit);
              value = _upperLimit - value;
              value *= -1;
            }
          } else {
            if (index == 0) {
              value = 0;
            } else if (index == 1) {
              value = -1;
            }
          }
  
          return Center(
            child: Transform(
              transform: Matrix4.identity()
                ..setEntry(3, 2, 0.001)
                ..rotateX(value),
              alignment: Alignment.center,
              child: child,
            ),
          );
        },
        child: _card,
      );
    }
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/fvAy0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fvAy0.png" alt="enter image description here"></a></p>