AppBar adalah elemen penting dalam sebuah aplikasi Flutter. Ini adalah bagian atas layar yang berisi judul, ikon, dan tombol yang memberikan navigasi atau fungsi lainnya kepada pengguna. Membuat AppBar yang baik akan meningkatkan tampilan visual dan kegunaan aplikasi Anda.
Langkah pertama adalah menambahkan AppBar ke dalam widget tree aplikasi Anda. Anda dapat melakukannya dengan menambahkan widget AppBar di dalam widget Scaffold. Ini akan menempatkan AppBar di bagian atas layar aplikasi.
Anda dapat menentukan latar belakang AppBar dan warna teks yang sesuai dengan gaya desain aplikasi Anda. Gunakan properti backgroundColor untuk mengatur warna latar belakang dan properti textColor untuk mengatur warna teks.
Jika Anda ingin menyediakan navigasi mundur, Anda dapat menambahkan tombol kembali ke AppBar. Gunakan widget IconButton dengan ikon panah ke kiri untuk melakukan fungsi ini.
Tombol pada AppBar dapat memiliki tindakan tertentu. Misalnya, Anda dapat menghubungkannya dengan navigasi ke layar lain atau menjalankan fungsi khusus. Gunakan properti onPressed pada widget IconButton atau tombol lainnya.
Jika Anda ingin membuat AppBar transparan, Anda dapat mengatur warna latar belakang menjadi transparan atau memberikan nilai alpha pada warnanya.
Source Code AppBar pada Flutter
Buat project dengan nama flutter_application_1 lalu copy source code berikut ini pada file lib/main.dart:
import 'package:flutter/material.dart';
import 'package:flutter_application_1/home.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Home()
);
}
}Buat file baru pada folder lib yang bernama home.dart lalu copy source code berikut ini:
import 'package:flutter/material.dart';
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: Icon(Icons.menu),
title: Text('KaptenTekno'),
centerTitle: true,
titleSpacing: 0,
actions: const [
Icon(Icons.notifications),
Icon(Icons.settings)
],
backgroundColor: Colors.amber,
)
);
}
}Keterangan Source Code
import 'package:flutter/material.dart';Perintah untuk mengimpor package flutter/material.dart pada program Flutter. Package flutter/material.dart adalah salah satu package inti pada Flutter yang menyediakan widget-widget dasar dan komponen desain material (material design) yang umum digunakan dalam membangun aplikasi Flutter.
import 'package:flutter_application_1/home.dart';Perintah untuk mengimpor file home.dart dari package flutter_application_1 pada program Flutter. Package flutter_application_1 adalah package yang dibuat oleh pengembang, dan home.dart adalah salah satu file di dalam package tersebut yang berisi implementasi dari halaman utama (home page) dalam aplikasi.
void main() {
runApp(MyApp());
}Bagian main yang menjadi fungsi utama pada aplikasi, dimana fungsi main iniakan dijalankan pertama kali saat aplikasi dibuka.
class MyApp extends StatelessWidget{}Widget yang bertipe stateless dari class bernama MyApp, dimana di dalam widget ini kita dapat membuat tampilan dari program seperti teks,colom, baris, gambar dan lain-lain. Didalam sebuah widget dapat berisi widget lagi, jadi dalam sebuah tampilan aplikasi flutter dapat terdiri dari kumpulan beberapa widget.
@overrideOverride berarti sebuah decorator (atau anotasi) yang digunakan untuk menandai bahwa method yang ditulis di bawah decorator tersebut akan meng-override (menggantikan) method yang ada di superclass atau interface yang diimplementasikan.
Widget build(BuildContext context)Method yang harus diimplementasikan pada setiap class widget di Flutter. Method ini bertanggung jawab untuk menghasilkan tampilan (atau widget) dari class widget tersebut.
Pada Flutter, setiap widget memiliki method build yang diimplementasikan untuk menghasilkan tampilan widget. Method build menerima satu parameter BuildContext, yang digunakan untuk memberikan informasi konteks terkait dengan widget.
return MaterialApp()Digunakan untuk mengembalikan sebuah widget MaterialApp yang telah dikonfigurasi sesuai dengan kebutuhan aplikasi. Sebuah widget pada flutter yang menyediakan fitur untuk membuat aplikasi material design.
MaterialApp biasanya digunakan sebagai parent widget utama di dalam aplikasi flutter, artinya hampir semua widget lain pada aplikasi flutter akan diletakkan di dalam MaterialApp.
debugShowCheckedModeBanner: falseUntuk menghilangkan atau menghapus banner debug di setiap halaman aplikasi.
home: Home()home adalah properti dari MyApp yang akan menjadi default route aplikasi, dimana tujuan dari route nya adalah Home().
class Home extends StatelessWidget {}Widget yang bertipe stateless dari class bernama Home, dimana di dalam widget ini kita dapat membuat tampilan dari program seperti teks, colom, baris, gambar dan lain-lain.
return Scaffold()Statement yang mengembalikan sebuah widget Scaffold pada aplikasi Flutter. Scaffold adalah salah satu widget dasar pada Flutter yang digunakan untuk membangun struktur halaman (page) pada aplikasi.
Widget ini menyediakan tampilan yang sudah diatur secara default seperti AppBar, Drawer, BottomNavigationBar dan lain sebagainya.
appBar: AppBar()Properti dari widget Scaffold pada Flutter yang digunakan untuk menambahkan sebuah AppBar pada halaman (page) aplikasi.
Properti appBar membutuhkan sebuah widget AppBar sebagai nilai (value) yang akan ditampilkan pada halaman aplikasi. Widget AppBar digunakan untuk menampilkan judul halaman dan tombol-tombol aksi pada bagian atas halaman.
leading: Icon(Icons.menu)Properti dari widget AppBar pada Flutter yang digunakan untuk menambahkan sebuah widget Icon pada bagian kiri AppBar.
title: Text('KaptenTekno')Title adalah properti pada widget AppBar yang digunakan untuk menambahkan sebuah widget Text pada bagian tengah AppBar.
centerTitle: trueProperti pada widget AppBar pada Flutter yang digunakan untuk membuat judul AppBar berada di tengah.
titleSpacing: 0Properti pada AppBar di Flutter yang menentukan jarak antara judul (title) dengan elemen-elemen lain pada AppBar.
actions: const [
Icon(Icons.notifications),
Icon(Icons.settings)
]Properti pada widget AppBar pada Flutter yang digunakan untuk menambahkan aksi-aksi pada bagian kanan AppBar. Aksi yang ditambahkan adalah sebuah gambar button atau icons notifications dan icons settings.
backgroundColor: Colors.amberProperti pada widget AppBar pada Flutter yang digunakan untuk mengatur warna latar belakang AppBar.
Dengan mengikuti langkah-langkah di atas, Anda sekarang memiliki pengetahuan yang diperlukan untuk membuat AppBar yang menarik dan fungsional dalam aplikasi Flutter Anda.
Ingatlah untuk selalu mengintegrasikan AppBar dengan desain keseluruhan aplikasi Anda untuk menciptakan pengalaman pengguna yang harmonis dan menyenangkan.
Coding