flutter_foldable_kit 📱📖

Library Flutter siap pakai (plug-and-play) untuk mengembangkan aplikasi modern pada perangkat Foldable (Samsung Galaxy Z Fold, Google Pixel Fold, OnePlus Open), Flip (Galaxy Z Flip, Motorola Razr), Dual-Screen (Surface Duo), dan Tablet.

Tidak perlu lagi menghitung bounding box DisplayFeature atau menulis logika MediaQuery yang rumit secara manual. Cukup panggil widget dari library ini!

---

🌟 Fitur Utama (Key Features)

Fitur	Deskripsi
FoldableSplitView	Layout dua panel otomatis di kedua sisi lipatan fisik (engsel) tanpa menabrak garis lipatan. Fallback otomatis ke single pane pada layar kecil.
OnHingeChange	Listener reaktif saat engsel ditekuk atau dibuka (Book Mode, Tabletop/Flex Mode, Flat).
FoldableTabView	Tab navigation cerdas: Bottom Bar saat tertutup, Navigation Rail saat terbuka, dan Flex Control Surface saat mode tabletop.
FoldableNavigationSplitView	Pola navigasi Master-Detail: dua kolom di layar terbuka, dan otomatis menjadi stack navigasi biasa (push/pop) saat layar dilipat.
BuildContext Extensions	context.isFoldable, context.isTabletop, context.isBookMode, context.hingeBounds, dll.

---

🚀 Instalasi (Installation)

Tambahkan ke pubspec.yaml Anda:

dependencies:
  flutter_foldable_kit:
    path: ../library_flutter # atau via git / pub.flutter-io.cn

Lalu impor di file Dart Anda:

import 'package:flutter_foldable_kit/flutter_foldable_kit.dart';

---

📖 Panduan Penggunaan (Usage Guide)

1. Ekstensi BuildContext Praktis

Dapatkan status lipatan di widget mana saja tanpa boilerplate:

Widget build(BuildContext context) {
  if (context.isTabletop) {
    // Mode laptop/flex (Z Flip atau Z Fold ditekuk horizontal di atas meja)
    return buildTabletopLayout();
  } else if (context.isBookMode) {
    // Mode buku (Z Fold dibuka vertikal)
    return buildBookModeLayout();
  }

  return buildStandardLayout();
}

Tersedia juga:

• context.isFoldable / context.hasHinge: Apakah perangkat memiliki lipatan aktif.
• context.devicePosture: DevicePosture.flat, DevicePosture.halfOpened, atau DevicePosture.folded.
• context.hingeBounds: Bounding box area engsel (Rect).
• context.hingeThickness: Ketebalan lipatan fisik dalam pixel logika.

---

2. FoldableSplitView (Layout Dua Panel Sadar Lipatan)

Membagi tampilan ke dua sisi engsel fisik secara presisi:

FoldableSplitView(
  startPane: ListView(
    children: [
      Text('Daftar Produk / Menu'),
    ],
  ),
  endPane: Center(
    child: Text('Detail Produk'),
  ),
  // Rasio saat di layar tablet tanpa engsel (default: 0.4)
  ratio: 0.4,
  // Otomatis berubah menjadi vertikal jika ponsel ditekuk ke Tabletop Mode
)

---

3. OnHingeChange (Deteksi Perubahan Sudut & Engsel)

Merespon secara instan saat pengguna menekuk atau meluruskan ponsel:

OnHingeChange(
  onTabletopEnter: () {
    print('Ponsel diletakkan di meja (Tabletop Mode)! Buka mode kamera preview di atas.');
  },
  onTabletopExit: () {
    print('Keluar dari Tabletop Mode.');
  },
  onPostureChange: (posture) {
    print('Postur berubah: $posture');
  },
  child: MyMainScreen(),
)

---

4. FoldableTabView (Tab Sadar Lipatan)

Secara cerdas berganti antara Bottom Navigation Bar, Side Navigation Rail, dan Flex Mode:

FoldableTabView(
  tabs: [
    FoldableTabItem(
      label: 'Home',
      icon: Icon(Icons.home_outlined),
      activeIcon: Icon(Icons.home),
      content: HomeView(),
    ),
    FoldableTabItem(
      label: 'Chat',
      icon: Icon(Icons.chat_bubble_outline),
      activeIcon: Icon(Icons.chat_bubble),
      content: ChatView(),
    ),
    FoldableTabItem(
      label: 'Profil',
      icon: Icon(Icons.person_outline),
      activeIcon: Icon(Icons.person),
      content: ProfileView(),
    ),
  ],
)

---

5. FoldableNavigationSplitView (Master-Detail Tanpa Ribet)

Menampilkan daftar dan detail berdampingan di layar besar, dan otomatis menjadi stack push/pop di layar ponsel biasa:

FoldableNavigationSplitView<EmailItem>(
  initialItem: sampleEmails.first,
  masterBuilder: (context, selectedItem, onSelect) {
    return ListView.builder(
      itemCount: emails.length,
      itemBuilder: (context, index) {
        final email = emails[index];
        return ListTile(
          selected: selectedItem?.id == email.id,
          title: Text(email.sender),
          subtitle: Text(email.subject),
          onTap: () => onSelect(email),
        );
      },
    );
  },
  detailBuilder: (context, item, isSplit) {
    return Scaffold(
      appBar: AppBar(
        title: Text(item.subject),
        // Tombol Back otomatis hanya muncul jika berada di layar single/tertutup!
        leading: isSplit ? null : const BackButton(),
      ),
      body: EmailDetailView(email: item),
    );
  },
)

---

🧪 Rangkaian Pengujian (Testing)

Jalankan test suite bawaan:

flutter test

Semua komponen dilengkapi dengan unit test dan widget test untuk memastikan integritas layout di berbagai resolusi layar dan status engsel.

---

📄 Lisensi (License)

Dilisensikan di bawah MIT License.

---

🤖 Penghargaan & Pengakuan (Acknowledgements)