Orientasi UI di Flutter

Orientasi UI di Flutter

Semua aplikasi harus dapat menyesuaikan antarmuka pengguna (UI) mereka berdasarkan orientasi ponsel. Terdapat dua mode orientasi yaitu portrait dan landscape pada smartphone. Dalam Flutter, hal ini dilakukan dengan menggunakan OrientationBuilder, yang menentukan orientasi saat ini dari aplikasi. Kita akan melihatnya dengan membangun sebuah aplikasi sederhana dan mengubah orientasinya serta menampilkan perubahan UI.

Berikut adalah langkah-langkah untuk membangun aplikasi yang mengubah UI berdasarkan orientasi ponsel:

  • Buatlah sebuah GridView dengan 3 kolom.
  • Gunakan OrientationBuilder untuk mengubah jumlah kolom.

Mari kita bahas kedua langkah tersebut dengan lebih detail.

Membuat GridView

Untuk membuat sebuah GridView dengan 3 kolom, gunakan kode seperti yang ditunjukkan di bawah ini:

GridView.count(
  crossAxisCount: 3,
);

Menggunakan OrientationBuilder

Seperti yang telah dibahas sebelumnya, orientationBuilder menentukan orientasi aplikasi saat ini. Kita akan mendesain orientationBuilder sedemikian rupa sehingga akan menampilkan 3 kolom dalam mode portrait dan 4 kolom dalam mode landscape. Untuk melakukannya, ikuti kode di bawah ini:

OrientationBuilder(
  builder: (context, orientation) {
    return GridView.count(
      crossAxisCount: orientation == Orientation.portrait ? 3 : 4,
    );
  },
);

Source code lengkap dapat dilihat di bawah ini:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    const appTitle = 'Nextgen Tutorial';

    return const MaterialApp(
      title: appTitle,
      home: OrientationList(
        title: appTitle,
      ),
    );
  }
}

class OrientationList extends StatelessWidget {
  final String title;

  const OrientationList({Key? key, required this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title), backgroundColor: Colors.blue),
      body: OrientationBuilder(
        builder: (context, orientation) {
          return GridView.count(
            //Grid dengan 3 kolom untuk mode portrait dan 4 kolom untuk mode landscape
            crossAxisCount: orientation == Orientation.portrait ? 3 : 4,

            // random item generator
            children: List.generate(100, (index) {
              return Center(
                child: Text(
                  'A $index',
                  style: Theme.of(context).textTheme.headline4,
                ),
              );
            }),
          );
        },
      ),
    );
  }
}

Output:

Tutorial sebelumnya : Flutter Lazy Loading
Tutorial setelahnya : Animasi Dalam Transisi Route Di Flutter
Semua Tutorial Flutter : Tutorial Flutter

Tinggalkan Balasan