wayground logo

Free Printable Worksheets

NEW

Font size

S
M
L
XL
Worksheets

KUIS WIDGET LAYOUT

Total questions: 20

Worksheet time: 10mins

Name
Class
Date
1.

Jika kode dijalankan, bagaimana posisi huruf A, B, C dalam layar secara default?

a)

Berderet ke bawah, sejajar kiri (rata kiri)

b)

Berderet ke kanan, sejajar atas (rata atas)

c)

Berderet ke kanan, sejajar kiri (rata kiri)

d)

Berderet ke bawah, sejajar tengah (rata tengah)

e)

Berderet ke kanan, sejajar ke tengah (rata tengah)

2.

Widget apa yang paling tepat digunakan jika ingin membuat sebuah tampilan list menu makanan dengan jumlah item yang sangat banyak dan dapat di-scroll secara efisien?

a)

Column

b)

Row

c)

ListView

d)

Container

e)

Stack

3.

Apabila kita ingin membuat dua widget sejajar horizontal dengan lebar proporsional (misalnya kiri 1/3 dan kanan 2/3). Widget layout apa yang paling tepat digunakan?

a)

Row + Expanded

b)

Column + SizedBox

c)

Stack + Positioned

d)

Align + Center

e)

Row + Sizedbox

4.

Apa fungsi padding pada kode di atas?

a)

Membuat ListView bisa discroll

b)

Mengatur ukuran font teks

c)

Memberi jarak di dalam ListView antara tepi dan konten

d)

Memberi jarak di luar ListView

e)

Memberi jarak antar item ListView

5.

Bagaimana tampilan dari kode tersebut?

a)

Tiga kotak berwarna disusun vertikal dan bisa discroll ke bawah

b)

Tiga kotak berwarna disusun horizontal dan bisa discroll ke samping

c)

Tiga kotak berwarna disusun horizontal dan bisa discroll ke bawah

d)

Tiga kotak berwarna disusun vertikal dan bisa discroll ke samping

e)

Tiga kotak berwarna disusun vertikal tanpa bisa discroll

6.

Seorang developer ingin membuat layout seperti berikut di Flutter. Widget layout manakah yang paling efisien untuk digunakan?

a)

Column

b)

Row dengan Image dan Column

c)

Stack dengan Positioned

d)

ListView dengan Row

e)

GridView dengan Row

7.

Apabila kamu ingin menampilkan foto profil berbentuk lingkaran dengan nama di bawahnya. Widget apa yang paling efisien digunakan?

a)

CircleAvatar + Column

b)

Image + Row

c)

CircleAvatar + Row

d)

CircleAvatar + ListTile

e)

Icon + Text

8.

Dimanakah posisi ikon bintang pada tampilan kode widget stack tersebut?

a)

Tengah layar

b)

Pojok kiri atas kotak hijau

c)

Pojok kanan bawah kotak hijau

d)

Di luar kotak hijau

e)

Menutupi seluruh kotak hijau

9.

Widget SafeArea berguna untuk…

a)

Membatasi ukuran widget

b)

Menghindari area layar yang tertutup notch/status bar

c)

Membuat widget bisa di-scroll

d)

Membuat widget selalu berada di tengah

e)

Memberi efek bayangan pada widget

10.

Perbedaan utama antara Row dan Wrap adalah…

a)

Row bisa scroll otomatis, Wrap tidak

b)

Wrap bisa otomatis pindah ke baris baru, Row tidak

c)

Wrap hanya bisa horizontal, Row bisa vertikal

d)

Row lebih lambat daripada Wrap

e)

Wrap tidak bisa diberi alignment

11.

Perhatikan kode berikut!

Jika layar lebih sempit dari total lebar kotak, bagaimana hasilnya?

a)

Kotak meluap keluar layar (overflow error)

b)

Kotak mengecil agar muat di layar

c)

Kotak otomatis turun ke baris berikutnya

d)

Kotak hanya menampilkan 2 warna pertama

e)

Kotak bergabung menjadi 1 widget

12.

Seorang siswa menampilkan banyak item dengan Column. Saat item lebih banyak dari layar, muncul error overflow. Apa solusi terbaik?

a)

Ganti Column dengan Row

b)

Bungkus Column dengan SingleChildScrollView

c)

Ganti Column dengan ListView

d)

Tambahkan Expanded pada setiap item

e)

Gunakan Stack

13.

Seorang developer ingin membuat daftar produk. Ia bingung memilih antara Column dan ListView. Jika jumlah produk hanya 3 item, mana pilihan yang lebih tepat?



a)

Column, karena lebih sederhana

b)

ListView, karena lebih cepat

c)

Column, karena bisa scroll otomatis

d)

ListView, karena bisa menumpuk widget

e)

ListView, karena lebih hemat memori

14.

Bagaimana hasil tampilan dari kode berikut?

a)

4 kotak dalam 2 kolom dan 2 baris

b)

4 kotak berderet ke kanan tanpa baris baru

c)

4 kotak berderet ke bawah

d)

Kotak merah memenuhi layar, sisanya tersembunyi

e)

Error karena GridView tidak bisa langsung menampilkan Container

15.

Apa fungsi dari crossAxisSpacing dalam kode tersebut....

a)

memberi jarak antar kolom pada gridview 10px

b)

memberi jarak antar baris pada grid view 10px

c)

jumlah kolom dalam gridview

d)

jumlah baris dalam gridview

e)

memberi jarak antar icons

16.

Bagaimana hasil tampilan dari kode tersebut...

a)

Avatar bulat dengan huruf "A", teks "Ayu" di samping kanannya Avatar, subtitle "Online" di bawahnya teks "Ayu"

b)

Avatar bulat dengan huruf "A" , teks "Ayu" di bawahnya Avatar dan subtitle "Online" di bawahnya teks "Ayu"

c)

Avatar bulat dengan huruf "A" , teks "Ayu" di bawahnya Avatar dan subtitle "Online" di sampingnya teks "Ayu"

d)

Avatar bulat dengan huruf "A" , teks "Ayu" di samping kirinya Avatar dan subtitle "Online" di bawahnya teks "Ayu"

e)

Avatar bulat dengan huruf "A" , teks "Ayu" di samping kanannya Avatar dan subtitle "Online" di samping kanannya teks "Ayu"

17.

Pada ListTile, properti leading digunakan untuk…

a)

Menambahkan teks utama

b)

Menambahkan ikon/avatar di sebelah kiri

c)

Menambahkan ikon di sebelah kanan

d)

Memberi jarak antar item

e)

Memberi warna background

18.

Pada Card, properti elevation digunakan untuk…

a)

Menentukan jarak antar Card

b)

Menambahkan ketebalan border

c)

Memberi efek bayangan (shadow) pada Card

d)

Membuat Card bisa diklik

e)

Mengatur warna teks

19.

Apa fungsi margin pada kode tersebut?

a)

Memberi jarak di dalam Card

b)

Memberi jarak di luar Card dari widget sekitarnya

c)

Mengatur ketebalan garis border

d)

Menentukan ukuran teks

e)

Mengatur warna background Card

20.

Bagaimana hasil tampilan dari kode tersebut?

a)

Kotak dengan warna biru, bayangan kecil, berisi 2 teks horisontal

b)

Kotak dengan warna biru, berisi 2 teks vertikal

c)

Kotak dengan warna biru, bayangan kecil, berisi 2 teks vertikal

d)

Kotak dengan warna biru, berisi 2 teks horisontal

e)

Kotak dengan bayangan, berisi 2 teks vertikal