CODEWITHSUNDEEP
androidiosflutterdartflutter-layout
abhirham
abhirham

Reputation: 191

Create a card widget which will expand to a new screen when swiped up

I am learning flutter and I have come across this UI on dribble which I am trying to replicate for practice.

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

As you can see in the above gif, there is a card widget which expands to a new screen when you swipe up. And you can pop the screen by swiping down (or clicking on the back button). How do I implement this? I want it to look and feel exactly like shown in the gif.

I am pretty new to flutter so if you could provide a little more detail to your explanations it would be amazing.

Upvotes: 0

Views: 2012

Answers (2)

Shruti Ramnandan Sharma
Shruti Ramnandan Sharma

Reputation: 4545

hey I tried 2 animation but couldn't made exactly same.

I just used hero widget & ScaleTranstion widget

hope you like it. 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()),
          ),
        ),
      )
    );
  }
}

SECOND TRIED:

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

enter image description here

Upvotes: 0

suztomo
suztomo

Reputation: 5202

Use container transform in animations. https://pub.dev/packages/animations

Upvotes: 2

Related Questions