Flutter Animation – Animasi Fade In Out Pada Widget

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 ➡ Membuat Animasi Properti Container

UI developers sering kali perlu menampilkan dan menyembunyikan elemen di halaman layar. Namun, elemen yang muncul pada layar terkadang terlalu cepat sehingga dapat terasa mengagetkan bagi pengguna. Untuk itu sebagai gantinya, kita akan menggunakan efek fade in dan out dengan animasi opasitas sehingga menciptakan user experience yang animasinya mulus.

Widget AnimatedOpacity memudahkan kita untuk melakukan animasi opasitas. Berikut langkah-langkahnya:

1. Membuat box untuk efek fade in dan out.
2. Mendefinisikan StatefulWidget.
3. Membuat tombol untuk mengubah visibilatas.
4. Memberikan efek fade in dan out pada box.

1. Membuat box untuk efek fade in dan out

Langkah pertama yaitu membuat sesuatu untuk dapat diberi efek fade in dan out. Sebagai contoh, buat box hijau pada halam layar.

Container(
  width: 200.0,
  height: 200.0,
  color: Colors.green,
);

2. Mendefinisikan StatefulWidget

Sekarang setelah kita sudah memiliki box hijau untuk dianimasikan, lalu kita memerlukan cara untuk mengetahui apakah kotak tersebut harus terlihat. Untuk mencapai hal tersebut, gunakan StatefulWidget.

StatefulWidget merupakan class yang membuat objek State . Objek State sendiri menyimpan beberapa data tentang aplikasi dan menyediakan cara untuk mengupdate data tersebut. Saat memperbarui data, kita juga dapat meminta Flutter untuk membuat ulang UI dengan perubahan tersebut.

Dalam kasus ini, kita memiliki satu bagian data dan jenisnya boolean pada tombol yang akan berfungsi untuk menentukan apakah box tersebut harus terlihat atau tidak.

Untuk membuat StatefulWidget, buat dua class: StatefulWidget dan kelas State yang sesuai. Tips: Plugin Flutter untuk Android Studio dan VSCode menyertakan jalan pintas “stful” untuk membuat kode ini dengan cepat.

// The StatefulWidget's job is to take data and create a State class.
// In this case, the widget takes a title, and creates a _MyHomePageState.
class MyHomePage extends StatefulWidget {
  final String title;

  MyHomePage({Key key, this.title}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

// The State class is responsible for two things: holding some data you can
// update and building the UI using that data.
class _MyHomePageState extends State<MyHomePage> {
  // Whether the green box should be visible.
  bool _visible = true;

  @override
  Widget build(BuildContext context) {
    // The green box goes here with some other Widgets.
  }
}

3. Membuat tombol untuk mengubah visibilatas

Sekarang setelah kita memiliki beberapa data untuk menentukan apakah kotak hijau harus terlihat atau tidak, kita memerlukan cara untuk memperbarui data tersebut. Dalam contoh ini, jika kotak terlihat, sembunyikan ➡ Jika kotaknya tersembunyi, tunjukkan.

Untuk menangani hal ini, kita harus membuat sebuah tombol. Sehingga saat pengguna menekan tombol, ubah boolean dari true ke false, atau false ke true. Kita dapat lakukan perubahan ini menggunakan setState(), yang merupakan method pada classState dan memiliki fungsi untuk memberi tahu Flutter untuk melakukan rebuild widget yang ada.

Untuk informasi lebih lanjut tentang bagaimana cara kerja dengan input pengguna, dapat dilihat ➡  Gestures.

FloatingActionButton(
  onPressed: () {
    // Call setState. This tells Flutter to rebuild the
    // UI with the changes.
    setState(() {
      _visible = !_visible;
    });
  },
  tooltip: 'Toggle Opacity',
  child: Icon(Icons.flip),
);

4. Memberikan efek fade in dan out pada box

Setelah memiliki box hijau di layar dan tombol untuk mengubah visibilitas menjadi terlihat true or false. Langkah selanjutnya dengan widget AnimatedOpacity kita dapat memberikan efek fade in dan out pada box tersebut.

Widget AnimatedOpacity sendiri membutuhkan tiga argumen utama, yaitu:

• opacity: Nilai dari 0,0 (tidak terlihat) hingga 1,0 (terlihat sepenuhnya).
• duration: Berapa lama waktu yang dibutuhkan untuk menyelesaikan animasi.
• child: Widget untuk beranimasi. Dalam hal ini, box hijau menggunakan Container yang menggunakan properti width dan height.

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 Icon.flip):

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