Pada artikel kali ini saya akan menjelaskan cara membuat Appbar (Aplikasi Bar) menggunakan Flutter. Disini saya sudah membuat sebuah project Flutter yang baru, dan membuat sebuah class baru bernama HalamanHome sebagai halaman utamanya.
import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidgetbuild(BuildContext context) {return MaterialApp( title: 'App Bar', debugShowCheckedModeBanner: false, theme: ThemeData( primarySwatch: Colors.blue, ), home: HalamanHome(), ); }}class HalamanHome extends StatelessWidget { @override Widgetbuild(BuildContext context) { return Scaffold();}}
Pada MaterialApp saya tambahkan properti debugShowCheckedModeBanner untuk menghilangkan pita merah dikanan atas layar. Untuk class HalamanHome saya gunakan StatelessWidget.
debugShowCheckedModeBanner: false, Untuk membuat Appbar, pada Scaffold tambahkan properti appBar :
...return Scaffold( appBar: AppBar(),);...Ketika di jalankan akan tampil seperti berikut :
Tambahkan beberapa properti AppBar seperti berikut :
...appBar: AppBar( leading: Icon(Icons.home), title: Text('Hallo Appbar'), actions: <Widget>[ Icon(Icons.search), ], elevation: 0, backgroundColor: Colors.red, centerTitle: true,)...Penjelasan:
Appbar terbagi menjadi 3 bagian, leading (bagian kiri), title (tengah) dan action (bagian kanan).
elevation adalah bayangan dibawah Appbar, nilai default-nya adalah 4, disini saya mengganti dengan 0 untuk menghilangkan bayangannya.
backgroundColor, mengganti warna Appbar.
centerTitle, membuat judul Appbar berada ditengah.
Untuk membuat agar icon search tidak terlalu kesamping dapat ditambahkan Widget Padding untuk memberi jarak disebelah kanan icon.
...actions: <Widget>[ Padding( padding: const EdgeInsets.only(right:12.0), child: Icon(Icons.search), ),],...
Sampai disini kita sudah berhasil membuat AppBar pada Flutter.
Lihat juga: Video Flutter - Membuat Application Bar
