How To Create Hero Animation Using Flutter Android App

admin_img Posted By Bajarangi soft , Posted On 27-11-2020

You’ve probably seen hero animations many times. For example, a screen displays a list of thumbnails representing items for sale. Selecting an item flies it to a new screen, containing more details and a “Buy” button. Flying an image from one screen to another is called a hero animation in Flutter, though the same motion is sometimes referred to as a shared element transition.

How To Create Hero Animation Using Flutter Android App

 Hero Animation
Complete Code For  Hero Animation In Flutter
main.dart

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

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}
class MyHomePage extends StatefulWidget {
  final String title;
  MyHomePage({this.title});
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          backgroundColor: Colors.deepOrange,
          title: Text("Hero Animations")),
      body: Center(
        child: GestureDetector(
          onTap: () {
            Navigator.of(context)
                .push(MaterialPageRoute<Null>(builder: (BuildContext context) {
              return new SecondHero();
            }));
          },
          child: Hero(
              tag: 'hero-tag',
              child: Image.asset(
                'assets/images/image2.jpg',
                height: 80,
                width: 70,
                fit: BoxFit.cover,
              )),
        ),
      ),
    );
  }
}

class SecondHero extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: AppBar(
        backgroundColor: Colors.deepOrange,
          title: Text("Hero Animations")),
      body: ListView(
        children: <Widget>[
          Card(
            child: ListTile(
              leading: Hero(
                  tag: 'hero-tag',
                  child: Image.asset(
                    'assets/images/image2.jpg',
                    height: 60,
                    width: 60,
                    fit: BoxFit.cover,
                  )),
              title: Text("Butterfly"),
              subtitle: Text("Very Sweet"),
            ),
          ),
        ],
      ),
    );
  }
}

Related Post