Создайте виджет карты, который при пролистывании развернется на новый экран

Question

Я учусь трепетать, и я наткнулся на этот интерфейс на капле, который я пытаюсь воспроизвести для практики.

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

Как вы можете видеть в приведенном выше GIF есть виджет карты, который открывается при открытии. И вы можете открыть экран, проводя вниз (или нажав на кнопку назад). Как мне это реализовать? Я хочу, чтобы он выглядел и чувствовал себя точно так, как показано на рисунке.

Я довольно новичок в трепетании, поэтому, если бы вы могли предоставить немного больше подробностей своим объяснениям, это было бы удивительно.

Answer 1

Использование преобразования контейнера в анимации. https://pub.dev/packages/animations

Answer 2

эй, я попробовал 2 анимации, но не смог сделать точно то же самое.

Я просто использовал hero widget & ScaleTranstion widget

надеюсь, вам понравится. см. Видео

КОД:

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