Tutorial Mengguankan Bottom sheets dan Persistent Bottom Sheet di Flutter - Syntax Blog

Header Ads

Tutorial Mengguankan Bottom sheets dan Persistent Bottom Sheet di Flutter

Bottom sheets di flutter by syntax blog
dalah tampilan yang dapat kami tampilkan di bagian bawah layar untuk menampilkan konten kepada pengguna - ini mungkin untuk mendorong interaksi lebih lanjut atau menampilkan beberapa bentuk konten lain kepada pengguna. Ini selalu berlabuh di bagian bawah layar dan mudah disembunyikan dari tampilan oleh pengguna. Di Flutter kita mengeluarkan dua jenis widget lembar bawah, ini adalah Persistent Bottom Sheet dan Modal Bottom Sheet  - jadi mari kita lihat bagaimana ini bekerja dan apa yang harus kita lakukan untuk mendapatkannya di aplikasi kita.

Jika Anda tidak terbiasa dengan Bottom Sheets, kami dapat mengambil contoh dari spesifikasi desain material:

Contoh bottom sheets di flutter
Di sisi kiri kita melihat halaman bawah yang persisten, dalam hal ini dapat muncul ke atas dan ke bawah untuk melihat pemutaran lagu saat ini - mempertahankan keadaan saat tidak terlihat. Di sisi kanan kami memiliki lembar bawah modal, yang digunakan untuk melakukan interaksi pada konten yang ditampilkan dalam layar.

Modal Bottom Sheet

Ketika Modal Bawah Halaman ditampilkan, ia bertindak sebagai widget pemblokiran - ini berarti bahwa itu menghentikan pengguna untuk berinteraksi dengan konten lain dalam aplikasi Anda. Ini dapat dilihat sebagai alternatif untuk menampilkan beberapa bentuk menu atau dialog kepada pengguna. Menekan kembali atau menyentuh bagian luar lembar bawah akan mengabaikannya.

Kita dapat membuat dan menampilkan lembar bawah dengan menggunakan fungsi showModalBottomSheet, ketika ini dilakukan internal kelas menggunakan Class Navigator untuk Push Halaman ini sebagai route ke navigator untuk aplikasi.


Kita dapat menjalankan ini di aplikasi kita dan ketika kita menampilkan halaman / widget bawah kita akan melihat bahwa halaman ditampilkan di bagian bawah layar.

Contoh Hasil dari source code di atas
Untuk argumen builder dari fungsi showModalBottomSheet kita cukup mengembalikan widget yang akan ditampilkan di dalam sheet. Ini akan bervariasi pada persyaratan implementasi Anda, tetapi dalam contoh di sini saya telah menggunakan Kolom untuk menampilkan koleksi instance ListTile karena ini cocok dengan tampilan visual tangkapan layar sheet dari pedoman materi di atas. Saat mengklik di luar lembar bawah, dialog akan diabaikan dan sepenuhnya dihapus dari tampilan. Karena ini adalah modal dasar lembar, tidak ada keadaan yang bertahan - ia ada untuk memanggil beberapa bentuk tindakan dalam konteks saat ini.




Catatan: Jika menggunakan kolom untuk konten sheet, penting untuk menggunakan mainAxisSize properti ke MainAxisSize.min karena ini akan memastikan konten dibungkus.

Persistent Bottom Sheet

Ketika lembar bawah terus-menerus ditampilkan, biasanya ditampilkan untuk memuji konten aplikasi saat ini. Halaman-halaman ini dapat digunakan untuk menampilkan konten yang sadar konteks dan akan tetap berada di tempatnya saat pengguna menavigasi. Pencet kembali atau seret halaman bawah  akan memunculkan halaman itu kembali sampai diminta berikutnya untuk ditampilkan oleh pengguna. Namun, pada titik ini masih selalu tetap dalam tampilan siap bagi pengguna untuk membuka kembali lagi.

Ketika kita ingin menggunakan lembar bawah persisten kita perlu melakukan hal-hal yang sedikit berbeda. Pertama-tama kita perlu membuat instance GlobalKey baru untuk memberi kita akses ke Scaffold kita yang akan digunakan untuk menampilkan lembar bawah kita yang persisten.
final GlobalKey<ScaffoldState> _scaffoldKey = new 
        GlobalKey<ScaffoldState>();

Kami kemudian perlu menetapkan key ini untuk Scaffold kami seperti
return new Scaffold(
  key: _scaffoldKey,
  ....

Dan kemudian kita bisa menggunakan kunci Scaffold untuk mengambil keadaan saat ini dan menunjukkan halaman bawah kita yang persisten:




Kami membutuhkan pengaturan tambahan ini karena lembar bawah persisten bekerja sedikit berbeda dari lembar bawah modal. Modal bottom sheet pada dasarnya adalah dialog pemblokiran, sehingga hanya bisa ditampilkan di layar kepada pengguna. Tetapi karena lembar bawah yang persisten perlu meluncur masuk dan keluar dari pandangan, memuji konteks saat ini, itu perlu menyadari Scaffold di mana ia saat ini ditampilkan.

Ketika datang ke konten di dalam lembar bawah. seperti halnya lembar bawah modal, kita perlu menyediakan widget yang akan ditampilkan.

Contoh Presistent header di flutter

Satu-satunya perbedaan di sini adalah bahwa kita perlu memperhatikan konten yang ditampilkan. Seperti yang ditunjukkan dalam tangkapan layar desain bahan di bagian atas artikel ini, halaman bawah persisten selalu terlihat oleh pengguna - bahkan ketika itu tidak diperluas. Oleh karena itu, ada kemungkinan Anda menginginkan beberapa bentuk konten tajuk yang mungkin tetap terlihat saat lembar diperluas, atau berubah menjadi beberapa bentuk konten lain untuk memberikan wawasan lebih lanjut kepada pengguna.

Contoh Presisten Bottom di flutter


Ketika kita memanggil fungsi showBottomSheet di sini kita dikembalikan sebuah instance dari PersistentBottomSheetController, kita dapat menggunakan pengontrol ini untuk secara terprogram menutup lembaran bawah:

PersistentBottomSheetController controller = 
        _scaffoldKey.currentState.showBottomSheet...
controller.close();

ok sekian ya gan dari saya. saya berharapnya bisa menambah wawasan bagi agan yang lagi semangat belajar flutter gaess

No comments:

Powered by Blogger.