Flutter Widget: Cara membuat AppBar pada Flutter

Pada kesempatan ini kita akan mempelajari apa itu AppBar dan bagaimana cara membuat AppBar pada Flutter. AppBar merupakan salah satu bagian yang umumnya digunakan pada sebuah aplikasi sebagai menu petunjuk untuk memudahkan pengguna aplikasi. Widget ini terletak pada posisi bagian paling atas aplikasi yang tampilannya kurang lebih seperti di bawah ini.

Flutter AppBar Widget

AppBar biasanya menyediakan tampilan seperti daftar menu, judul aplikasi ataupun tombol-tombol aksi contohnya tombol pencarian, notifikasi ataupun menu lainnya.

Pada flutter untuk membuat AppBar cukup mudah yaitu dengan menggunakan AppBar Widget. Contoh codenya sebagai berikut:

return Scaffold(
  appBar: AppBar(
    leading: Icon(Icons.home),
    title: Text('BelajarFlutter.com'),
    actions: <Widget>[
      IconButton(icon: new Icon(Icons.call, color: Colors.white)),
      IconButton(icon: new Icon(Icons.search, color: Colors.white)),
    ],
  ),
);

Basic AppBar Widget di Flutter

Umumnya sebuah dalam sebuah basic Appbar widget tersusun dari tiga element utama yaitu Leading, Title dan Actions.

membuat AppBar pada Flutter

Leading

widget yang tampil dibagian sisi kiri menu sebelum title yang umumnya difungsikan untuk menambahkan tombol navigasi drawer atau navigasi lainnya.

