Hero Animations

A Hero Animation in one sentence is simply an element of one screen “flying” to the next when the app goes to the next page.

Use the Hero widget to animate a widget from one screen to the next. This recipe uses the following steps:

  1. Create two screens showing the same image.
  2. Add a Hero widget to the first screen.
  3. Add a Hero widget to the second screen.

And here comes my logic implementation :

 Hero(tag:'photo1',child:_circleImage(context,'photo1',"https://auto.ndtvimg.com/car-images/large/ferrari/488-gtb/ferrari-488-gtb.jpg?v=6"),),

Navigator.push(context, MaterialPageRoute(builder: (context)=> Detail(imageUrl,tag))),

main.dart

import 'package:flutter/material.dart';
import './ui/home.dart';

void main() => runApp(
  MaterialApp(
    home: Home(),
  )
);

home.dart

import 'package:flutter/material.dart';
import 'detail.dart';

class Home extends StatelessWidget {

  double rating=0.0;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('home'),
        centerTitle: true,
      ),
      body: SafeArea(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              Column(
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Hero(
                    tag: 'photo1',
                    child:  _circleImage(context,'photo1',"https://auto.ndtvimg.com/car-images/large/ferrari/488-gtb/ferrari-488-gtb.jpg?v=6"),
                  ),
                  Hero(
                    tag: 'photo2',
                    child: _circleImage(context,'photo2',"https://spectatecars.com/wp-content/uploads/2017/10/2019-Ferrari-488-Spider-featured-815x527.jpg"),
                  ),
                  Hero(
                    tag: 'photo3',
                    child: _circleImage(context,'photo3',"https://www.thetruthaboutcars.com/wp-content/uploads/2019/01/2019-mercedes-benz-a-class-sedan-e1547745740100-610x408.jpg"),
                  )
                ],
              )
            ],
          )),
    );
  }
  
  Widget _circleImage( BuildContext context, String tag,String imageUrl){
    return GestureDetector(
      onTap: ()=> Navigator.push(context, MaterialPageRoute(builder: (context)=> Detail(imageUrl,tag))),
      child: Container(
        width: 120,
        height: 120,
        decoration: BoxDecoration(
            shape: BoxShape.circle,
            image: DecorationImage(image: NetworkImage(imageUrl),fit: BoxFit.fill)
        ),
      ),
    );

  }
}

detail.dart

import 'package:flutter/material.dart';

class Detail extends StatelessWidget{
  String imageUrl;
  String tag;
  Detail(this.imageUrl,this.tag);
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('detail'),
        centerTitle: true,
      ),
      body: Center(
          child: Hero(tag: tag,
            child:  Container(
              width: double.infinity,
              height: MediaQuery.of(context).size.height/2,
              decoration:  BoxDecoration(
                  shape: BoxShape.rectangle,
                  image: DecorationImage(image: NetworkImage(imageUrl),fit: BoxFit.fill)
              ),
            ),
          )
      ),
    );
  }
}

You can Download Source Code via Github.

34 Replies to “Hero Animations”

  1. I was recommended this web site by my cousin. I
    am not sure whether this post is written by him as no one else know such detailed about my problem.
    You are amazing! Thanks!

  2. We are a group of volunteers and opening a new scheme in our community.
    Your site offered us with valuable info to work on. You’ve done an impressive
    job and our entire community will be grateful to you.

  3. you are in point of fact a good webmaster. The web site loading pace is amazing.

    It sort of feels that you’re doing any distinctive trick.
    Furthermore, The contents are masterpiece. you’ve done a excellent job on this subject!

  4. Wonderful beat ! I would like to apprentice while you amend your web site, how
    can i subscribe for a weblog site? The account aided me a acceptable deal.

    I were a little bit familiar of this your broadcast offered shiny clear idea

  5. That is a very good tip particularly to those new to the blogosphere.

    Simple but very accurate information… Many thanks for
    sharing this one. A must read post!

  6. Thank you a bunch for sharing this with all people you really recognize what you’re talking approximately!
    Bookmarked. Please also consult with my website
    =). We will have a link alternate agreement among us

  7. Hello, i think that i saw you visited my blog so i
    came to “return the favor”.I’m attempting to find things to improve my site!I
    suppose its ok to use a few of your ideas!!

  8. Greate article. Keep writing such kind of info
    on your blog. Im really impressed by it.
    Hello there, You have performed an incredible job.
    I will certainly digg it and in my opinion suggest to my friends.
    I’m confident they’ll be benefited from this web site.

  9. I all the time used to study post in news papers but now as I am a user of net
    thus from now I am using net for posts, thanks to web.

  10. I’m typically to blogging and i actually recognize your content. The article has actually peaks my interest. I am going to bookmark your site and hold checking for brand spanking new information.

  11. I抎 should verify with you here. Which isn’t one thing I often do! I take pleasure in studying a put up that can make individuals think. Also, thanks for permitting me to remark!

  12. That is the right blog for anyone who desires to seek out out about this topic. You realize so much its almost onerous to argue with you (not that I actually would need匟aHa). You undoubtedly put a new spin on a subject thats been written about for years. Nice stuff, simply great!

  13. Howdy! I simply would like to give a huge thumbs up for the good data you might have here on this post. I can be coming back to your blog for extra soon.

Leave a Reply

Your email address will not be published.