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:
- Buat
GridViewdengan dua kolom. - Gunakan
OrientationBuilderuntuk mengubah jumlah kolom
1. Buat GridView Dengan 2 Kolom
Langkah pertama, buat list item untuk percobaan yang menampilkan items di dalam sebuah grid.
|
1 2 3 4 5 |
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.
|
1 2 3 4 5 6 7 8 9 |
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, ); }, ); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { final appTitle = 'Orientation Demo'; return MaterialApp( title: appTitle, home: OrientationList( title: appTitle, ), ); } } class OrientationList extends StatelessWidget { final String title; OrientationList({Key key, this.title}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text(title)), body: 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, // Generate 100 widgets that display their index in the List. children: List.generate(100, (index) { return Center( child: Text( 'Item $index', style: TextStyle( fontStyle: FontStyle.italic, fontSize: 40, fontWeight: FontWeight.w600), ), ); }), ); }, ), ); } } |
Jalankan projectnya dengan menekan F5, klik hot reload (⚡) atau klik tombol ▶, berikut tampilannya:
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//
