Flutter Image Transition Animation between two screens

Published August 15, 2021

In this flutter example we are going to implement Image Transition between two screens. This image transition will show animation between two screens we called this animation as Flutter Hero Animation. For this we will use the Flutter Hero widget.

Animate Image between two Screens in Flutter

This transition animation done by flutter hero widget, which will manage by hero tag property

So when we navigate from one screen to other screen Flutter can identify these tags and make animate for that widgets.

Let's get stared

Step 1: Create Flutter application

Step 2: Create Listview widget with list items. Here we are taking the listview and adding the listitems by using Hero,Image,Container,text widgets

here is the code

import 'package:flutter/material.dart';
import 'package:flutter_responsive_dashboard/widgets/details.dart';

class SmallScreen extends StatelessWidget{
  @override
  Widget build(BuildContext context) {

    return Container(constraints: BoxConstraints.expand(),color: Colors.grey,
    child:ListView(children: [
      createWidget("1","t1","https://fiverr-res.cloudinary.com/images/t_main1,q_auto,f_auto,q_auto,f_auto/gigs/217953440/original/6869956d24c0c3cf971d8a95a56f46d26e6fb871/be-your-virtual-math-tutor.png",context),
      createWidget("2","t2","https://fiverr-res.cloudinary.com/t_gig_cards_web,q_auto,f_auto/gigs/216899680/original/7dfbe53843a65ce85ef74979de116f0918b8930a.png",context),
      createWidget("3","t3","https://fiverr-res.cloudinary.com/video/upload/t_gig_cards_web/s28ve0xgaaremkcw1czb.png",context),
      createWidget("4","t4","https://fiverr-res.cloudinary.com/t_gig_cards_web,q_auto,f_auto/gigs/219212797/original/61a1fe67575c81d3b6ef7f53da7bde9165d2fd78.png",context),

    ],),);
  }


  createWidget(tag,tag2,path,context) {
    return GestureDetector(onTap: (){
      Navigator.push(context, MaterialPageRoute(builder: (context){
        return Details(tag,tag2,path);
      }));
    },
      child: Container(
        padding: EdgeInsets.symmetric(vertical: 8, horizontal: 15),
        margin: EdgeInsets.only(bottom: 0.0, top: 8),
        decoration: BoxDecoration(
            color: Colors.white,
            border: Border(
                top: BorderSide(color: Colors.black54, width: 0.50),
                bottom: BorderSide(color: Colors.black54, width: 0.50))),
        child: SingleChildScrollView(
          child: Column(
            children: [
              Row(
                children: [
                  Container(
                    width: 40,
                    height: 40,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.all(Radius.circular(40))),
                    child: ClipRRect(
                        borderRadius: BorderRadius.all(Radius.circular(40)),
                        child: Image.network(path)),
                  ),
                  SizedBox(
                    width: 4,
                  ),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        tag,
                        style: TextStyle(
                            fontSize: 18, fontWeight: FontWeight.bold),
                      ), SizedBox(
                        height: 10,
                      ),

                    ],
                  )
                ],
              ),

              Container(
                width: double.infinity,
                child: Text(
                  "Linkedin Design to decoration adding hero animation to make image animation",
                  style: TextStyle(color: Colors.blue),
                ),
              ),
              Container(
                height: 200,
                width: double.infinity,
                child: Hero(
                  tag:tag,
                  child: Image.network(
                    path,
fit: BoxFit.cover,
                  ),
                ),
              ),
              SizedBox(
                height: 10,
              ),

              SizedBox(
                height: 10,
              ),

              Divider(
                thickness: 0.50,
                color: Colors.black26,
              ),

            ],
          ),
        ),
      ),
    );
  }

}

Step 3: Create Second Screen with adding the Hero,Image widgets

This will be looks like this

Flutter Image Transition Animation with Hero widget

import 'package:flutter/material.dart';

class Details extends StatelessWidget{
  String tag;
  String tag2;
  String image;
  Details(this.tag,this.tag2,this.image);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(leading: InkWell(onTap: (){
        Navigator.pop(context);
      },child: Icon(Icons.arrow_back_ios,)),),
      body: Container(
        constraints: BoxConstraints.expand(),
        color: Colors.grey,
        child: Center(
          child: GestureDetector(onTap: (){
            Navigator.pop(context);
          },
            child: Container(
              padding: EdgeInsets.symmetric(vertical: 8, horizontal: 15),
              margin: EdgeInsets.only(bottom: 0.0, top: 8),
              decoration: BoxDecoration(
                  color: Colors.white,
                  border: Border(
                      top: BorderSide(color: Colors.black54, width: 0.50),
                      bottom: BorderSide(color: Colors.black54, width: 0.50))),
              child: Column(
                children: [
                  Row(
                    children: [
                      Container(
                        width: 40,
                        height: 40,
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.all(Radius.circular(40))),
                        child: ClipRRect(
                            borderRadius: BorderRadius.all(Radius.circular(40)),
                            child: Image.network(image)),
                      ),
                      SizedBox(
                        width: 4,
                      ),
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            tag,
                            style: TextStyle(
                                fontSize: 18, fontWeight: FontWeight.bold),
                          ), SizedBox(
                            height: 10,
                          ),

                        ],
                      )
                    ],
                  ),

                  Container(
                    width: double.infinity,
                    child: Hero(
                      tag:tag2,
                      child: Text(
                        "Linkedin Design to decoration adding hero animation to make image animation",
                        style: TextStyle(color: Colors.blue),
                      ),
                    ),
                  ),
                  Container(

                    width: double.infinity,
                    child: Hero(
                      tag:tag,
                      child: Image.network(
                        image,

                      ),
                    ),
                  ),
                  SizedBox(
                    height: 10,
                  ),

                  SizedBox(
                    height: 10,
                  ),

                  Divider(
                    thickness: 0.50,
                    color: Colors.black26,
                  ),

                ],
              ),
            ),
          ),
        ),
      ),
    );
  }

}

Step 4: Let's run application

Conclusion: In this Flutter example we implemented Image transition animation between two screens by using the Hero widget.

Article Contributed By :

576 Views

Projects By category