> For the complete documentation index, see [llms.txt](https://docs.quantumbyte.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.quantumbyte.ai/home/quantumbyte-v2.0/3.microsites/develop-package.md).

# Develop (Package)

## Flutter Packages

Setelah sebelumnya anda membuat layanan Packages anda dapat meng-clone app nya ke local device anda untuk development.

Sebaiknya anda membaca terlebih dahulu tutorial resmi dari flutter untuk cara develop package & plugins di flutter di link berikut <https://docs.flutter.dev/packages-and-plugins/developing-packages>

### Compiler Flow

Secara alur development dan proses penggabungan Source code MiniApp dan Source Code MainApp akan seperti gambar berikut :

<figure><img src="/files/mlsS0pQCbij2IkYqg0Vh" alt=""><figcaption></figcaption></figure>

Setelah anda klik Compile <mark style="color:red;">**MiniApp**</mark> to <mark style="color:purple;">**MainApp**</mark>, Layanan <mark style="color:red;">**MiniApp**</mark> anda akan di routing terlebih dahulu ke router yang kami beri nama "Package Wrapper" dan selanjutnya Dependency external yang anda tambahkan di <mark style="color:red;">**MiniApp**</mark> akan di Overrides (Jika sudah ada di <mark style="color:purple;">**MainApp**</mark> ), jika step ini berhasil tanpa konflik, <mark style="color:red;">**MiniApp**</mark> akan di Compile bersama dengan <mark style="color:purple;">**MainApp**</mark> dan hasil preview / Sample dapat anda download dari Platform.

### MiniApp & MainApp - Struktur Kode

Secara struktur code MiniApp anda akan nampak seperti berikut di MainApp

<figure><img src="/files/f4bHb4IHuqTvRvNjtaaS" alt=""><figcaption></figcaption></figure>

### Depedency Overrides Info

Hal yang harus anda perhatikan pada proses development adalah di bagian berikut:

<figure><img src="/files/hKbj4AMSpihk1tCPxxzv" alt=""><figcaption></figcaption></figure>

Dependency Overrides di atas adalah dependency yg saat ini di gunakan oleh <mark style="color:purple;">**MainApp**</mark> jadi jika anda ingin menambahkan dependecy external di MiniApp anda, terlebih dahulu anda dapat mengecek versi dependecy yg saat ini di gunakan di MainApp, jika dependency yg anda gunakan belum tersedia di MainApp anda dapat langsung menggunakan nya, platform akan mengecek jika terdapat konflik pada proses compiling.

### Develop MiniApp

#### Persiapan

Sebelum ke tahap running example code, pastikan anda menggunakan :

```
flutter versi 3.22.1-stable
```

Download di : <https://docs.flutter.dev/release/archive>

#### State Management

Default state management yang di gunakan adalah GetX :

```yaml
get: ^4.6.6
```

dependecy sudah default terinstall di MiniApp, anda dapat mempelajari selengkapnya di link berikut : <https://pub.dev/packages/get>

#### Struktur Kode MiniApp

Source code MiniApp akan nampak seperti berikut :

<figure><img src="/files/CHHYY4Wb3RRRx43dJ9Wk" alt=""><figcaption></figcaption></figure>

Keterangan struktur folder :

1. assets :

   merupakan local assets yg dapat anda gunakan untuk keperluan penggunakan local image, font dan lain-lain
2. example :

   folder example akan bekerja seakan-akan sebagai MainApp (untuk keperluan development), anda tidak perlu mengubah file apapun di dalam folder ini, folder ini akan digunakan untuk running local development MiniApp
3. lib :

   Merupakan folder MiniApp anda, anda dapat meletakan kode anda di dalam folder ini.

#### Folder Example :

seperti penjelasan sebelumnya folder example akan bertindak seakan-akan MainApp dan untuk keperluan Running MiniApp (Local Development), dalam folder example akan terdapat themes yang saat ini di gunakan oleh MainApp dan 2 tombol akses untuk meng-akses layanan dan riwayat dengan parameter seperti berikut :

<figure><img src="/files/SJfWAqNo90cqHA5qGLwV" alt=""><figcaption></figcaption></figure>

Parameter di atas adalah parameter yang akan di kirimkan oleh MainApp di env production setelah code di merge, dan untuk keperluan development data yang di kirim adalah data dummy seperti di atas.

#### Folder Lib :

folder ini merupakan folder dimana Source code miniapp anda berada, secara struktur akan nampak seperti berikut :

<figure><img src="/files/jtC9bktOs6rzZbMs1e2k" alt=""><figcaption></figcaption></figure>

yang perlu anda perhatikan pada isi default code example MiniApp adalah 2 file yaitu :

1. layanan.main.dart

   merupakan root index layanan, jangan ubah isi di dalam file ini, MainApp akan mengakses default layanan ke file ini dengan beberapa parameter.
2. riwayat.main.dart

   merupakan root index detail riwayat, jangan ubah isi di dalam file ini, MainApp akan mengakses default detail riwayat ke file ini dengan beberapa parameter.

Jika di perhatikan file layanan.main.dart akan mengakses child class yg terdapat di folder modules

<figure><img src="/files/jmZoEXTMFoAeEOi1jQAH" alt=""><figcaption></figcaption></figure>

anda dapat merubah child class yang di akses dari layanan.main.dart sesuai kebutuhan anda

#### Cara Running Example Code

pada root folder MiniApp masuk ke folder example dan jalankan command flutter run seperti berikut :

```bash
cd example
flutter clean
flutter run
```

setelah running anda akan di hadapkan dengan tampilan seperti berikut :

<figure><img src="/files/0Ci9WK1imldueef4WGB1" alt=""><figcaption></figcaption></figure>

tampilan awal di atas adalah main.dart dari example folder yang berjalan seakan-akan sebagai mainapp, klik menu layanan dan anda akan di arahkan ke halaman layanan miniapp anda dan klik riwayat anda akan di arahkan ke halaman detail riwayat miniapp anda.

**Halaman layanan**

example halaman layanan akan seperti berikut :

<figure><img src="/files/fQgYbS8GY9f51n5mEWkc" alt=""><figcaption></figcaption></figure>

pada halaman layanan anda akan melihat example atau contoh penggunaan dari pemanggilan data user, alamat, cek login, widget sample bawaan, call mainapp page dll

**Halaman riwayat**

example halaman riwayat akan seperti berikut :

<figure><img src="/files/tnSqgdKFkQhbfX5F5ksF" alt=""><figcaption></figcaption></figure>

contoh di atas berupa UI / widget halaman detail riwayat yang dapat anda gunakan jika di perlukan

#### Cara Develop Halaman Detail Riwayat

khusus untuk development halaman detail riwayat, anda perlu sebelumnya submit / create data riwayat dari API agar dapat masuk ke halaman list riwayat transaksi seperti gambar berikut :

<figure><img src="/files/tktoarBETSiaWkwHkrKQ" alt=""><figcaption></figcaption></figure>

Secara flow development riwayat pada packages flutter akan seperti berikut :

<figure><img src="/files/V8aekabkfGivVDv3Qs9U" alt=""><figcaption></figcaption></figure>

anda perlu menggunakan API "Riwayat Transaksi" yang terdapat di Platform untuk dapat memunculkan riwayat kedalam list riwayat di MainApp.

<figure><img src="/files/ra47g8qKZh1NcuE86hzs" alt=""><figcaption></figcaption></figure>

kemudian saat list riwayat tersebut itu di klik, mainapp akan meng-akses root index riwayat.main.dart dengan parameter yang telah di jelaskan di atas yang dapat di gunakan oleh miniapp.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.quantumbyte.ai/home/quantumbyte-v2.0/3.microsites/develop-package.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.