Belajar Cara Membuat AppBar Menggunakan Flutter

Assalamualaikum Warahmatullahi Wabarakatuh.

AppBar atau Toolbar sangatlah penting dalam pengembangan aplikasi mobile, AppBar digunakan untuk menampilkan Judul aplikasi, Menu Icon, MenuOverflow, Menu Navigasi. dll. Untuk membuat AppBar menggunakan Flutter sangatlah mudah, karena Flutter menyediakan widget siap pakai yang langsung dapat 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.

Materi yang harus kalian pelajari sebelumnya:

• Belajar Cara Menginstall Flutter pada Windows
• Belajar Cara Membuat Program Sederhana dengan Flutter

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

Belajar Cara Membuat AppBar Menggunakan 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.

//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(
          //Menembahkan Title/Judul
          title: new Text('Belajar Flutter'),
        ),

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

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 seperti berikut ini.

Demo:

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 kita akan coba 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: <Widget>[
            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'),
        ),
      ),
    );
  }
}

Pada contoh program tersebut, kita mengubah warna backroundnya menjadi merah, lalu kita menambahkan leading menu, leading adalah menu yang tampil 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.

Demo:

4) Terakhir 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, seperti gambar berikut ini.

5) Buka kembali file main.dart, pertama kita import terlebih dahulu, package/library dari FlutterToast, lalu kita 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: <Widget>[
            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'),
        ),
      ),
    );
  }
}

Demo:

Terimakasih atas kunjungannya, semoga tutorial yang saya berikan bisa bermanfaat untuk kalian semua, selebihnya, mohon maaf bila ada kesalahan.

Wassalamualaikum Warahmatullahi Wabarakatuh.

Berbagi :