Flutter

Animasi Dasar: AnimatedContainer

Penjelasan

AnimatedContainer adalah cara PALING SEDERHANA membuat animasi di Flutter (disebut "implicit animation") — kamu TIDAK PERLU menulis kode animasi manual (keyframe, interpolasi), cukup ubah nilai properti (width, height, color, dst) lewat setState(), dan Flutter OTOMATIS meng-animasikan transisi dari nilai lama ke nilai baru selama duration yang ditentukan.

Contoh Konsep

class KotakAnimasi extends StatefulWidget {
    const KotakAnimasi({super.key});

    @override
    State<KotakAnimasi> createState() => _KotakAnimasiState();
}

class _KotakAnimasiState extends State<KotakAnimasi> {
    bool besar = false;

    @override
    Widget build(BuildContext context) {
        return GestureDetector(
            onTap: () => setState(() => besar = !besar),
            child: AnimatedContainer(
                duration: const Duration(milliseconds: 300),
                width: besar ? 200 : 100,
                height: besar ? 200 : 100,
                color: besar ? Colors.blue : Colors.red,
            ),
        );
    }
}

Praktikum

Buat StatefulWidget dengan AnimatedContainer yang, saat di-tap lewat GestureDetector, berubah opacity dari 1.0 ke 0.3 (dan sebaliknya) dengan duration 500 milliseconds.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

AnimatedContainer HANYA meng-animasikan properti yang memang didukungnya (width, height, color, padding, dst) — untuk animasi yang lebih kompleks/kustom (mis. animasi rotasi berulang, animasi berbasis fisika), butuh AnimationController manual ("explicit animation"), topik lanjutan di luar cakupan materi dasar ini.

← Kembali Custom Widget: Membuat Widget Reusable Lanjutkan → Local Storage: shared_preferences