06/01/25, 10.

39 Layouts Part 1 - Flutter

Layouts Part 1

Widget yang digunakan untuk mengatur tata letak disebut invisible widget. Invisible widget
dapat saling dipadukan untuk membuat tata letak yang lebih kompleks. Sebagai contoh
gambar dibawah ini terdiri dari 1 widget Row dan 3 widget Column dengan setiap kolomnya
terdiri dari widget Icon dan Text.

Berikut ini adalah struktur pohon dari layout diatas.

Row and Column

ppb.yudiantosujana.com/layouts1/ 1/10
06/01/25, 10.39 Layouts Part 1 - Flutter

Row digunakan untuk mengatur widget secara horizontal, sedangkan Column secara vertikal.
Jika dua buah widget diletakkan didalam Row, maka widget itu akan ditampilkan secara
berurutan kekanan. Jika didalam Column, akan ditampikan berurutan kebawah.

Berikut ini contoh penggunaan widget Row dan Column.

...
Row(
children: [
Icon(
Icons.home,
size: 100,
),
Icon(
Icons.home,
size: 100,
),
],
),
...

...
Column(
children: [
Icon(
Icons.home,
size: 100,
),
Icon(
Icons.home,
size: 100,
),
],
),
...

ppb.yudiantosujana.com/layouts1/ 2/10
06/01/25, 10.39 Layouts Part 1 - Flutter

Gambar sebelah kiri adalah layout dengan widget Row dan sebelah kanan dengan widget
Column

Untuk mempermudah, kita pisahkan widget icon menjadi sebuah fungsi iconWidget .

Icon iconWidget() {
return Icon(
Icons.home,
size: 100,
);
}

sehingga kode layout Row menjadi berikut ini.

...
Row(
children: [
iconWidget(),
iconWidget(),
],
),
...

Kita dapat mengontrol bagaimana Row atau Column menyejajarkan widget dengan properti
mainAxisAlignment dan crossAxisAlignment . Properti mainAxisAlignment pada Row
menyejajarkan secara horizontal, dan crossAxisAlignment secara vertikal. Sedankan untuk
Column, properti mainAxisAlignment menyejajarkan secara vertikal, dan
crossAxisAlignment secara horizontal.

ppb.yudiantosujana.com/layouts1/ 3/10
06/01/25, 10.39 Layouts Part 1 - Flutter

Berikut ini contoh penggunaannya.

Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
iconWidget(),
iconWidget(),
],
),

Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
iconWidget(),
iconWidget(),
],
),

ppb.yudiantosujana.com/layouts1/ 4/10
06/01/25, 10.39 Layouts Part 1 - Flutter

Berikut ini kode lengkap layout dengan Row. Klik Run, dan tunggu sampai tampil hasilnya
disebelah kanan.

1 import 'package:flutter/material.dart';
2
3 void main() {
4 runApp(const MyApp());
5 }
6
7 class MyApp extends StatelessWidget {
8 const MyApp({super.key});
9
10 // This widget is the root of your application.
11 @override
12 Widget build(BuildContext context) {
13 return MaterialApp(
14 debugShowCheckedModeBanner: false,
15 home: Scaffold(
16 appBar: AppBar(
17 title: const Text("Layouts"),
18 ),
19 body: Row(
20 mainAxisAlignment: MainAxisAlignment.spaceEvenly,
21 crossAxisAlignment: CrossAxisAlignment.stretch,

ppb.yudiantosujana.com/layouts1/ 5/10
06/01/25, 10.39 Layouts Part 1 - Flutter

22 children: [
23 iconWidget(),
24 iconWidget(),
25 ],
26 ),
27 ),
28 );
29 }
30
31 Icon iconWidget() {
32 return const Icon(
33 Icons.home,
34 size: 100,
35 );
36 }
37 }

rowcolumn.dart hosted with ❤ by GitHub view raw

Challenge

Ubah kode diatas sehingga menghasilkan output seperti berikut ini.

ppb.yudiantosujana.com/layouts1/ 6/10
06/01/25, 10.39 Layouts Part 1 - Flutter

Expanded
Widget dapat diubah ukurannya agar pas dalam satu baris atau kolom dengan menggunakan
widget Expanded . Misalkan kita memasukkan sebuah gambar dan ternyata ukuran gambar
tersebut melebihi ukuran layar, maka akan terjadi overflow yang ditandai garis kuning seperti
gambar dibawah. Untuk itu kita bisa menggunakan Expanded untuk mengatur ukuran agar pas
dengan layar.

// tanpa expanded
child: Image.asset("images/animal2.jpg"),
// dengan expanded
Expanded(child: Image.asset("images/animal2.jpg")),

Sebelum dan sesudah menggunakan widget Expanded

Images

Untuk mempraktekkan widget Expanded pada gambar, buat sebuah folder dengan nama
images di folder utama proyek anda. Kemudian unduh tiga file gambar berikut ini dan letakkan
didalam folder images .

Gambar 1

Gambar 2

Gambar 3

ppb.yudiantosujana.com/layouts1/ 7/10
06/01/25, 10.39 Layouts Part 1 - Flutter

Kemudian buka file pubspec.yaml yang ada di direktori utama dan tambahkan kode berikut di
bawah flutter: .

flutter:
assets:
- images/

Buat kode seperti berikut ini.

import 'package:flutter/material.dart';

void main() {
runApp(const MyApp());
}

class MyApp extends StatelessWidget {

const MyApp({super.key});

// This widget is the root of your application.

@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: const Text("Layouts"),
),
body: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(child: Image.asset("images/animal1.jpg")),
Expanded(child: Image.asset("images/animal2.jpg")),
Expanded(child: Image.asset("images/animal3.jpg")),
],
),
),
);
}
}

ppb.yudiantosujana.com/layouts1/ 8/10
06/01/25, 10.39 Layouts Part 1 - Flutter

Pada kode diatas kita menampilkan tiga buah gambar yang disusun berdampingan secara
horizontal. Untuk membuat gambar dapat menempati seluruh ruang pada layar, kita gunakan
widget Expanded .

Expanded(child: Image.asset("images/animal1.jpg")),
Expanded(child: Image.asset("images/animal2.jpg")),
Expanded(child: Image.asset("images/animal3.jpg")),

Silahkan mencoba hapus widget Expanded di salah satu gambar, apa yang terjadi?

Flex

Jika kita ingin membuat salah satu gambar lebih besar dari gambar lainnya, kita dapat
menggunakan properti flex pada widget Expanded .

Expanded(child: Image.asset("images/animal1.jpg")),
Expanded(flex:2, child: Image.asset("images/animal2.jpg")),
Expanded(child: Image.asset("images/animal3.jpg")),

ppb.yudiantosujana.com/layouts1/ 9/10
06/01/25, 10.39 Layouts Part 1 - Flutter

ppb.yudiantosujana.com/layouts1/ 10/10