Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android SDK
Code

Google Flutter From Scratch: Grid, Daftar, dan Sumber Data

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Google Flutter From Scratch.
Google Flutter From Scratch: Building Apps With Widgets
Google Flutter From Scratch: Animating Widgets

Indonesian (Bahasa Indonesia) translation by Agus (you can also view the original English article)

Hampir setiap aplikasi seluler non-trivial saat ini cenderung memiliki daftar dalam layout nya. Itu karena menggunakan daftar yang dapat digulir sering kali merupakan cara paling mudah untuk menampilkan sejumlah besar barang serupa di layar kecil.

Kerangka Flutter menawarkan beberapa widget yang dapat Anda gunakan secara efisien, dan dengan kode minimal, buat dan tampilkan daftar tersebut. Dalam tutorial ini, saya akan menunjukkan cara menggunakannya dengan sumber data lokal dan jarak jauh.

1. Menampilkan Daftar yang Tidak Dapat Digulir

Jika Anda perlu menampilkan sejumlah kecil barang serupa, dan Anda yakin bahwa layar pengguna akan dapat mengakomodasi semuanya pada saat yang sama, menggunakan widget Column adalah hal yang paling efisien untuk dilakukan.

Untuk membuat daftar di aplikasi Flutter Anda, Anda dapat menggunakan List class  yang ditawarkan oleh bahasa pemrograman Dart. Setelah membuat daftar, Anda bisa menggunakan metode add () untuk menambahkan sejumlah item ke dalamnya. Kode berikut menunjukkan kepada Anda cara membuat daftar yang berisi tiga widget RaisedButton:

Perhatikan bahwa setiap item dalam daftar memiliki onPressed event handler yang kosong terkait dengan itu karena, tanpa itu, item tersebut akan dinonaktifkan.

Sekarang daftar sudah siap, Anda dapat langsung menetapkannya ke children property dari widget Column yang akan ditampilkan. Biasanya, bagaimanapun, Anda juga akan ingin menentukan di mana daftar item harus ditempatkan di layar. Karena widget Columnadalah widget fleksibel, Anda dapat mengontrol posisi item di sepanjang sumbu utamanya dan sumbu silang menggunakan properti mainAxisAlignment dan crossAxisAlignment. Secara default, untuk widget Column , sumbu utama adalah sumbu vertikal, dan sumbu silang adalah sumbu horizontal.

Kode berikut menunjukkan kepada Anda bagaimana meregangkan tiga tombol di sumbu horizontal dan menempatkannya di tengah layar secara vertikal:

Inilah yang akan terlihat seperti kolom sekarang:

App displaying column with three buttons

Penting untuk dicatat bahwa Anda akan mengalami kesalahan runtime jika widget Column tidak dapat mengakomodasi semua anak-anaknya. Misalnya, jika Anda memiliki lebih dari selusin widget RaisedButton di daftar Anda, bukan tiga, Anda akan melihat pesan kesalahan yang terlihat seperti ini:

App displaying overflow error

2. Menampilkan Daftar Digulir Sederhana

Untuk daftar yang sedikit lebih besar, daftar yang kontennya cenderung overflow the screen, Anda harus mempertimbangkan menggunakan widget ListView karena mendukung pengguliran.

Anda mungkin telah memperhatikan bahwa kode yang kita tulis untuk membuat daftar pada langkah sebelumnya adalah panjang dan berulang. Membuat daftar yang lebih besar menggunakan pendekatan yang sama bisa sangat membosankan. Pendekatan alternatif yang mudah adalah menggunakan dua daftar sebagai gantinya: satu berisi data, dan satu berisi widget.

Berikut adalah bagaimana Anda dapat menggunakan operator [] untuk dengan cepat menciptakan daftar data, yang, untuk saat ini, hanya berisi beberapa string:

Untuk mengkonversi daftar string di atas ke dalam daftar widget RaisedButton, Anda dapat menggunakan metode map () dan toList (). Dengan metode map (), Anda dapat menggunakan setiap string untuk menghasilkan widget RaisedButton baru. Dan dengan metode toList (), Anda dapat mengonversi objek Iterable yang dikembalikan oleh metode map () ke dalam objek List sebenarnya. Kode berikut menunjukkan kepada Anda bagaimana:

Demi kelengkapan, kode di atas juga menunjukkan Anda bagaimana untuk membuat sebuah onPressed event handler yang menggunakan metode canLaunch() dan launch() yang ditawarkan oleh paket url_launcher untuk membuka situs web pengguna yang dipilih dalam default browser.

Setelah daftar Anda siap, Anda dapat meneruskannya ke children property dari widget ListView untuk menampilkannya.

Pada titik ini, jika Anda menjalankan aplikasi, Anda harus dapat menggulir daftar dan menekan tombol apa pun untuk meluncurkan situs web terkait.

App displaying a scrollable list

3. Membuat Grid

Widget ListView memungkinkan Anda menempatkan hanya satu item pada sumbu silangnya. Item akan, secara default, ditarik untuk menempati semua ruang yang tersedia pada sumbu itu. Jika Anda menginginkan lebih banyak fleksibilitas, Anda harus mempertimbangkan menggunakan widget GridView sebagai gantinya, yang memungkinkan Anda menentukan berapa banyak item yang Anda inginkan di sumbu silang.

Kode berikut menggunakan konstruktor GridView.count () untuk membuat widget GridView yang menampilkan dua item per baris:

Berikut adalah apa yang tampak seperti grid:

App displaying a grid of buttons

4. Menampilkan Daftar Besar

Untuk daftar data yang berisi lebih dari beberapa lusin item, Anda harus menghindari membuat daftar widget secara manual, seperti yang Anda lakukan pada langkah sebelumnya. Mengapa? Karena membuat widget adalah operasi yang mahal, dan daftar besar widget dapat menghabiskan banyak memori.

Sebagai gantinya, Anda harus menggunakan fungsi IndexedWidgetBuilder, yang memungkinkan Anda menghasilkan widget hanya ketika pengguna perlu melihatnya. Dengan itu, Anda dapat dengan malas menghasilkan widget saat pengguna menggulir melalui widget ListView Anda.

Sangat tidak mungkin bahwa Anda akan memiliki sejumlah besar data yang ditentukan tepat di dalam aplikasi Anda. Biasanya, Anda akan mengambil data tersebut dari server jauh. Oleh karena itu, untuk memberi Anda contoh realistis, izinkan saya sekarang menunjukkan kepada Anda cara mengambil 100 pertanyaan dari Stack Overflow menggunakan API Stack Exchange dan menampilkannya sesuai permintaan.

Mulailah dengan membuat subkelas dari kelas StatefulWidget, yang akan bertindak sebagai kontainer untuk widget ListView Anda dan menimpa metode createState ().

Kelas MyState yang disebutkan dalam kode di atas belum ada, jadi buat dan ganti metode build () -nya.

Selanjutnya, tambahkan objek List sebagai salah satu variabel anggota kelas. Anda akan menggunakannya untuk menyimpan pertanyaan yang Anda unduh dari Stack Overflow. Selain itu, tambahkan API's endpoint sebagai variabel lain.

Kecuali Anda ingin pengguna Anda menekan tombol untuk mengunduh pertanyaan, saya sarankan Anda mengunduhnya secara otomatis ketika widget tersebut menginisialisasi. Dengan demikian, mengganti metode initState () dan membuat panggilan ke metode asinkron baru yang disebut loadData ().

Di dalam metode loadData (), Anda dapat menggunakan fungsi get () dari paket http Dart untuk mengunduh pertanyaan. API endpoint mengembalikan dokumen JSON, yang dapat Anda uraikan dengan menggunakan fungsi json.decode () yang tersedia dalam paket Dart's convert . Kode berikut menunjukkan kepada Anda bagaimana:

Setelah dokumen JSON diubah menjadi objek Map, Anda dapat menggunakan nilai yang terkait dengan kunci items untuk menginisialisasi questions variable. Variabel, bagaimanapun, adalah bagian dari widget's state. Oleh karena itu, Anda harus memastikan Anda memperbaruinya di dalam metode setState () saja. Begini caranya:

Pada titik ini Anda dapat membuat widget ListView baru menggunakan konstruktor ListView.builder (), yang mengharapkan fungsi IndexedWidgetBuilder dan jumlah item sebagai argumennya. Untuk saat ini, jumlah item tidak lain hanyalah ukuran daftar questions . Dengan demikian, tambahkan kode berikut di dalam metode build () dari MyState class:

Dalam fungsi builder, yang perlu Anda lakukan adalah membuat pohon kecil widget untuk menampilkan berbagai informasi tentang setiap pertanyaan yang Anda download. Paket Flutter's material menawarkan sebuah widget yang sangat berguna disebut ListTile, yang memungkinkan Anda untuk dengan cepat menciptakan sebuah pohon sementara mengikuti pedoman desain bahan.

Kode berikut menunjukkan kepada Anda cara menampilkan judul pertanyaan dan penulis, menggunakan properti title dan subtitle dari widget ListTile:

Terakhir, buat widget Scaffold baru, tetapkan widget ListView ke body property, dan kembalikan dari metode build () sehingga dapat digunakan dengan widget MaterialApp. Opsional, Anda dapat menambahkan widget AppBar ke widget Scaffold.

Inilah yang akan terlihat setelah aplikasi mengunduh pertanyaan:

App displaying Stack Overflow data

Kesimpulan

Anda sekarang tahu cara bekerja dengan daftar dalam aplikasi Flutter. Dalam tutorial ini, Anda belajar tidak hanya cara membuat daftar dan kisi yang mendukung sumber data besar, tetapi juga cara membuat setiap item di dalamnya interaktif. Untuk mempelajari lebih lanjut tentang daftar di Flutter, Anda dapat merujuk ke documentation resmi.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.