zorba-xquery – Aplikasi seluler sering kali memiliki berbagai kategori konten untuk ditawarkan. Aplikasi Google Play Store, misalnya, menyajikan kontennya dalam kategori seperti game, aplikasi, film, dan buku. Di aplikasi Flutter, widget BottomNavigationBar memungkinkan pengguna melihat satu kategori saat aplikasi dimulai dan dengan cepat melihat kategori lainnya hanya dengan satu ketukan jari. Dalam tutorial ini, kami akan memberi tahu Anda semua yang perlu Anda ketahui tentang BottomNavigationBar di Flutter. Kami akan mendemonstrasikan cara kerjanya, menelusuri beberapa kasus penggunaan, dan menunjukkan cara menyesuaikan widget BottomNavigationBar di aplikasi Flutter Anda.
Zorba Xquery Yang Digunakan Untuk Alat Bantu Pencarian Data
– Apa itu widget BottomNavigationBar di Flutter?
Zorba Xquery Yang Digunakan Untuk Alat Bantu Pencarian Data – BottomNavigationBar adalah widget yang menampilkan deretan widget kecil di bagian bawah aplikasi Flutter. Biasanya, ini digunakan untuk menunjukkan sekitar tiga hingga lima item. Setiap item harus memiliki label dan ikon. BottomNavigationBar memungkinkan Anda untuk memilih satu item pada satu waktu dan dengan cepat menavigasi ke halaman tertentu. Sekarang mari kita telusuri proses pembuatan BottomNavigationBar sederhana selangkah demi selangkah.
Menampilkan Bilah Navigasi Bawah
Widget BottomNavigationBar diberikan ke properti bottomNavigationBar dari Scaffold.
BottomNavigationBar memiliki properti wajib yang disebut item. item menerima widget dari tipe BottomNavigationBarItem. BottomNavigationBarItem hanya digunakan untuk menampilkan item aktual di dalam BottomNavigationBar. Kode di atas hanya menampilkan BottomNavigationBar dengan item pertama yang dipilih sebagai default. Itu tidak mengubah pilihan saat kita mengklik item lainnya:
Menampilkan pilihan item
Untuk menampilkan pilihan item lainnya, kami akan menggunakan dua properti: onTap dan currentIndex. Variabel _selectedIndex menyimpan nilai item yang saat ini dipilih. _selectedIndex diberikan ke properti currentIndex.
Callback _onItemTapped() ditetapkan ke onTap dari BottomNavigationBar, yang mengembalikan indeks saat item diketuk. Cukup menetapkan indeks item yang dipilih saat ini ke _selectedIndex dan melakukan setState akan menampilkan item seperti yang dipilih di BottomNavigationBar.
Baca Juga : Berbagai cara untuk memperbarui XML menggunakan XQuery di SQL Server
Menampilkan halaman item yang dipilih
Sampai sekarang, kami tidak memiliki halaman untuk ditampilkan berdasarkan item yang dipilih. Jadi mari kita lanjutkan dan hebat: _pages menyimpan daftar widget. Untuk mempermudah, kami hanya menampilkan ikon besar dari item itu sendiri.
Menampilkan satu halaman di tengah layar dari _pages berdasarkan _selectedIndex item akan melakukan keajaiban lainnya.
Sekarang kami memiliki BottomNavigationBar dan berjalan: Ilustrasi di bawah ini menunjukkan bagaimana kode diterjemahkan ke dalam desain.
– Menyesuaikan Bilah Navigasi Bawah
BottomNavigationBar memiliki banyak opsi untuk menyesuaikannya sesuai kebutuhan Anda. Mari perbesar beberapa properti yang dapat Anda sesuaikan.
Warna latar belakang
Anda mungkin ingin mengubah warna latar belakang BottomNavigationBar agar sesuai dengan merek Anda. Anda melakukannya hanya dengan menggunakan properti backgroundColor.
Ketinggian
Secara default, BottomNavigationBar diatur untuk menaikkan 8 poin dari permukaan sehingga muncul di bagian atas halaman. Anda dapat mengatur properti ini ke nilai apa pun.
Ukuran ikon
Anda dapat mengecilkan atau memperbesar ukuran semua ikon sekaligus menggunakan properti iconSize.
Kursor mouse
Saat berjalan di web, Anda dapat menyesuaikan kursor mouse saat mengarahkan kursor ke item di BottomNavigationBar.
Item yang dipilih
Anda dapat membuat item yang dipilih tampak berbeda dari yang tidak dipilih menggunakan beberapa properti yang dipilih dari BottomNavigationBar.
Item yang tidak dipilih
Anda mungkin juga ingin mengubah tampilan dan nuansa item yang tidak dipilih. BottomNavigationBar memiliki beberapa properti yang tidak dipilih yang dapat Anda gunakan.
Item yang tidak dipilih
Anda mungkin juga ingin mengubah tampilan dan nuansa item yang tidak dipilih. BottomNavigationBar memiliki beberapa properti yang tidak dipilih yang dapat Anda gunakan.
Menghapus label
Jika Anda ingin menghilangkan label sepenuhnya, Anda dapat menggunakan showSelectedLabels dan showUnselectedLabels.
Menyoroti item yang dipilih
Anda dapat menekankan item yang dipilih dengan menyetel tipe BottomNavigationBar ke BottomNavigationBarType.shifting.
Bagaimana cara mempertahankan status halaman
Meskipun versi dasar BottomNavigationBar bekerja dengan baik, kami memiliki satu masalah: tindakan apa pun — misalnya, mencari, memfilter, memasukkan teks, menggulir daftar, mengisi formulir kontak, dll. — yang sedang dilakukan pada halaman akan hilang setelah memilih item lain dari BottomNavigationBar.
Dalam demo di atas, kami mencoba mencari kontak. Ketika kami beralih ke bagian kamera sebelum kami menyelesaikan pencarian kami dan kemudian kembali ke bagian obrolan, teks yang dimasukkan sebelumnya benar-benar hilang. Properti indeks digunakan untuk menampilkan satu halaman dari _pages, yang diberikan ke properti anak-anak.
Jangan takut — solusinya cukup sederhana. Cukup ganti widget yang ada dengan IndexedStack. Widget IndexedStack menyimpan setumpuk widget tetapi hanya menampilkan satu per satu. Karena semua widget tetap berada di tumpukan, status dipertahankan.
– Bagaimana cara memasukkan TabBar dengan BottomNavigationBar
Terkadang satu halaman tidak cukup untuk mencakup berbagai subkategori dalam kategori induk di dalam BottomNavigationBar. Misalnya, aplikasi Google Play Store memiliki subkategori berlabel Untuk Anda, Tangga lagu teratas, Anak-anak, dll. Skenario seperti ini memerlukan widget Flutter TabBar. Untuk tujuan demonstrasi, mari kita coba menambahkan TabBar untuk panggilan masuk, keluar, dan tidak terjawab di dalam bagian panggilan, seperti yang ditunjukkan di bawah ini: Struktur keseluruhan BottomNavigationBar tetap sama. Anda mungkin perlu membuat kelas terpisah untuk halaman tempat Anda ingin menyertakan TabBar. Untuk tujuan itu, CallsPage dibuat dan ditambahkan ke daftar halaman.
Menyembunyikan Bilah Navigasi Bawah pada gulir
Saat membuat aplikasi Flutter, Anda selalu ingin memanfaatkan ruang layar seefisien mungkin. Saat pengguna menggulir daftar panjang item di salah satu halaman di aplikasi Anda, Anda dapat menyembunyikan BottomNavigationBar dengan lancar. Perilaku ini meningkatkan pengalaman pengguna karena Anda hanya menampilkan konten yang diperlukan pada saat itu. Sampai sekarang, BottomNavigationBar tetap seperti apa adanya saat menggulir daftar panggilan keluar.