Diterjemahkan dari bahasa Inggris ke bahasa Indonesia - www.onlinedoctranslator.

com

Pemrograman Pemrograman Seluler

Aplikasi Tata Letak Tingkat Lanjut

Di bagian ini, mari kita pelajari cara membuat antarmuka pengguna yang kompleks dari
daftar produk dengan
desain khusus menggunakan widget tata letak anak tunggal dan ganda.
Untuk tujuan ini, ikuti urutan yang diberikan di bawah ini:
 Buat aplikasi Flutter baru di Android studio, store_app.
 Ganti kode main.dart dengan kode berikut:

impor 'paket: flutter/material.dart';

ruang kosong main() => runApp(Aplikasi Saya());

kelas Aplikasi Sayameluas Widget Tanpa Kewarganegaraan {// Widget ini
adalah akar dari aplikasi Anda.@mengesampingkanPembuatan widget (konteks
BuildContext) {kembali Aplikasi Material( judul:'Demo Berdebar',
tema:TemaData(Swatch primer: Warna.biru,

), rumah: Halaman Beranda Saya(judul: 'Halaman beranda demo tata letak

produk'), ); }}

 Di sini, Kami telah membuat widget MyHomePage dengan memperluas

StatelessWidget alih-alih StatefulWidget default dan kemudian menghapus kode
yang relevan.
 Sekarang, buat widget baru, ProductBox sesuai dengan desain yang ditentukan
seperti yang ditunjukkan
di bawah:

Kode untuk ProductBox adalah sebagai berikut:

kelas Kotak Produkmeluas StatelessWidget { ProductBox({Kunci? kunci,ini.nama
='', ini.keterangan= '', ini.harga= 0, ini.gambar= ''}) :super(kunci:
kunci);terakhir Rangkaian nama;terakhir Rangkaian keterangan;terakhir ke dalam
harga;terakhir Rangkaian gambar; Pembuatan widget (konteks BuildContext) {
kembali Wadah( bantalan:EdgeInsets.semua(2), tinggi:120,
anak:Kartu( anak:Baris( mainAxisAlignment: MainAxisAlignment.ruangMerata,
anak-anak: <Widget>[Gambar.aset("aset/gambar aplikasi/"+
gambar),diperluas( anak:Wadah( bantalan:EdgeInsets.semua(5),
anak:Kolom( mainAxisAlignment: MainAxisAlignment.ruangMerata, anak-anak:
<Widget>[Teks(ini.nama, gaya:Gaya Teks(fontWeight:
FontWeight.berani)),Teks(ini.keterangan),Teks("Harga: " +
ini.harga.toString()), ], ))) ]))); }}

1|Halaman Muhammad Irvan

Pemrograman Pemrograman Seluler

 Harap perhatikan yang berikut dalam kode:

o Kotak Produk telah menggunakan empat argumen seperti yang ditentukan di
bawah ini:
 nama - Nama Produk
 keterangan - Deskripsi Produk
 harga - Harga produk
 gambar - Gambar produk
o Kotak Produk menggunakan tujuh widget bawaan seperti yang ditentukan di
bawah ini:
 Wadah
 diperluas
 Baris
 Kolom
 Kartu
 Teks
 Kotak Produkdirancang menggunakan widget yang disebutkan di atas. Susunan atau
hierarki widget ditentukan dalam diagram yang ditunjukkan di bawah ini:

 Sekarang, letakkan beberapa gambar dummy (lihat di bawah) untuk informasi

produk di folder aset aplikasi dan konfigurasikan folder aset di file pubspec.yaml
seperti yang ditunjukkan di bawah ini:

2|Halaman Muhammad Irvan

Pemrograman Pemrograman Seluler

Gambar definisi di pubspec.yaml

 Terakhir, Gunakan widget ProductBox di widget MyHomePage seperti yang

ditentukan di bawah ini:
kelas Halaman Beranda Sayameluas StatelessWidget { MyHomePage({ Kunci?
kunci,ini.judul= ''}) : super(kunci: kunci);terakhir Rangkaian
judul;@mengesampingkanPembuatan widget (konteks BuildContext) {kembali
Perancah( bilah aplikasi:AppBar(judul: Teks("Daftar Produk")),
tubuh:Tampilan Daftar(shrinkWrap:benar,
bantalan:konstanEdgeInsets.dariLTRB(2.0, 10.0, 2.0, 10.0), anak-anak:
<Widget>[Kotak Produk(nama:"iPhone", keterangan:"iPhone adalah ponsel
stylist yang pernah ada", harga:1000, gambar:"iPhone.jpg"),Kotak
Produk(nama:"Piksel", keterangan:"Pixel adalah ponsel paling berfitur yang
pernah ada", harga:800, gambar:"piksel.png"),Kotak Produk(nama:"Laptop",
keterangan:"Laptop adalah alat pengembangan paling produktif", harga:2000,
gambar:"laptop.jpg"),Kotak Produk(nama:"Tablet", keterangan:"Tablet adalah
perangkat paling berguna yang pernah ada untuk rapat", harga:1500,
gambar:"tablet.jpg"),

Kotak Produk(nama:"Floppy Drive", keterangan:"Floppy drive adalah media

penyimpanan penyelamat yang berguna", harga:20,
gambar:"floppy.jpg"), ], )); }}
Di sini, kami telah menggunakan ProductBox sebagai anak dari widget ListView.
 Kode lengkap (main.dart) dari aplikasi tata letak produk (store_app) adalah sebagai
berikut:
impor 'paket: flutter/material.dart';

ruang kosong main() => runApp(Aplikasi Saya());

kelas Aplikasi Sayameluas Widget Tanpa Kewarganegaraan {// Widget ini
adalah akar dari aplikasi Anda.@mengesampingkanPembuatan widget (konteks
BuildContext) {kembali Aplikasi Material(
judul: 'Demo Berdebar', tema:TemaData(Swatch primer: Warna.biru,

), rumah: Halaman Beranda Saya(judul: 'Halaman beranda demo tata letak

produk'), ); }}

3|Halaman Muhammad Irvan

Pemrograman Pemrograman Seluler

kelas Halaman Beranda Sayameluas StatelessWidget { MyHomePage({ Kunci?

kunci,ini.judul= ''}) : super(kunci: kunci);terakhir Rangkaian
judul;@mengesampingkanPembuatan widget (konteks BuildContext) {kembali
Perancah( bilah aplikasi:AppBar(judul: Teks("Daftar Produk")),
tubuh:Tampilan Daftar(shrinkWrap:benar,
bantalan:konstanEdgeInsets.dariLTRB(2.0, 10.0, 2.0, 10.0), anak-anak:
<Widget>[Kotak Produk(nama:"iPhone", keterangan:"iPhone adalah ponsel
stylist yang pernah ada", harga:1000, gambar:"iPhone.jpg"),Kotak
Produk(nama:"Piksel", keterangan:"Pixel adalah ponsel paling berfitur yang
pernah ada", harga:800, gambar:"piksel.png"),Kotak Produk(nama:"Laptop",
keterangan:"Laptop adalah alat pengembangan paling produktif", harga:2000,
gambar:"laptop.jpg"),Kotak Produk(nama:"Tablet", keterangan:"Tablet adalah
perangkat paling berguna yang pernah ada untuk rapat", harga:1500,
gambar:"tablet.jpg"),

Kotak Produk(nama:"Floppy Drive", keterangan:"Floppy drive adalah media

penyimpanan penyelamat yang berguna", harga:20,
gambar:"floppy.jpg"), ], )); }}

kelas Kotak Produkmeluas StatelessWidget { ProductBox({Kunci?

kunci,ini.nama ='', ini.keterangan= '', ini.harga= 0, ini.gambar=
''}) :super(kunci: kunci);
terakhir Rangkaian nama;terakhir Rangkaian keterangan;terakhir ke dalam
harga;terakhir Rangkaian gambar; Pembuatan widget (konteks BuildContext)
{kembali Wadah( bantalan:EdgeInsets.semua(2), tinggi:120,
anak:Kartu( anak:Baris( mainAxisAlignment: MainAxisAlignment.ruangMerata,
anak-anak: <Widget>[Gambar.aset("aset/gambar aplikasi/"+ gambar),diperluas(
anak:Wadah( bantalan:EdgeInsets.semua(5), anak:Kolom( mainAxisAlignment:
MainAxisAlignment.ruangMerata, anak-anak: <Widget>[Teks(ini.nama, gaya:Gaya
Teks(fontWeight: FontWeight.berani)),Teks(ini.keterangan),Teks("Harga: " +
ini.harga.toString()), ], ))) ]))); }}

 Di sini, output dari aplikasi

4|Halaman Muhammad Irvan

Pemrograman Pemrograman Seluler

Tugas :
- Buatlah sebuah aplikasi untuk membuat daftar pemain film dengan Tampilan seperti
aplikasi store_app di atas. Dengan nama pemain film tersebut, film yang sudah pernah
dimainkan, usia.
- Kirimkan file project dan dokumentasi ke email :Muhammad.irvan@mercubuana.ac.id

5|Halaman Muhammad Irvan