appBar: AppBar(
   leading: Icon(Icons.home),

Leading pada AppBar bersifat opsional, sehingga sebuah Appbar tidak memiliki leading pun tidak akan menjadi error. Dan apabila leading null maka widget yang berada disebelah kanannya (title widget) akan otomatis memenuhi bagian dari leading section.

Title

merupakan widget utama pada sebuah AppBar. Biasanya akan diisi oleh Text widget atau gambar logo sebuah aplikasi. Properti title pada AppBar seperti child pada single child widget jadi kita dapat memasukan widget-widget lain sesuai kebutuhan. Meskipun title merupakan properti utama pada appBar namun sifatnya pun bersifat opsional.

Penggunaan title pada AppBar menggunakan Text widget

appBar: AppBar(
   title: Text('Ini Title AppBar'),

Contoh title Appbar menggunakan Image

appBar: AppBar(
   title: Image.network('https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTybCniORbVSJJgvqcMaMwxSY4IL6OHxKftgQ&usqp=CAU'),
Screen Shot 2020 08 03 at 20.11.54

Actions

Merupakan property yang berfungsi untuk menambahkan aksi berupa widget dibagian sisi kanan menu yang dapat menampilkan multiple widget lainnya secara horizontal seperti column widget. Action ini biasanya digunakan untuk menampilkan tombol menu yang sering digunakan seperti tombol search, profile dan popup menu.

appBar: AppBar(
  actions: <Widget>[
    IconButton(icon: new Icon(Icons.call, color: Colors.white)),
    IconButton(icon: new Icon(Icons.search, color: Colors.white)),
  ],

Selain tiga properti diatas, Appbar juga memiliki properti lain yang tidak kalah pentingnya yaitu :


Background Color.

Secara default AppBar widget menggunakan warna biru sebagai backgroundnya namun anda bisa menggantinya dengan warna custom dengan menambahan :

backgroundColor: Colors.red

Kita juga dapat menggunakan nilai transparent untuk membuat transparan pada background appbar flutter.

backgroundColor: Colors.transparent,

Apabila ingin merubah warna background Appbar menjadi warna gradasi maka kita menggunakan flexibleSpace dan BoxDecoration. codenya seperti dibawah ini :

appBar: AppBar(
  title: Text('BelajarFlutter.com'),
  flexibleSpace: Container(
    decoration: BoxDecoration(
      gradient: LinearGradient(
        begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          colors: <Color>[
        Colors.green,
        Colors.blue
      ])          
    ),
  ),     
),
gradient appbar flutter

Elevation.

Jika Anda melihatnya pada bagian menu terdapat bayangan dibagian bawah menu, property elevation berguna untuk mengatur bayangannya. Secara default bayangannnya memiliki nilai 4, jadi apabila ingin menghapus bayangan ganti dengan nilai 0 dengan kode berikut :

elevation: 0,

centerTitle.

Fungsi property ini adalah untuk membuat sebuah judul di AppBar dapat diposisikan ke bagian tengah, untuk mengaktifkanya tinggal berikan fungsi true di property ini. Contohnya :

centerTitle: true,

Karena pada dasarnya judul yang tidak menggunakan property ini akan berada di bagian sisi kiri. Fungsinya juga sama dengan property Alignment.


Brightness.

Secara default warna item (Text dan Icon) pada AppBar adalah berwarna putih. Lalu bagaimana jika kita membutuhkan warna putih atau terang sebagai background pada Appbar? Icon dan text menjadi kurang terlihat dan bahkan tidak terlihat. Text dan Icon yang dimaksud disini yaitu secara keseluruhan yaitu widget pada leading, title, action bahkan simbol wifi, baterai dan jam.

Untuk widget tentu kita bisa rubah seperti widget pada umumnya, bisa memberi warna text dan lain-lain. Akan tetapi bagaimana dengan icon yang berada diluar safeArea seperti icon wifi, baterai, jam, dan lain-lain ?

Untuk merubahnya kita dapat menggunakan property Brightness. Saat kita memiliki background yang cenderung gelap maka anda dapat menggunakan brightness: Brightness.light, yang artinya icon di luar safe area akan menjadi berwarna terang (putih). Dan begitu juga sebaliknya, apabila background appBar cenderung terang maka gunakan brightness: Brightness.dark,

appBar: AppBar(
  brightness: Brightness.light,
  backgroundColor: Colors.yellowAccent,
  title: Text(
    'BelajarFlutter.com',
    style: TextStyle(color: Colors.purple)
  )
),
flutter brightness appbar

Apabila anda pernah mendengar istilah mode malam, property Brightness juga dapat sangat berguna saat pergantian mode theme. FYI android versi 10 (API level 29)  atau lebih tinggi sudah support dengan mode malam (dark mode).


titleSpacing.

Bertujuan untuk memberikan jarak spasi pada judul agar bisa lebih jauh atau lebih dekat dengan leading. Property ini hanya akan memberikan perubahan jarak secara garis horizontal saja. Semakin besar nilainya maka judul akan menjauh dari Leading.

Contoh penggunaan kodenya sebagai berikut :

titleSpacing: 12,

toolbarOpacity

Yaitu berguna untuk mengatur transaparasi menu AppBar aplikasi anda. Penggunaan Property ini hanya bisa menggunakan nilai 1.0 untuk tetap bewarna dan 0.0 untuk 100% transparan.

Sedikit informasi, penggunaan property ini akan sedikit mengganggu jika digunakan di Widget ScaffoldAppBar karena akan membuat menu menjadi transparan. Property ini sering digunakan di Widget SliverAppBar karena memang dikondisikan Ketika layar aplikasi digulir ke bagian bawah.

Namun jika ingin mencoba hasilnya gunakan kode ini :

toolbarOpacity: 0.0,

Itulah beberapa penerapan fungsi property di AppBar Class yang bisa Anda gunakan semuanya dengan mengkombinasikan masing masing property untuk mendapatkan tampilan AppBar lebih menarik.


Penutupan

Penerapan AppBar Class ini merupakan desain yang masih sederhana dan hanya merujuk pada tampilan default pada widget Scaffold, ada banyak custom bar yang bisa digunakan seperti TabBar yang dapat digunakan untuk menambahkan menu menu seperti tab di bagian menu bar.

Sekaligus tombol tombol yang ada nantinya bisa untuk membuka halaman halaman lainnya yang ada pada aplikasi Anda. Itulah penjelasan tentang bagaimana penggunaan AppBar Class dalam membuat sebuah menu bar di aplikasi dengan mudah, sekaligus penerapan dan fungsi property yang bisa Anda inputkan untuk mempercantik tampilannya.

Default image
Omadi Jaya
Fullstack developer, Software Engineer @ Depok, Indonesia

Leave a Reply