Selamat pagi!
Dalam Flutter, AppBar() dijelaskan sebagai :
AppBar merupakan komponen paling atas dari aplikasi (atau terkadang paling bawah), ini berisi bilah alat dan beberapa tombol tindakan umum lainnya. Karena semua komponen dalam aplikasi flutter adalah widget atau kombinasi dari widget. Jadi AppBar juga merupakan kelas atau widget bawaan dalam flutter yang memberikan fungsionalitas. Widget AppBar didasarkan pada Desain Material dan sebagian besar informasi sudah disediakan oleh kelas lain seperti MediaQuery, Scaffold tentang di mana konten AppBar harus ditempatkan. Meskipun kelas AppBar sangat fleksibel dan dapat dengan mudah dikustomisasi, kita juga dapat menggunakan widget SilverAppBar yang memberikan fungsionalitas yang dapat digulir ke bilah aplikasi. Atau kita dapat membuat bilah aplikasi kustom kita sendiri dari awal.
Dilansir dari web GeeksforGeeks AppBar() terlihat seperti gambar dibawah ini :
Area yang berwarna biru itulah yang dinamakan dengan AppBar(), bisa juga dengan tampilan lain. Contohnya kita desain AppBar() seperti :
import 'package:flutter/material.dart';
void main() {
runApp(gfgApp());
}
MaterialApp gfgApp() {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('GeeksforGeeks'),
),
body: const Center(
child: Text(
'GeeksforGeeks',
style: TextStyle(fontSize: 24),
),
),
),
debugShowCheckedModeBanner: false,
);
}
Hasil dari source code diatas adalah tampilan seperti di gambar yang gambar area biru di atas. Terlihat mudah bukan, cukup dengan mengetikkan perintah :
appBar: AppBar(
title: const Text('GeeksforGeeks'),
),
Properti-properti yang digunakan dalam AppBar() adalah :
AppBar(
{Key key,
Widget leading,
bool automaticallyImplyLeading: true,
Widget title,
List<Widget> actions,
double elevation,
Color shadowColor,
ShapeBorder shape,
Color backgroundColor,
Brightness brightness,
IconThemeData iconTheme,
IconThemeData actionsIconTheme,
TextTheme textTheme,
...}
)
Nah, yang biasanya atau dasar AppBar() yang digunakan adalah :
- actions: properti ini mengambil daftar widget sebagai parameter yang akan ditampilkan setelah judul jika AppBar adalah baris.
- title: properti ini biasanya menggunakan widget utama sebagai parameter untuk ditampilkan di AppBar. Dan merupakan sebuah teks yang akan ditampilkan.
- backgroundColor: properti ini digunakan untuk menambahkan warna ke latar belakang Appbar.
- elevasi: Properti ini digunakan untuk menyetel koordinat-z untuk menempatkan bilah aplikasi ini relatif terhadap induknya. Lebih tepat kita membuat widget seperti terlihat mengambang.
- shape: properti ini digunakan untuk memberi bentuk pada Appbar dan mengatur bayangannya.
Berikut contoh lain dalam membuat AppBar() yang dilengkapi dengan beberapa properti yang sering digunakan dalam pengembangan aplikasi :
import "package:flutter/material.dart";
import 'package:flutter/services.dart';
void main() {
runApp(gfgApp());
}
MaterialApp gfgApp() {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("GeeksforGeeks"),
actions: <Widget>[
IconButton(
icon: const Icon(Icons.comment),
tooltip: 'Comment Icon',
onPressed: () {},
),
IconButton(
icon: const Icon(Icons.settings),
tooltip: 'Setting Icon',
onPressed: () {},
),
],
backgroundColor: Colors.greenAccent[400],
elevation: 50.0,
leading: IconButton(
icon: const Icon(Icons.menu),
tooltip: 'Menu Icon',
onPressed: () {},
),
systemOverlayStyle: SystemUiOverlayStyle.light,
),
body: const Center(
child: Text(
"Geeksforgeeks",
style: TextStyle(fontSize: 24),
),
),
),
debugShowCheckedModeBanner: false,
);
}
Hasil dari source code diatas keterangannya adalah :
- title : akan menghasilkan sebuah teks yang ditampilkan.
- leading : merupakan ikon yang akan ditampilkan di sebelah kiri teks dari title.
- action : merupakan ikon yang akan ditampilkan di sebelah kanan teks dari title. Dan di dalamnya ikon akan ditata secara default berbaris kiri - kanan.
Dan akan menghasilkan tampilan seperti :
Nah, sampai sini cukup sekian. Ada pertanyaan silahkan berikan komentar atau saran...
#WajibNgulik 💻
Tags:
Flutter