flutter_foldable_kit 📱📖

---

🇮🇩 Bahasa Indonesia | 🇬🇧 English

---

🇮🇩 Deskripsi (Indonesian)

Library Flutter siap pakai (plug-and-play) untuk mengembangkan aplikasi modern pada perangkat Foldable (Samsung Galaxy Z Fold, Google Pixel Fold), 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!

🇬🇧 Description (English)

A plug-and-play Flutter library for building modern apps on Foldable (Samsung Galaxy Z Fold, Google Pixel Fold), Flip (Galaxy Z Flip, Motorola Razr), Dual-Screen (Surface Duo), and Tablet devices.

No more manually calculating DisplayFeature bounding boxes or writing complex MediaQuery logic. Just call the widgets from this library!

---

🌟 Fitur Utama / Key Features

Widget	🇮🇩 Deskripsi	🇬🇧 Description
FoldableSplitView	Layout dua panel otomatis di kedua sisi lipatan fisik. Fallback ke single pane pada layar kecil.	Automatic two-pane layout aligned to the physical hinge. Falls back to single pane on small screens.
OnHingeChange	Listener reaktif saat engsel ditekuk atau dibuka (Book Mode, Tabletop/Flex Mode, Flat).	Reactive listener when the hinge is bent or straightened (Book Mode, Tabletop/Flex Mode, Flat).
FoldableTabView	Tab navigation cerdas: Bottom Bar saat tertutup, Navigation Rail saat terbuka, Flex Control saat tabletop.	Smart tab navigation: Bottom Bar when folded, Navigation Rail when opened, Flex Control in tabletop mode.
FoldableNavigationSplitView	Pola Master-Detail: dua kolom di layar terbuka, stack push/pop di layar kecil.	Master-Detail pattern: two-column on wide screens, push/pop stack on compact screens.
BuildContext Extensions	context.isFoldable, context.isTabletop, context.isBookMode, context.hingeBounds, dll.	context.isFoldable, context.isTabletop, context.isBookMode, context.hingeBounds, etc.

---

🚀 Instalasi / Installation

🇮🇩 Tambahkan ke pubspec.yaml Anda:

🇬🇧 Add to your pubspec.yaml:

dependencies:
  flutter_foldable_kit: ^1.1.0

🇮🇩 Lalu impor di file Dart Anda:

🇬🇧 Then import in your Dart file:

import 'package:flutter_foldable_kit/flutter_foldable_kit.dart';

---

📖 Panduan Penggunaan / Usage Guide

1. BuildContext Extensions

🇮🇩 Dapatkan status lipatan di widget mana saja tanpa boilerplate:
🇬🇧 Access fold state anywhere in your widget tree without boilerplate:

Widget build(BuildContext context) {
  if (context.isTabletop) {
    // 🇮🇩 Mode laptop/flex (Z Flip atau Z Fold ditekuk horizontal di atas meja)
    // 🇬🇧 Flex/tabletop mode (Z Flip or Z Fold bent horizontally on a table)
    return buildTabletopLayout();
  } else if (context.isBookMode) {
    // 🇮🇩 Mode buku (Z Fold dibuka vertikal)
    // 🇬🇧 Book mode (Z Fold opened vertically)
    return buildBookModeLayout();
  }

  return buildStandardLayout();
}

🇮🇩 Tersedia juga / 🇬🇧 Also available:

• context.isFoldable / context.hasHinge — 🇮🇩 Apakah perangkat memiliki lipatan aktif / 🇬🇧 Whether device has an active fold.
• context.devicePosture — DevicePosture.flat, DevicePosture.halfOpened, DevicePosture.folded
• context.hingeBounds — 🇮🇩 Bounding box area engsel (Rect) / 🇬🇧 Hinge area bounding box (Rect).
• context.hingeThickness — 🇮🇩 Ketebalan lipatan fisik dalam pixel logika / 🇬🇧 Physical hinge thickness in logical pixels.

---

2. FoldableSplitView

🇮🇩 Membagi tampilan ke dua sisi engsel fisik secara presisi:
🇬🇧 Splits the view across the physical hinge precisely:

FoldableSplitView(
  startPane: ListView(
    children: [
      // 🇮🇩 Daftar Produk / 🇬🇧 Product List
      Text('Items'),
    ],
  ),
  endPane: Center(
    // 🇮🇩 Detail Produk / 🇬🇧 Product Detail
    child: Text('Detail'),
  ),
  // 🇮🇩 Rasio saat di layar tablet tanpa engsel (default: 0.4)
  // 🇬🇧 Ratio on tablet screen without hinge (default: 0.4)
  ratio: 0.4,
)

---

3. OnHingeChange

🇮🇩 Merespon secara instan saat pengguna menekuk atau meluruskan ponsel:
🇬🇧 Responds instantly when the user bends or straightens the phone:

OnHingeChange(
  onTabletopEnter: () {
    // 🇮🇩 Ponsel diletakkan di meja (Tabletop Mode)!
    // 🇬🇧 Phone placed on table (Tabletop Mode)!
    print('Entered Tabletop Mode');
  },
  onTabletopExit: () {
    print('Exited Tabletop Mode');
  },
  onPostureChange: (posture) {
    // 🇮🇩 Postur berubah / 🇬🇧 Posture changed
    print('Posture: $posture');
  },
  child: MyMainScreen(),
)

---

4. FoldableTabView

🇮🇩 Secara cerdas berganti antara Bottom Navigation Bar, Navigation Rail, dan Flex Mode:
🇬🇧 Intelligently switches between Bottom Navigation Bar, Navigation Rail, and 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: 'Profile / Profil',
      icon: Icon(Icons.person_outline),
      activeIcon: Icon(Icons.person),
      content: ProfileView(),
    ),
  ],
)

---

5. FoldableNavigationSplitView

🇮🇩 Menampilkan daftar dan detail berdampingan di layar besar, otomatis menjadi stack push/pop di layar kecil:
🇬🇧 Shows list and detail side-by-side on large screens, automatically becomes push/pop stack on small screens:

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, isSplitMode) {
    return Scaffold(
      appBar: AppBar(
        title: Text(item.subject),
        // 🇮🇩 Tombol Back otomatis hanya muncul jika berada di layar single
        // 🇬🇧 Back button automatically shown only on single-screen mode
        leading: isSplitMode ? null : const BackButton(),
      ),
      body: EmailDetailView(email: item),
    );
  },
)

---

🧪 Pengujian / Testing

🇮🇩 Jalankan test suite bawaan:
🇬🇧 Run the built-in test suite:

flutter test

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

🇬🇧 All components come with unit tests and widget tests to ensure layout integrity across various screen resolutions and hinge states.

---

📄 Lisensi / License

🇮🇩 Dilisensikan di bawah MIT License.
🇬🇧 Licensed under the MIT License.

---

🤖 Penghargaan & Pengakuan / Acknowledgements