创建卡片小部件，将其向上滑动时会扩展到新屏幕

Question

我正在学习颤动，并且在运球中遇到了这个UI，我尝试将其复制以进行练习。

https://gph.is/g/4oLJ0k5

如您在上面的gif中看到的，有一个卡片小部件，向上滑动时会展开到新屏幕。您可以通过向下滑动（或单击“后退”按钮）弹出屏幕。我该如何实施？我希望它的外观和感觉完全像gif所示。

我扑朔迷离，所以如果您能为您的解释提供更多细节，那就太好了。

Answer 1

在动画中使用容器变换。https://pub.dev/packages/animations

Answer 2

嘿，我尝试了2个动画，但制作的效果不尽相同。

我刚刚使用了hero小部件和ScaleTranstion小部件

希望您喜欢它。see_video

CODE：

class AnimationDemo extends StatefulWidget {
  @override
  _AnimationDemoState createState() => _AnimationDemoState();
}

class _AnimationDemoState extends State<AnimationDemo> {

  int changeIndex=0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
     appBar: AppBar(
       title: Text("Animation Demo"),
     ),
     body: Container(
       decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topRight,
          end: Alignment.bottomLeft,
          stops: [
            0.1,
            0.4,

          ],
        colors: [
         Colors.blue, // changeIndex.isEven? Colors.yellow:Colors.blue,
          Colors.indigo,//changeIndex.isEven ?Colors.red:Colors.indigo,

        ])),
      //  color: Colors.white,
       alignment: Alignment.center,
       padding: const EdgeInsets.all(10),
       child:  new Center(
        child: new Container(
              alignment: Alignment.center,
              height: 300.0,
              child: new ListView(
                scrollDirection: Axis.horizontal,
                children: new List.generate(10, (int index) {
                  setState(() {
                    changeIndex = index;
                  });
                  print("index:$index");
                  return new InkWell(
                    child: Hero(
                      tag: index,
                      child: Card(
                        color: Colors.white,
                         child: new Container(
                           alignment: Alignment.center,
                            width: 300.0,
                            height: 300.0,
                            child: new Text("$index"),
                          ),
                        ),
                    ),
                    onTap: (){
                      Navigator.of(context)
                        .push(MaterialPageRoute<Null>(builder: (BuildContext context) {
                      return new SecondPage(index: index,);
                    }));
                    // Navigator.of(context).push(new SecondAnimationPage(index)); ANOTHER ANIMATION WITH SCALE TRANSITION WIDGET.
                    },
                  );
                }),
              ),
            ),

        ), 
      )
    );
  }


 }




 class SecondPage extends StatelessWidget {
  final int index ;

  const SecondPage({Key key, this.index}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Hero Animations Example")),
      body: Hero(
        tag: index,
        child: Container(
          alignment: Alignment.center,
          child: Card(
            elevation: 5,
            child: Text(index.toString()),
          ),
        ),
      )
    );
  }
}

第二次尝试：

class SecondAnimationPage extends CupertinoPageRoute {
  final int index;
  SecondAnimationPage(this.index) : super(builder: (BuildContext context) => new ViewPage(index: index,));

  @override
  Widget buildPage(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation) {
    return new 
      ScaleTransition(
      scale: animation,
      child:  new ViewPage(index: index,)

    );

  }
}

class ViewPage extends StatefulWidget {
  final int index;

  const ViewPage({Key key, this.index}) : super(key: key);
  @override
  _ViewPageState createState() => new _ViewPageState();
}

class _ViewPageState extends State<ViewPage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Transition Animation'),
      ),
      body: new Center(
        child: new Text(widget.index.toString()),
      ),
    );
  }
}