AnimatedContainer

AnimatedContainer ile özellik değişimini animasyonlu yapmayı öğrenirsin.

AnimatedContainer nedir?

AnimatedContainer, Container'ın animasyonlu halidir. width, height, color gibi özellikleri değiştirdiğinde bu değişimi duration süresinde yumuşakça animasyonla yapar. Yeni değer verirsin, gerisini Flutter halleder.

class Ornek extends StatelessWidget {
  const Ornek({super.key});

  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      duration: const Duration(seconds: 1),
      width: 50,
      color: Colors.blue,
    );
  }
}

Bu widget, width ve color değerleri değiştiğinde otomatik olarak geçiş animasyonu oynatır.

duration parametresi

duration parametresi bir Duration nesnesi alır ve animasyonun toplam süresini belirler. Bu parametre zorunludur; verilmezse AnimatedContainer hangi hızla geçiş yapacağını bilemez. Duration(seconds: 1) bir saniyelik, Duration(milliseconds: 300) ise 300 milisaniyelik geçiş yapar.

AnimatedContainer(
  duration: const Duration(milliseconds: 300),
  width: 100,
)

Uygulama AnimatedContainer tanımla

Bir StatelessWidget olan Ornek tanımla. build metodu bir AnimatedContainer döndürsün; duration Duration(seconds: 1), width 50 olsun. main içinde 'hazir' yazdır.

Örnek çözümü göster

import 'package:flutter/material.dart';

class Ornek extends StatelessWidget {
  const Ornek({super.key});

  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      duration: const Duration(seconds: 1),
      width: 50,
    );
  }
}

void main() {
  print('hazir');
}

Kendini test et

AnimatedContainer'ın hangi parametresi animasyonun süresini belirler?
- width
- color
- child
- duration
Cevabı göster

duration — duration parametresi animasyonun ne kadar süreceğini belirler. width ve color animasyonlanan özelliklerdir, child ise iç widget'tır; süreyle ilgileri yoktur.

duration parametresi

AnimatedContainer(
  ____: const Duration(seconds: 1),
  width: 50,
)

Cevabı göster

AnimatedContainer(
  duration: const Duration(seconds: 1),
  width: 50,
)

AnimatedContainer parçaları

AnimatedContainer

animasyonlu container
duration

animasyon süresi
width

genişlik değeri
color

renk değeri

Sıradaki ders: Tween

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler