Flutter Design – Update UI Berbasis Orientasi Layar

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 ➡ Instalasi External Package (Font)

Dalam beberapa situasi, ada saatnya kita ingin memperbarui tampilan aplikasi saat kita memutar layar dari mode portrait ke mode landscape. Misalnya, aplikasi mungkin menampilkan satu item setelah item berikutnya dalam mode portrait, namun meletakkan item yang sama tersebut secara berdampingan dalam mode landscape.

Di Flutter, kita dapat membuat layout yang berbeda bergantung pada Orientasi yang smartphone gunakan. Dalam contoh ini, kita akan membuat list yang menampilkan 2 kolom dalam mode portrait dan 3 kolom dalam mode landscape menggunakan langkah-langkah berikut:

1. Buat GridView dengan dua kolom.
2. Gunakan OrientationBuilder untuk mengubah jumlah kolom

1. Buat GridView Dengan 2 Kolom

Langkah pertama, buat list item untuk percobaan yang menampilkan items di dalam sebuah grid. 

GridView.count(
  // A list with 2 columns
  crossAxisCount: 2,
  // ...
);

Untuk mempelajari lebih lanjut tentang GridViews, klik link ini ➡ Creating a grid list.

2. Gunakan OrientationBuilder Untuk Mengubah Jumlah Kolom

Berikutnya, untuk menentukan Orientation aplikasi yang sedang berjalan kita dapat menggunakan widget OrientationBuilder yang akan memperhitungkan Orientation. Caranya dengan membandingkan width dan height yang tersedia untuk widget parent dan me-rebuilds Orientation saat ukuran parent berubah. Seperti yang terlihat pada cuplikan kode di bawah, buat list dengan menggunakan Orientation yang menampilkan 2 kolom saat portrait mode atau 3 kolom saat landscape mode.

OrientationBuilder(
  builder: (context, orientation) {
    return GridView.count(
      // Create a grid with 2 columns in portrait mode,
      // or 3 columns in landscape mode.
      crossAxisCount: orientation == Orientation.portrait ? 2 : 3,
    );
  },
);

Anton Prafanto

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

all author posts