Restrict Landscape Mode di Flutter

Dalam artikel ini, kita akan belajar bagaimana cara membatasi orientasi landscape pada aplikasi flutter. Sebuah aplikasi yang siap diproduksi seharusnya bebas dari segala jenis bug dan kesalahan. Kebanyakan, kita mendesain aplikasi untuk orientasi portrait, jika kita beralih ke orientasi landscape, antarmuka pengguna mungkin akan berantakan dan terjadi error karena tidak disesuaikan untuk itu. Oleh karena itu, ada dua solusi, pertama, aplikasi Anda dapat disesuaikan untuk orientasi landscape dan kedua, aplikasi Anda mungkin tidak memerlukan orientasi landscape. Jadi, pada kasus kedua, kita dapat membatasi orientasi landscape. Ini dapat dilakukan dengan menggunakan class default SystemChrome. Class ini memiliki fungsi setPreferredOrientations, yang mengambil daftar orientasi perangkat yang perlu diimplementasikan dalam aplikasi.

Orientasi yang Tersedia:

• landscapeLeft
• landscapeRight
• portraitDown
• portraitUp

Syntax: SystemChrome.setPreferredOrientations([DeviceOrientation.pilihanAnda])

Di sini, SystemChrome adalah class default yang mengontrol banyak fitur perangkat. Class ini memiliki fungsi setPreferredOrientations yang mengambil daftar jenis DeviceOrientation dan orientasi yang diinginkan.

Contoh:

import 'package:flutter/material.dart';
//Diimport agar dapat menggunkan SystemChrome
import 'package:flutter/services.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Nextgen Tutorial'),
        ),
        body: const Center(
          child: Text(
            'Aplikasi ini tidak bisa di rotasi ke mode landscape',
            style: TextStyle(color: Colors.blue, fontSize: 17),
          ),
        ),
      ),
    );
  }
}

Output:

Aplikasi keluaran seperti yang ditunjukkan di atas akan dibatasi hanya pada orientasi potrait. Bahkan jika Anda memutar perangkat, itu tidak akan berubah menjadi orientasi lanscape.

Hal-hal yang perlu diingat:

• Jangan lupa untuk menyertakan import ‘package:flutter/services.dart’; karena SystemChrome didefinisikan dalam file services.dart.
• Tambahkan WidgetsFlutterBinding.ensureInitialized (); sebelum menggunakan class SystemChrome. Jika Anda tidak menambahkan baris kode ini, maka pembatasan orientasi mungkin tidak berfungsi pada beberapa perangkat. Pada versi Flutter yang lebih baru, diperlukan untuk menambahkan fungsi ini.
• Jika perangkat target Anda adalah iPad, maka kode di atas hanya akan berfungsi jika multitasking dinonaktifkan. Untuk memecahkan masalah ini, Anda dapat memilih keluar dari multitasking di iPad, maka kode di atas akan berfungsi, tetapi aplikasi Anda tidak akan mendukung multitasking Slide Over dan Split View.
• Jika Anda memutuskan untuk keluar dari multitasking, Anda dapat melakukannya dengan mengubah pengaturan “Requires full screen” menjadi true di Xcode Deployment Info.

Tutorial sebelumnya : Flutter Notification
Semua Tutorial Flutter : Tutorial Flutter