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

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,
    ),
  ],
),
...

 

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.

    

Berikut ini contoh penggunaannya.

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

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

 

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

Challenge

Ubah kode diatas sehingga menghasilkan output seperti berikut ini.

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

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")),
          ],
        ),
      ),
    );
  }
}

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")),

SizedBox

SizedBox adalah widget di Flutter yang digunakan untuk mengatur ukuran (tinggi dan lebar) atau memberi jarak antar widget.

Jika hanya menggunakan height atau width, SizedBox berfungsi sebagai spacer.

Center(
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [
      Expanded(child: Image.asset("images/animal_1.jpg")),
      SizedBox(width: 10),
      Expanded(child: Image.asset("images/animal_2.jpg")),
    ],
  ),
),

SizedBox juga bisa digunakan untuk membatasi ukuran widget anaknya (child).

SizedBox(
  width: 200,
  height: 200,
  child: Image.asset("images/animal_1.jpg"),,
)

Selain itu SizedBox juga bisa digunakan untuk membuat ruang kosong.

SizedBox(
  width: 100,
  height: 100,
)

Challenge 2

Buat layout seperti berikut ini