Hero animasyonu

Hero ile ekranlar arası geçiş animasyonu yapmayı öğrenirsin.

Hero nedir?

Hero, iki ekran arasında paylaşılan bir widget'ın yumuşak geçişini sağlar. Her iki ekrandaki Hero'ya aynı tag verirsin; Navigator geçişinde Flutter otomatik olarak widget'ı büyütüp küçülterek taşır.

Hero(
  tag: 'logo',
  child: Image.asset('logo.png'),
)

Hero transition

Hero, her iki ekrandaki tag değerinin aynı olmasına dikkat eder. child parametresi taşınacak widget'ı belirler. Geçiş sırasında widget, başlangıç ekranındaki konumdan hedef ekrandaki konuma yumuşakça hareket eder.

Uygulama Hero widget'ı oluştur

main içinde tag'i 'logo' ve child'ı Text('Logo') olan bir Hero widget'ı oluştur ve tipini yazdır.

Örnek çözümü göster

import 'package:flutter/material.dart';

void main() {
  final hero = Hero(
    tag: 'logo',
    child: Text('Logo'),
  );
  print(hero.runtimeType);
}

Kendini test et

Hero widget'ında iki ekran arası eşleşmeyi sağlayan parametre hangisidir?
- color
- tag
- child
- title
Cevabı göster

tag — Hero'ların tag değerleri aynı olmalıdır; Flutter bu tag'e göre iki ekrandaki widget'ı eşleştirir.

Hero'ya tag ver

Hero(
  ____: 'avatar',
  child: CircleAvatar(),
)

Cevabı göster

Hero(
  tag: 'avatar',
  child: CircleAvatar(),
)

Hero eşleşmeleri

Hero

Ekranlar arası geçiş widget'ı
tag

Eşleştirme anahtarı
child

Taşınan widget
transition

Geçiş animasyonu

Sıradaki ders: Stagger animation

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler