Cara Membuat AppBar Layout Aplikasi Android Menggunakan Dart Flutter

AppBar atau Toolbar adalah sangat penting sekali dalam mengembangkan sebuah aplikasi mobile, AppBar digunakan untuk menampilkan sebuah aplikasi Judul, Menu Ikon, MenuOverflow, Menu Navigasi. dll. Untuk membuat AppBar menggunakan Flutter sangat mudah, karena Flutter menyediakan widget siap pakai yang dapat langsung kita gunakan.

AppBar didalam Flutter mempuyai konsep Material Design yang modern, dan dapat kita custom dengan mudah. Pada tutorial ini kita akan belajar, cara membuat AppBar, mengubah warna background, menambahkan menu bar, menambahkan Title/Judul dan memberikan fungsi atau action saat salah satu menu bar di klik.

Untuk mengerjakan project berikut ini, kita akan menggunakan Software yaitu Editor Visual Studio Code, supaya lebih ringan dan mudah digunakan. Ok langsung saja mari kita simak tutorial berikut ini.

Belajar Cara Membuat AppBar Aplikasi Android Menggunakan Dart Flutter

1) Buka Aplikasi Visual Studio Code kalian, buat project baru, berinama project tersebut, lalu simpan pada lokasi yang diinginkan.

2) Pertama kita akan membuat contoh program sederhana menampilkan AppBar pada Aplikasi, sebagai tambahannya kita tambahkan widget Text di bagian tengah layout.

Untuk membuat appBar, kita harus menambahkannya didalam widget Scaffold, pada contoh program tersebut kita nya menambahkan Title/Judul pada AppBar tersebut, Secara defautl warna background pada AppBar berwarna biru muda. Hasilnya akan seperti berikut ini.

Agar title/judul berada ditengah, kalian dapat menambahkan widget Center dan memasukan widget Text sebagai anaknya.

appBar: new AppBar(
//Menembahkan Title/Judul
title: new Text('Belajar Flutter'),
),

3) Selanjutnya Coba kamu mengubah warna background pada AppBar tersebut serta menambakan iconButton untuk menu barnya. Didalam Futter sudah menyediakan Icon siap pakai yang dapat kita custom dengan mudah.

//Import Package yang diperlukan
import 'package:flutter/material.dart';

//Method utama untuk menjalankan program
void main() => runApp(new MainActivity());

//Class utama
class MainActivity extends StatelessWidget {
@override
Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Belajar Flutter',
      home: new Scaffold(
        //Membuat Widget AppBar
        appBar: new AppBar(
          //Menambahkan TitleBar
          title: new Text('Belajar Flutter'),
          //Mengubah Warna Background
          backgroundColor: Colors.red[900],
          //Menambahkan Leading menu
          leading: new IconButton(icon: new Icon(Icons.home, color: Colors.white)),
          //Menambahkan Beberapa Action Button
          actions: [
            new IconButton(icon: new Icon(Icons.call, color: Colors.white)),
            new IconButton(icon: new Icon(Icons.search, color: Colors.white)),
          ],
        ),

        body: new Center(
          child: new Text('Belajar Membuat AppBar'),
        ),
      ),
    );
}
}

contoh program tersebut, kita mengubah sebuah warna backroundnya menjadi merah, lalu kita menambahkan leading menu, leading adalah menu yang ditampilkan pada bagian kiri AppBar, yang biasanya digunkan untuk menu Home atau Navigasi. Setelah itu kita tambahkan 2 buah iconButton untuk menu barnya, yaitu menu Call dan Search.

4) lalu kita tambahkan aksi saat salah satu menu pada AppBar tersebut diklik maka akan muncul pesan singkat dengan menggunakan Toast, untuk menampilka Toast, pada Futter kita perlu menambahkan Librarynya, Caranya buka file pubspec.yml, lalu tambahkan librarynya pada dependencies, lalu simpan/klik Get Package.

Cara Membuat AppBar Layout Aplikasi Android Menggunakan Dart Flutter

5) Buka kembali file main.dart, pertama kita lakukan import terlebih dahulu, package/library dari FlutterToast, lalu di tambahkan fungsi onPressed pada masing-masing iconButton, untuk menangani kejadian saat diklik serta menampilkan pesan singkat pada Toast.

//Import Package yang diperlukan
import 'package:flutter/material.dart';
//Import Package/Library Toast
import 'package:flutter_toast/flutter_toast.dart';

//Method utama untuk menjalankan program
void main() => runApp(new MainActivity());

//Class utama
class MainActivity extends StatelessWidget {
@override
Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Belajar Flutter',
      home: new Scaffold(
        //Membuat Widget AppBar
        appBar: new AppBar(
          //Menambahkan TitleBar
          title: new Text('Belajar Flutter'),
          //Mengubah Warna Background
          backgroundColor: Colors.red[900],
          //Menambahkan Leading menu dan Event/Action
          leading: new IconButton(
            icon: new Icon(Icons.home, color: Colors.white),
            //Menangani kejadian saat menu home diklik
            onPressed: () {
              FlutterToast.showToast("Menu Home");
            },
          ),
          //Menambahkan Beberapa Action Button dan Event/Action
          actions: [
            new IconButton(
              icon: new Icon(Icons.call, color: Colors.white),
              //Menangani kejadian saat menu Call diklik
              onPressed: () {
                FlutterToast.showToast("Panggilan Telepon");
              },
            ),
            new IconButton(
              icon: new Icon(Icons.search, color: Colors.white),
              //Menangani kejadian saat menu search diklik
              onPressed: () {
                FlutterToast.showToast("Cari Sesuatu");
              },
            ),
          ],
        ),

        body: new Center(
          child: new Text('Belajar Membuat AppBar'),
        ),
      ),
    );
}
}