Flutter Animation – Membuat Animasi Properti Container

Untuk teman-teman yang akan baru memulai belajar Flutter silahkan masuk ke artikel ini dulu ya teman-teman ➡ Aplikasi Pertamaku “Halo Semuaaa…“. Jika sudah yuk lanjut baca artikel ini…

Jangan lupa baca artikel sebelumnya ya teman-teman ➡ Hukum Fisika Pada Animasi Widget

Seperti yang teman-teman ketahui, class Container menyediakan cara mudah untuk membuat widget dengan properti tertentu height, background color, padding, borders, dan masih banyak lagi.

Animasi sederhana sering kali melibatkan perubahan properti-properti pada Container selama aplikasi dijalankan. Misalnya, ketika kita ingin membuat animasi perubahan warna latar belakang dari abu-abu menjadi warna hijau yang tujuannya untuk menunjukkan bahwa item telah dipilih oleh pengguna.

Untuk membuat animasi pada banyak properti di Container, Flutter menyediakan widgetAnimatedContainer. Sama halnya seperti widget Container, AnimatedContainer  mengizinkan kita untuk mendefinisikan width, height, background colors, dan lain-lain. Namun saat AnimatedContainer di rebuilt dengan properti baru, AnimatedContainer secara otomatis teranimasikan antara value lama dan baru. Pada Flutter, jenis animasi ini dikenal sebagai “implicit animations”.

Artikel ini nantinya akan menjelaskan cara menggunakan AnimatedContainer untuk menganimasikan size, background color, dan border radius saat pengguna menekan tombol ▶. Berikut langkah-langkahnya:

1. Membuat StatefulWidget menggunakan default properties.
2. Membuat AnimatedContainer menggunakan properti.
3. Memulai animasi dengan melakukan rebuilding menggunakan properti baru.

1. Membuat StatefulWidget menggunakan default properties

Pertama kita buat class StatefulWidget dan State, gunakan custom State class untuk mendefinisikan properti yang berubah selama aplikasi dijalankan. Dalam hal ini properti yang harus kita definisikan yaitu width, height, color, dan border radius. Namun kita juga dapat mendefinisikan properti-properti tersebut menggunakan default value.

Pada cuplikan program di bawah, properti termasuk ke dalam custom State class sehingga dapat di-update saat pengguna menekan tombol ▶.

class AnimatedContainerApp extends StatefulWidget {
  @override
  _AnimatedContainerAppState createState() => _AnimatedContainerAppState();
}

class _AnimatedContainerAppState extends State<AnimatedContainerApp> {
  // Define the various properties with default values. Update these properties
  // when the user taps a FloatingActionButton.
  double _width = 50;
  double _height = 50;
  Color _color = Colors.green;
  BorderRadiusGeometry _borderRadius = BorderRadius.circular(8);

  @override
  Widget build(BuildContext context) {
    // Fill this out in the next steps.
  }
}

2. Membuat AnimatedContainer menggunakan properti

Selanjutnya kita AnimatedContainer menggunakan properti yang didefinisikan pada langkah 1, lalu letakkan duration yang mendefinisikan seberapa lama animasi pada aplikasi berjalan.

AnimatedContainer(
  // Use the properties stored in the State class.
  width: _width,
  height: _height,
  decoration: BoxDecoration(
    color: _color,
    borderRadius: _borderRadius,
  ),
  // Define how long the animation should take.
  duration: Duration(seconds: 1),
  // Provide an optional curve to make the animation feel smoother.
  curve: Curves.fastOutSlowIn,
);

3. Memulai animasi dengan melakukan rebuilding menggunakan properti baru

Langkah terakhir, mulai animasi dengan rebuilding AnimatedContainer menggunakan properti baru. Kemudian trigger rebuild tersebut menggunakan method setState() yang dipanggil menggunakan tombol ▶. Jadi ketika pengguna menekan tombol ▶, properti akan secara otomatis melakukan update width, height, background color dan border radius yang baru.

FloatingActionButton(
  child: Icon(Icons.play_arrow),
  // When the user taps the button
  onPressed: () {
    // Use setState to rebuild the widget with new values.
    setState(() {
      // Create a random number generator.
      final random = Random();

      // Generate a random width and height.
      _width = random.nextInt(300).toDouble();
      _height = random.nextInt(300).toDouble();

      // Generate a random color.
      _color = Color.fromRGBO(
        random.nextInt(256),
        random.nextInt(256),
        random.nextInt(256),
        1,
      );

      // Generate a random border radius.
      _borderRadius =
          BorderRadius.circular(random.nextInt(100).toDouble());
    });
  },
);

Berikut cuplikan kode dan simulasinya, jika teman-teman menggunakan VSCode jalankan projectnya dengan menekan F5, klik hot reload (⚡) atau klik tombol ▶, maka berikut hasil akhirnya (Klik tombol “▶”):

Jika ada pertanyaan silahkan komen dan jika artikel ini dirasa bermanfaat, jangan lupa like dan sharenya ya teman-teman. ??????? Sampai bertemu di artikel selanjutnya.
Terima Kasih, Assalamu’alaykum… Salam KODINGINDONESIA

Referensi : https://flutter.dev//

Anton Prafanto

Konten developer kodingindonesia.com & staf pengajar tetap di Universitas Mulawarman Samarinda

all author posts