Flutter - Membuat Appbar

Publish : 31 Dec 2019

Futter

Programming Mobile App


Share this post :

fb-icon tw-icon pt-icon wa-icon


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 {
          @override
          Widgetbuild(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
 
 
 
 



Share this post :

fb-icon tw-icon pt-icon wa-icon