Part 4

Pemrograman Mobile

AppBar, Menu Navigasi

Rizki Muliono, [Link], [Link]
AppBar Wiget
• The AppBar displays the toolbar widgets, leading, title, and actions,
above the bottom(if any). The bottom is usually used for a TabBar.
leading: a widget to display before the title. If this is null
and automaticallyImplyLeading is set to true, the AppBar
will imply an appropriate widget.

title: the primary widget displayed in the AppBar.

Typically a Text widget containing a description of the
current contents of the app.

actions: widgets to display after the title widget.

Typically these widgets are IconButtons representing
common operations. For less common operations,
consider using a PopupMenuButton as the last actions.
AppBar Material Design
• AppBar terdiri dari bilah alat dan kemungkinan widget lainnya, seperti TabBar dan
FlexibleSpaceBar. AppBar biasanya mengekspos satu atau lebih tindakan umum
dengan IconButtons yang secara opsional diikuti oleh PopupMenuButton untuk
operasi yang kurang umum (kadang-kadang disebut "menu melimpah").
• AppBar biasanya digunakan di properti [Link], yang menempatkan AppBar
sebagai widget dengan ketinggian tetap di bagian atas layar. Untuk AppBar yang
dapat digulir, lihat SliverAppBar, yang menyematkan AppBar di sliver untuk digunakan
di CustomScrollView.
• Saat tidak digunakan sebagai [Link], atau saat dibungkus dengan Hero
Wiget, letakkan AppBar di MediaQuery untuk menangani bantalan di sekitar konten
AppBar jika diperlukan, karena bantalan tidak akan ditangani oleh Scaffold.
• AppBar menampilkan widget bilah alat, pengarah, judul, dan tindakan, di atas bagian
bawah (jika ada). Bagian bawah biasanya digunakan untuk TabBar. Jika widget
flexibleSpace ditentukan, maka widget itu ditumpuk di belakang toolbar dan widget
bawah. Diagram berikut menunjukkan di mana masing-masing slot ini muncul di bilah
alat ketika bahasa tulisan dibiarkan dari kiri ke kanan
1. import 'package:flutter/[Link]’; 32. IconButton(
2. 33. icon: Icon([Link]),
3. class BasicAppbar extends StatelessWidget {
34. onPressed: () {
4. @override 35. print('Click start');
5. Widget build(BuildContext context) {
36. },
6. return MaterialApp( 37. ),
7. home: Scaffold( 38. ],
8. appBar: AppBar(
39.
9. // backgroundColor: [Link], 40. ),
10. leading: Padding(
41. body: Container(
11. padding: [Link](left: 12), 42. decoration: BoxDecoration(color: [Link]),
12. child: IconButton( 43. ),
13. icon: Icon([Link]),
44. ),
14. onPressed: () { 45. );
15. print('Click leading');
46. }
16. }, 47. }
17. ),
18. ),
19. title: Row(
20. mainAxisAlignment: [Link],
21. children:<Widget>[
22. Text('Basic AppBar'),
23. ]
24. ),
25. actions: <Widget>[
26. IconButton(
27. icon: Icon([Link]),
28. onPressed: () {
29. print('Click search');
30. },
31. ),
Component AppBar
Jika widget Leading dihilangkan, tetapi
AppBar ada dalam Scaffold dengan
Drawer, maka sebuah tombol akan
dimasukkan untuk membuka drawer. Jika
tidak, jika Navigator terdekat memiliki rute
sebelumnya, BackButton akan dimasukkan.
Perilaku ini dapat nonaktifkan dengan
mengatur properti
automaticallyImplyLeading ke false. Dalam
hal ini, sebuah widget nol Leading akan
menghasilkan widget widget tengah / judul
yang akan dimulai.
Constructors pada AppBar()
AppBar({
Key key,
Widget leading,
bool automaticallyImplyLeading: true,
Widget title,
List<Widget> actions,
Widget flexibleSpace,
PreferredSizeWidget bottom,
double elevation,
ShapeBorder shape,
Color backgroundColor,
Brightness brightness,
IconThemeData iconTheme,
IconThemeData actionsIconTheme,
TextTheme textTheme,
bool primary: true,
bool centerTitle,
bool excludeHeaderSemantics: false,
double titleSpacing: [Link],
double toolbarOpacity: 1.0,
double bottomOpacity: 1.0
})
Properti pad AppBar()
actions ! List<Widget>
Widgets to display in a row after the title widget.
final
actionsIconTheme ! IconThemeData
The color, opacity, and size to use for the icons that appear in the app bar's actions. This should only be used when the
actions should be themed differently than the icon that appears in the app bar's leading widget.
final
automaticallyImplyLeading ! bool
Controls whether we should try to imply the leading widget if null.
final
backgroundColor ! Color
The color to use for the app bar's material. Typically this should be set along with brightness, iconTheme, textTheme.
final
bottom ! PreferredSizeWidget
This widget appears across the bottom of the app bar.
final
bottomOpacity ! double
How opaque the bottom part of the app bar is.
final
brightness ! Brightness
The brightness of the app bar's material. Typically this is set along with backgroundColor, iconTheme, textTheme.
final
centerTitle ! bool
Whether the title should be centered.
final
elevation ! double
The z-coordinate at which to place this app bar relative to its parent.
final
excludeHeaderSemantics ! bool
Whether the title should be wrapped with header Semantics.
final
flexibleSpace ! Widget
This widget is stacked behind the toolbar and the tab bar. It's height will be the same as the app bar's overall height.
final
iconTheme ! IconThemeData
The color, opacity, and size to use for app bar icons. Typically this is set along with backgroundColor, brightness,
textTheme.
final
leading ! Widget
A widget to display before the title.
final
preferredSize ! Size
A size whose height is the sum of kToolbarHeight and the bottom widget's preferred height.
final
primary ! bool
Whether this app bar is being displayed at the top of the screen.
final
shape ! ShapeBorder
The material's shape as well its shadow.
final
textTheme ! TextTheme
The typographic styles to use for text in the app bar. Typically this is set along with brightness backgroundColor, iconTheme.
final
title ! Widget
The primary widget displayed in the app bar.
final
titleSpacing ! double
The spacing around title content on the horizontal axis. This spacing is applied even if there is no leading content or
actions. If you want title to take all the space available, set this value to 0.0.
final
toolbarOpacity ! double
How opaque the toolbar part of the app bar is.
final
AppBar(
title: Text("Hello Appbar"),
)

Jika ingin menghilangkan back button maka set property dengen

automaticallyImplyLeading : false

Create menu/leading button. AppBar(

title: Text("Hello Appbar"),
Flutter memungkinkan Anda membuat leading: GestureDetector(
menu atau tombol utama di Appbar. onTap: () { /* kode fungsi aksi disini */ },
Biasanya kita membuat tombol menu child: Icon(
secara manual di android tetapi dalam [Link], //add custom icons
flutter kita membuat menu atau tombol ),
utama menggunakan properti Appbar ),
tunggal. Cukup tambahkan kode di )
bawah ini di widget Appbar Anda untuk
membuat tombol utama penyesuaian.
Itu terletak di sisi kiri Appbar.
Working with Appbar actions.

Dalam bergetar tindakan 1. AppBar(

2. title: Text("Hello Appbar"),
adalah widget yang melakukan 3. leading: GestureDetector(
tindakan di Appbar seperti 4. onTap: () { /* kode fungsi aksei */ },
5. child: Icon(
pengaturan, lebih, dll. Jadi, 6. [Link], // add custom icons
7. ),
Untuk membuat tindakan di 8. ),
Appbar tambahkan properti 9. actions: <Widget>[
10. Padding(
tindakan di widget Appbar. 11. padding: [Link](right: 20.0),
12. child: GestureDetector(
Berikut adalah kode untuk 13. onTap: () {},
tindakan. 14. child: Icon(
15. [Link],
16. size: 26.0,
17. ),
18. )
19. ),
20. Padding(
21. padding: [Link](right: 20.0),
22. child: GestureDetector(
23. onTap: () {},
24. child: Icon(
25. Icons.more_vert
26. ),
27. )
28. ),
29. ],
30. ),
Appbar actions icons theme.
Flutter menyediakan metode sederhana untuk mengelola dan menyesuaikan tema ikon tindakan. Cukup tambahkan properti
actionIconTheme di widget Appbar untuk mengubah warna, opacity, dan ukuran. Ini kodenya.

AppBar(
actionsIconTheme: IconThemeData(
size: 30.0,
color: [Link],
opacity: 10.0
),
),

Referensi gambar icon-icon properti Icons. Flutter bias di lihat lebih lengkap di :
[Link]
Leading
widget yang tampil dibagian sisi kiri menu sebelum title yang umumnya difungsikan untuk menambahkan tombol
navigasi drawer atau navigasi lainnya.

appBar: AppBar(
leading: Icon([Link]),

Leading pada AppBar bersifat opsional, sehingga sebuah Appbar tidak memiliki leading pun tidak akan menjadi
error. Dan apabila leading null maka widget yang berada disebelah kanannya (title widget) akan otomatis
memenuhi bagian dari leading section.
Title
merupakan widget utama pada sebuah AppBar. Biasanya akan diisi oleh Text widget atau gambar logo sebuah
aplikasi. Properti title pada AppBar seperti child pada single child widget jadi kita dapat memasukan widget-widget
lain sesuai kebutuhan. Meskipun title merupakan properti utama pada appBar namun sifatnya pun bersifat opsional.
Penggunaan title pada AppBar menggunakan Text widget

appBar: AppBar(
title: Text('Ini Title AppBar'),

Contoh title Appbar menggunakan Image

appBar: AppBar(
title: [Link]('[Link]
[Link]/images?q=tbn%3AANd9GcTybCniORbVSJJgv
qcMaMwxSY4IL6OHxKftgQ&usqp=CAU'),
Actions
Merupakan property yang berfungsi untuk menambahkan aksi berupa widget dibagian sisi kanan menu yang dapat
menampilkan multiple widget lainnya secara horizontal seperti column widget. Action ini biasanya digunakan untuk
menampilkan tombol menu yang sering digunakan seperti tombol search, profile dan popup menu.

AppBar(
leading: Icon([Link]),
title: Text('Page title'),
actions: [
Icon([Link]),
Padding(
padding: [Link](horizontal: 16),
child: Icon([Link]),
),
Icon(Icons.more_vert),
],
backgroundColor: [Link],
),
Contoh Membuat Ui AppBar pada Facebook

Pastikan kita sudah mempersiapkan icon assets facebook,

seperti logo dan icon search dan messager

Kemudian kita buat buat folder di dalam struktur projek

folderProjek/assets/images/facebook_icon.png
folderProjek/assets/images/ facebook_search.png
folderProjek/assets/images/facebook_msg.png

Lalu kita daftarkan di [Link]

 Kode Facebook AppBar()

1. import 'package:flutter/[Link]';
2. class FacebookAppbar extends StatelessWidget {
3. @override
4. Widget build(BuildContext context) {
5. return MaterialApp(
6. home: Scaffold(
7. appBar: AppBar(
8. backgroundColor: [Link],
9. title: Row(
10. mainAxisAlignment: [Link],
11. children: <Widget>[
12. [Link](
13. 'assets/images/facebook_icon.png',
14. fit: [Link],
15. height: 35.0,
16. ),
17. ],
18. ),
19. actions: <Widget>[
20. IconButton(
21. padding: [Link](5.0),
22. icon: [Link]('assets/images/facebook_search.png'),
23. onPressed: () {
24. // Implement navigation to search page here...
25. print('Click Search');
26. },
27. ),
28. IconButton(
29. padding: [Link](5.0),
30. icon: [Link]('assets/images/facebook_msg.png'),
31. onPressed: () {
32. // Implement navigation to message page here...
33. print('Click Message');
34. },
35. ),
36. ],
37. ),
38. body: Container(
39. decoration: BoxDecoration(color: [Link]),
40. )));
41. }
42. }
Latihan !
Buatlah Youtube AppBar()
Reference
• [Link]
• [Link]
1aa04ebcf695
• [Link]
3a8abd9b982a
• [Link]
[Link]