Widget Flutter TwoPane

Tata letak ini memiliki dua panel anak, yang dapat diperlihatkan berdampingan, di atas dan bawah, atau satu panel dapat diprioritaskan. Ukuran relatif dari dua widget panel dapat disesuaikan secara proporsional, dan pada perangkat layar ganda batas snap ke area engsel.

Menginstal

Untuk membuat proyek Anda bergantung pada dual_screen, paket yang berisi TwoPane, Anda dapat menjalankan:

flutter pub add dual_screen

Ini akan menambahkan baris seperti ini ke pubspec.yaml paket Anda (dan menjalankan implisit flutter pub get):

dependencies:
  dual_screen: ^1.0.2+2

Jika Anda menambahkan dependensi secara manual ke pubspec.yaml, Anda juga perlu menjalankan flutter pub get.

Anda sekarang dapat mulai menggunakan TwoPane widget dalam file dart Anda, di mana Anda juga perlu mengimpor dependensi:

import 'package:dual_screen/dual_screen.dart';

Penyajian perangkat yang dapat dilipat

Saat aplikasi diperluas di Surface Duo, setiap widget mengisi seluruh layar:

Penyajian lintas platform

Saat aplikasi merender di layar yang lebih besar seperti tablet, aplikasi desktop, atau halaman web, panel ditampilkan tetapi ukurannya diatur secara proporsional:

TwoPane API

class TwoPane {
  const TwoPane({
    Widget startPane,
    Widget endPane,
    double paneProportion,
    TwoPanePriority panePriority,
    Axis direction,
    TextDirection? textDirection,
    VerticalDirection verticalDirection,
    EdgeInsets padding,
  });
}

TwoPane Properti widget:

• startPane - Panel mulai, yang dapat berada di sebelah kiri untuk tata letak kiri-ke-kanan, atau di bagian atas untuk tata letak atas-ke-bawah. Jika panePriority adalah start dan tidak ada engsel, ini adalah satu-satunya panel yang terlihat.
• endPane - Panel akhir, yang dapat berada di sebelah kanan untuk tata letak kiri-ke-kanan, atau di bagian bawah untuk tata letak atas-ke-bawah. Jika panePriority adalah end, dan tidak ada engsel, ini adalah satu-satunya panel yang terlihat.
• paneProportion - Proporsi layar yang ditempati oleh panel mulai. Panel akhir mengambil alih sisa ruang. Nilai 0,5 akan membuat dua panel sama. Properti ini diabaikan untuk tampilan dengan engsel, dalam hal ini setiap panel mengambil alih satu layar.
• panePriority - Apakah hanya menampilkan satu panel mulai, panel akhir, atau keduanya. Properti ini diabaikan untuk ditampilkan dengan engsel, dalam hal ini both panel terlihat.
• direction - Apakah akan menumpuk dua panel secara vertikal atau horizontal, mirip dengan arah Flex. Properti ini diabaikan untuk tampilan dengan engsel, dalam hal ini arahnya adalah horizontal untuk engsel vertikal dan vertical untuk engsel horizontal.
• textDirection - Ketika panel ditata secara horizontal, ini menentukan mana yang berjalan di sebelah kiri. Berulah sama seperti teks FlexDirection
• verticalDirection - Ketika panel ditata secara vertikal, ini menentukan mana yang masuk di bagian atas. Berulah sama seperti Flex verticalDirection
• padding - Padding antara TwoPane dan tepi layar. Jika ada penspasian antara TwoPane dan MediaQuery akar, padding digunakan untuk meratakan dua panel dengan benar ke engsel.

Tip

Sebagian besar parameter yang disediakan untuk TwoPane diabaikan ketika perangkat memiliki engsel. Ini berarti Anda dapat fokus pada cara kerja tata letak pada layar besar seperti tablet dan desktop, sekaligus membuatnya beradaptasi dengan baik dengan faktor bentuk layar ganda secara default.

Contoh penggunaan

Widget build(BuildContext context) {
  return TwoPane(
    startPane: BlueA(),
    endPane: OrangeB(),
    paneProportion: 0.3,
    panePriority: MediaQuery.of(context).size.width > 500 ? TwoPanePriority.both : TwoPanePriority.start,
  );
}

Kode sampel ini menghasilkan hasil di awal artikel ini:

• Pada Surface Duo, widget A dan widget B keduanya mengambil satu layar.
• Pada tablet atau desktop, widget A mengambil 30% dari layar sementara widget B mengambil 70% sisanya.
• Pada ponsel kecil yang lebarnya kurang dari 500 piksel logis, hanya widget A yang terlihat.