Posts

Bismillah pada artikel kali ini, kita akan mencoba menggunakan animasi gambar transisi 2 rute navigasi.

Dengan menggunakan transisi, pengguna akan tahu bahwa ia telah berpindah halaman.

Pada Flutter, untuk membuat animasi transisi 2 gambar, kita dapat menggunakan widget Hero.

Dengan menggunakan widget Hero, transisi perpindahan gambar dari dua halaman yang berbeda akan dibuat secara otomatis.

mari kita buat

Pertama kita download gambar-gambar yang dibutuhkan, lalu daftarkan assetnya di pubspec.yaml

images : https://drive.google.com/drive/u/0/folders/1_MxLWibmcJxLki6xCBVlScgTmqdRPWRw

register gambarnya di pubspec.yaml seperti berikut :

Jika sudah, kita bisa langsung masuk ke codingan

pada halaman awal, kita buat listing daftar buah-buahannya seperti berikut :

class DaftarBuah extends StatelessWidget {

  var buah = ['apple.jpg', 'grapes.jpg', 'orange.jpg', 'pear.jpg', 'strawberry.jpg'];
  var namanya = ['Apel', 'Anggur', 'Jeruk', 'Pir', 'Stroberi'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Daftar Buah-buahan"),
      ),
      body: Container(
        padding: EdgeInsets.all(16),
        child: ListView.builder(
          itemCount: buah.length,
          itemBuilder: (BuildContext context, int index) {
            return ListTile(
              leading: Hero(tag: namanya[index], child: Image.asset('images/'+buah[index]),),
              title: Text(namanya[index]),
              onTap: () {
                Navigator.push(context, MaterialPageRoute(builder: (context) => DetailBuah('images/'+buah[index], namanya[index])));
              },
            );
          },
        ),
      ),
    );
  }
}

hasilnya seperti ini :

lalu untuk halaman detailnya kita bua seperti berikut :

class DetailBuah extends StatelessWidget {

  String buah;
  String namanya;

  DetailBuah(this.buah, this.namanya);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(namanya),
      ),
      body: ListView(
        children: <Widget>[
          Hero(tag: namanya, child: Image.asset(buah),),
          Text(namanya),
        ],
      ),
    );
  }
}

Jika pada list buah diatas di tap, maka akan muncul halaman seperti berikut dengan gambarbuah yang tampil secara perlahan membesar dari ukuran gambar pada halaman list buah

Penjelasan :
Untuk menggunakan Hero, kita perlu menambahkan tag, pada tag ini berfungsi sebagai id dari tiap gambar, sehingga halaman detail tau bahwa gambar mana yang akan ditransisikan

2 gambar yang akan ditransisikan harus menggunakan tag yang sama pada masing2 halaman.

kode akhir project :

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: DaftarBuah()
    );
  }
}

class DaftarBuah extends StatelessWidget {

  var buah = ['apple.jpg', 'grapes.jpg', 'orange.jpg', 'pear.jpg', 'strawberry.jpg'];
  var namanya = ['Apel', 'Anggur', 'Jeruk', 'Pir', 'Stroberi'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Daftar Buah-buahan"),
      ),
      body: Container(
        padding: EdgeInsets.all(16),
        child: ListView.builder(
          itemCount: buah.length,
          itemBuilder: (BuildContext context, int index) {
            return ListTile(
              leading: Hero(tag: namanya[index], child: Image.asset('images/'+buah[index]),),
              title: Text(namanya[index]),
              onTap: () {
                Navigator.push(context, MaterialPageRoute(builder: (context) => DetailBuah('images/'+buah[index], namanya[index])));
              },
            );
          },
        ),
      ),
    );
  }
}

class DetailBuah extends StatelessWidget {

  String buah;
  String namanya;

  DetailBuah(this.buah, this.namanya);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(namanya),
      ),
      body: ListView(
        children: <Widget>[
          Hero(tag: namanya, child: Image.asset(buah),),
          Text(namanya),
        ],
      ),
    );
  }
}