Flutter: Application Bar (Apps Bar)

Aplikasi (mobile) tanpa application bar terasa hambar 😄, kayak ada yang kurang gitu. Temen-temen udah tau kan apa itu application bar? Application bar adalah bagian paling atas dari aplikasi mobile yang biasanya memuat judu (title), navigasi drawer, action button, pencarian dan sejenisnya.

Untuk contoh kasusnya, kita pakai project sebelumnya aja yah. Lanjut dari step menambahkan icon.

Kita sudah punya initial widget bernama PageHello dan sudah memiliki body tapi belum memiliki AppBar.

Jadi dengan code berikut kita coba tambahkan sebuah appbar yang memuat sebuah icon, Rani coba pakai yang icon home_filled.

class PageHello extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return new Scaffold(

      appBar: new AppBar(

        leading: new Icon(Icons.home_filled),

      ),

      body: new Center(

          child: new Container(

        color: Colors.yellowAccent,

        width: 300.0,

        height: 150.0,

        child: new Center(

            child: new Icon(

          Icons.access_alarms,

          color: Colors.purple,

          size: 50,

        )),

      )),

    );

  }

}

Mari save dan hot reload. Hasilnya sebagai berikut.

Kemudian kita tambahkan text judul dengan code pada appbar seperti berikut:

appBar: new AppBar(

        leading: new Icon(Icons.home_filled),

        title: new Text("Hello Apps"),

      ),

Hasilnya setelah hot reload seperti berikut:

Oke, satu lagi yang pengen Rani buat dengan appbar ini yaitu mengatur warnanya.

appBar: new AppBar(

        backgroundColor: Colors.purple[600],

        leading: new Icon(Icons.home_filled),

        title: new Text("Hello Apps"),

      ),

Pilihan warna bisa disertai dengan angka untuk tingkat cerah/gelap nya warna tersebut. Semakin besar semakin gelap. Dan dengan hover cursor mouse di atas nama warna pilihan warna akan muncul seperti pada gambar di bawah ini.

Setelah selesai kita save lagi untuk hot reload.