Flutter — Menggunakan Scaffold

Pada kesempatan ini kita akan belajar tentang Scaffold. Mari kita buat terlebih dahulu project Flutter yang baru di Android Studio. Untuk membuat project, Anda bisa melihatnya di catatan saya sebelumnya di sini.

Buka file main.dart dan ganti kodenya menjadi kode berikut:

import 'package:flutter/material.dart';

main() => runApp(AppBelajarScaffold());

class AppBelajarScaffold extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text('Belajar Scaffold'),
          ),
          body: Center(
            child: Text('Halo Scaffold'),
          ),
          drawer: Drawer(
            child: Center(
              child: Text('Ini adalah Drawer'),
            ),
          ),
        )
    );
  }
}

Jika kita jalankan, hasilnya akan terlihat seperti gambar berikut:

Penggunaan Scaffold

Jika kita klik icon hamburger di pojok kiri atas, maka akan muncul drawer seperti pada gambar berikut:

Menu Drawer

Pada catatan sebelumnya setelah MaterialApp biasanya kita menggunakan Material.

Perhatikan pada bagian berikut:

MaterialApp(
 home: Scaffold(
  // ...
 )
);

home tidak selalu widgetMaterial. Pada kode tersebut, kita mengisi home dengan Scaffold. Scaffold menyediakan fungsionalitas dasar yang sering digunakan pada tampilan di layar seperti AppBar, Body dan Drawer.

Perhatikan bagian berikut:

appBar: AppBar(
  title: Text('Belajar Scaffold'),
),

Kode tersebut akan membuat judul di bagian atas layar.

Perhatikan bagian berikut:

body: Center(
  child: Text('Halo Scaffold'),
),

Kode tersebut akan membuat body di layar.

Perhatikan bagian berikut:

drawer: Drawer(
  child: Center(
    child: Text('Ini adalah Drawer'),
  ),
),

Kode tersebut bertugas untuk membuat menu drawer.

Sehingga secara keseluruhan appBar, body dan drawer akan membentuk satu tampilan utuh di layar:

Scaffold Flutter

Elevation dan Brightness

Kita bisa menambahkan elevation dan brightness pada AppBar. Elevation kita gunakan untuk menambah ketinggian appbar dari layar sedangkan brightness kita gunakan untuk merubah warna icon di paling atas menjadi dark atau light.

Coba kita tambahkan elevation sebesar 100:

appBar: AppBar(
  title: Text('Belajar Scaffold'),
  elevation: 100,
),

Hasilnya akan terlihat seperti ada bayangan:

Penggunaan Elevation

Sekarang coba kita ganti warna icon di bagian atas menjadi dark dengan memberikan nilai brightness adalah light:

appBar: AppBar(
  title: Text('Belajar Scaffold'),
  elevation: 100,
  brightness: Brightness.light,
),

Hasilnya warna icon menjadi dark:

Brightness.light

Perhatikan bagian berikut:

elevation: 100,

Nilai 100 pada kode tersebut memiliki satuan dps (density-independent-pixels — 100dps). Intinya, layar apapun yang ada di smartphone user, satu dp bernilai 1/160 inch, sehingga elevation 100 memiliki arti 100/160 inch atau lebih dikenal 5/8 inch.

Perhatikan bagian berikut:

brightness: Brightness.light,

Kode tersebut memberi tahu Flutter untuk mengubah AppBar menjadi light sehingga icon pada bagian atas menjadi dark.

Brightness.light merupakan enum pada Dart.