[Flutter][42] AppBar Flutter (part 1)

Hello, this is my website. Find all information about website design, website programming, HTML, CSS, Javascript, Jquery, Angular, Flutter, Plugin, Mockup, Mysql, Database, etc.

Tips & Trick



Card image cap
Wednesday, 23 Oct 2019

Hello world,

AppBar atau Application Bar atau ActionBar adalah salah satu bagian dari aplikasi mobile yang digunakan untuk menampilkan beberapa navigasi dari aplikasi. Posisi AppBar berada pada bagian atas aplikasi. AppBar biasanya berisi title (judul), action button, navigasi drawer, form pencarian dan lain-lain. Pada pembahasan kali ini saya akan coba menulis sedikit tentang AppBar pada Flutter, beberapa fungsi sederhananya dan cara penggunaanya.
contoh sederhananya sebagai berikut:

import 'package:flutter/material.dart';

class Contohappbar extends StatefulWidget {
@override
_ContohappbarState createState() => _ContohappbarState();
}

class _ContohappbarState extends State<Contohappbar> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Ini AppBar"),
),
body: Center(
child: Text("ini body"),
),
);
}
}

hasilnya menjadi seperti berikut:


Selain title, kita juga dapat menambahkan beberapa bagian seperti contohnya sebagai berikut.

Action Button

Action Button biasanya digunakan untuk membuat tombol di sudut kanan appbar.

import 'package:flutter/material.dart';

class Contohappbar extends StatefulWidget {
@override
_ContohappbarState createState() => _ContohappbarState();
}

class _ContohappbarState extends State<Contohappbar> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Ini AppBar"),
actions: <Widget>[
// action button
IconButton(
icon: Icon(Icons.add_circle),
onPressed: () {
//action
},
),
// action button
IconButton(
icon: Icon(Icons.add_location),
onPressed: () {
//action
},
),
]

),
body: Center(
child: Text("ini body"),
),
);
}
}

hasilnya seperti berikut.



Leading

leading berfungsi untuk menambahkan action/button/icon pada sudut kiri appbar.

import 'package:flutter/material.dart';

class Contohappbar extends StatefulWidget {
@override
_ContohappbarState createState() => _ContohappbarState();
}

class _ContohappbarState extends State<Contohappbar> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: IconButton(
icon: Icon(Icons.supervised_user_circle),
onPressed: (){},
),

title: Text("Ini AppBar"),
actions: <Widget>[
// action button
IconButton(
icon: Icon(Icons.add_circle),
onPressed: () {
//action
},
),
// action button
IconButton(
icon: Icon(Icons.add_location),
onPressed: () {
//action
},
),
]
),
body: Center(
child: Text("ini body"),
),
);
}
}

hasilnya menjadi seperti berikut.



Mengganti warna appbar

untuk mengganti warna background appbar kita bisa menggunakan cara berikut. tambahkan kode berikut pada appbar.

backgroundColor: Colors.green,


Menghilangkan shadow pada appbar

untuk menghilangkan shadow kita bisa menggunakan kode berikut.

elevation: 0.0,


Mengganti warna icon pada appbar

untuk mengganti warna icon pada appbar kita bisa menggunakan kode berikut.

iconTheme: IconThemeData(
color: Colors.lightBlue, //change your color here
),


Full Code

import 'package:flutter/material.dart';

class Contohappbar extends StatefulWidget {
@override
_ContohappbarState createState() => _ContohappbarState();
}

class _ContohappbarState extends State<Contohappbar> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.green,
elevation: 0.0,
iconTheme: IconThemeData(
color: Colors.lightBlue, //change your color here
),
leading: IconButton(
icon: Icon(Icons.supervised_user_circle),
onPressed: (){},
),
title: Text("Ini AppBar"),
actions: <Widget>[
// action button
IconButton(
icon: Icon(Icons.add_circle),
onPressed: () {
//action
},
),
// action button
IconButton(
icon: Icon(Icons.add_location),
onPressed: () {
//action
},
),
]
),
body: Center(
child: Text("ini body"),
),
);
}
}


Mungkin sekian dulu untuk pembahasan kali ini. selebihnya akan dibahas di part selanjutnya.

Selamat mencoba :)