Tips Code

Hello People With The Spirit Of Learning! Di artikel kali ini kita akan membahas apa saja sih Extensions yang harus diketahui para laravel developer terutama yang menggunakan Visual Studio Code (VsCode). Laravel Artisan Laravel artisan dibuat oleh Ryan Naddy, Extensions ini memudahkan bagi kita dalam pengembangan project laravel yang sering menggunakan perintah artisan. Manfaat dari Extension ini yaitu kita cukup menggunakan Shortcut di vscode yaitu ctrl+shift+p lalu ketikan perintah artisan yang kalian inginkan. Laravel Extra Intellisense Laravel Extra Intellinsense dibuat oleh amir, Extensions extra dari Autocomplete laravel sehingga memaksimalkan kita dalam membuat code agar lebih cepat di project file Laravel kita. Laravel Blade Snippets Laravel Blade Snippets dibuat oleh Winnie Lin, Extensions ini membantu kita blade templating di file blade. Dengan Extensions ini tentu akan mempercepat kita dalam menulis code syntax blade. Nah ketika kalian sudah menginstall beberapa Extensions tersebut dapat kalian rasakan bukan bagaimana dapat membantu mempercepat pembuatan project laravel kita. Mungkin cukup sekian pembahasan tentang Rekomendasi Extensions VsCode Laravel Developer. Semoga Membantu dan Bermanfaat. Perfect Place to Begin Your Career Development. BuildWith Angga

Hello People With The Spirit Of Learning! Dalam konsep MVC terdapat Model yang berguna sebagai penghubung antara data ke database. Model sendiri dapat diartikan sebagai class dari sekumpulan data misalnya model User memiliki nama dan id user. Di Laravel sendiri terdapat suatu class bernama Eloquent yang berguna sebagai pemanggil fungsi query ke dalam database atau yang biasa kita sebut CRUD, lalu fitur Model akan meng-extends class Model dari Illuminate\Database\Eloquent\Model, dalam hal ini akan dapat mempermudah kita tanpa harus melakukan query manual ke dalam database. Nah pembahasan kali ini kita akan belajar tentang bagaimana membuat Model di project laravel kita. Menyiapkan Database Model di laravel terdapat di dalam folder app/Models namun kita juga bisa membuatnya di folder lain. Langkah pertama siapkan dulu database kita edit file .env Kita sesuaikan nama di mysql PhpMyAdmin. disini saya menggunakan laravel_model. Untuk tabel yang kita gunakan yaitu Mahasiswa, sebelum kita membuat tabel kita siapkan dulu Modelnya . Mendefinisakan Tabel dan Model Untuk membuat model kita gunakan perintah dari php artisan berikut perintanya : php artisan make:model Mahasiswa Setelah perintah dijalankan maka akan terdapat file dengan nama Mahasiswa.php didalam folder app/Models/. Jika kita ingin sekaligus membuat migration maka kita gunakan perintah berikut : php artisan make:model Mahasiswa -m //atau php artisan make:model Mahasiswa --migration jika kalian belum mengetahui tentang migration maka dapat melihat artikel berikut yang sudah kami bahas sebelumnya : https://buildwithangga.com/tips/migration-seeder-laravel Tabel mahasiswa akan kita isi dengan 2 field yaitu nama dan id_mahasiswa. jika sudah selesai maka jalankan perintah migration. Eloquent Model Dalam fungsi Eloquent terdapat beberapa hal yang dapat kita lakukan seperti menghubungkan model ke tabel atau menghubungkan field-field yang ada didalam tabel. Untuk lebih jelasnya mari kita simak pembahasan berikut Perintah $table digunakan untuk mengubah nama tabel sesuai yang kita inginkan, seperti yang kita tahu sebelumnya penamaan di file Model akan sedikit berbeda didalam file migration seperti Mahasiswa menjadi mahasiswas. Perintah $fillable digunakan jika kita ingin melakukan manipulasi data seperti create(), atau insert(), dengan perintah ini kita dapat memilih field mana saja yang akan kita manipulasi. Perintah $hidden biasanya jika kita ingin melakukan query seperti pemangilan data maka semua field akan ikut terpangil misalnya kita akan melakukan query seperti berikut : return Mahasiswa::first(); // { "id":1, "nama":"Dodi", "id_mahasiswa":"237129", "created_at":"2022-12-02T16:05:35.000000Z", "updated_at":"-000001-11-30T00:00:00.000000Z" } Terlihat bukan data seperti id atau created_at maupun updated_at juga ikut, jika kita ingin menghilangkan field tertentu agar lebih baik maka kita gunakan fungsi $hidden sehingga akan menjadi seperti berikut : return Mahasiswa::first(); // { "nama":"Dodi", "id_mahasiswa":"237129", } Cukup terlihat lebih baik dan rapi bukan, Laravel model Eloquent membantu kita dalam berbagai macam hal terkait query dengan kita mempelajari hal tersebut diharapkan dapat mempermudah dan mempercepat kita dalam pengerjaan project laravel. jika ingin mengetahui lebih detail terkait fitur-fitur lain dapat mengunjungi halaman berikut : https://laravel.com/docs/9.x/eloquent Cukup sekian tuturial kali ini terkait pembahasan tentang model di laravel. Semoga Membantu dan Bermanfaat. Perfect Place to Begin Your Career Development. BuildWith Angga

Hello People With The Spirit Of Learning! Dalam pengembangan website pasti kalian pernah mendengar istilah MVC (Model - View - Controller). Nah dalam pembahasan kali ini kita akan mempelajari tentang konsep MVC. Konsep ini merupakan arsitektur kode program dalam 3 bagian utama yaitu Model, View, Controller. Model sebagai penghubung data ke database.View sebagai User Interface.Controller sebagai logika alur program. Konsep arsitektur dapat dilihat pada gambar berikut : Proses awal user melakukan request dengan membuka web browser.Sesudah melakukan permintaan atau request ke alamat website tertentu maka akan diterima oleh controller dan diteruskan ke model untuk dilakukan pengecekan perlu pengambilan data atau tidak.Setelah data diperoleh maka model akan mengembalikan data yang diolah ke controller.Controller akan meneruskan data yang diterima ke dalam view agar dapat dilihat oleh user.Proses tersebut akan berulang ketika user mengunjungi halaman lainya. Konsep arsitektur MVC digunakan supaya aplikasi web yang dibuat bisa mudah dikelola dan dikembangkan, terutama untuk web aplikasi besar. Biasanya MVC digunakan dalam project Framework Laravel. Sampai disini saja pembahasan terkait MVC kali ini. Semoga Membantu dan Bermanfaat Perfect Place to Begin Your Career Development. BuildWith Angga

Redis merupakan penyimpanan open-source yang cukup populer. Redis hadir dengan kecepatan, fleksibilitas, dan penggunaanya di berbagai macam bahasa. Redis dikenal dengan pengambilan data cache dan penyimpanan data memori. Dalam tutorial kali ini kita akan membahas bagaimana instalasi Redis untuk Windows. 1) Menyiapkan Sistem Linux di Windows. Langkah pertama dalam penggunaan redis dapat berjalan di sistem Windows Subsystem for Linux (WSL2). Untuk mengaktifkan sistem WSL buka CMD (Command Prompt) atau PowerShell Run as Administrator. lalu jalankan perintah berikut : Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux Setelah menjalankan perintah tersebut, reboot atau restart komputer kita. 2) Mendownload Linux Langkah kedua, buka Microsoft Store dan cari distro linux yang kita inginkan. di tuturial ini kita akan menggunakan distro Ubuntu. Tunggu sampai proses Download selesai . Setelah itu buka ubuntu. Jika kalian baru pertama membuka silahkan untuk memasukan username dan password. Jika sudah maka tampilan akan seperti gambar diatas. 3) Menginstal Redis Server Langkah ketiga mendownload redis jalankan perintah berikut pada ubuntu: sudo apt-add-repository ppa:redislabs/redissudo apt-get updatesudo apt-get install redis-server Selanjutya kita coba jalankan redis server kita dengan perintah berikut : sudo service redis-server restart Nah kita sudah berhasil menginstal Redis di komputer Windows kita. Sampai disini tutorial instalasi Redis di Windows untuk informasi lebih lanjut tentang Redis dapat melihat link berikut : https://developer.redis.com/ Semoga Membantu dan Bermanfaat. Perfect Place To Begin Your Career Development. BuildWith Angga.

Hello people spirit of learning! Dalam setiap aplikasi yang kita pakai,kita sering melihat pertama kali kita membuka aplikasi kita diarahkan ke dalam halaman yang berisi logo saja dan beberapa detik kemudian, kita diarahkan ke dalam halaman Login page atau Onboarding page. Nah itu biasa disebut Splash Screen. Yang dimana halaman awal dibuka saat aplikasi dijalankan. Disini kita akan membuat Splash Screen sederhana. Pastikan sudah mengerti memasukkan assets ke dalam flutter. kalau belum bisa membaca dokumentasi disini. 1) Membuat 2 File class splash_screen extends StatefulWidget { @override _splash_screenState createState() => _splash_screenState(); } class _splash_screenState extends State { @override Widget build(BuildContext context) { return Scaffold() } } Langkah awal untuk membuat splash screen adalah kita membuat file untuk splash screen dan halaman yang akan kita tuju. Disini kita membuat blank screen saja untuk dituju. Pada halaman splash screen,kita menggunakan StatefulWidget karena widget yang akan kita gunakan bersifat dinamis dan terdapat sebuah perubahan. Teruntuk halaman blank screen, Berikut hasil gambar dan codenya. import 'package:flutter/material.dart'; import 'package:flutter/src/foundation/key.dart'; import 'package:flutter/src/widgets/framework.dart'; class blank_screen extends StatelessWidget { const blank_screen({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Color(0xff65005C), ); } } 2) Membuat Fungsi Durasi waktu delayScreen() async {var duration = Duration(seconds: 5);Timer(duration,() {Navigator.pushReplacement(context,MaterialPageRoute(builder: (context) => blank_screen(),));},); Pada class_splash_screenState tepat diatas @override Widget Build, kita membuat Function mengatur waktu dari splash screen ke halaman home. Disini untuk mengatur waktu nya, kita menggunakan widget Timer yang berisi 2 properti yaitu duration dan callback. properti duration yang bertipe widget Duration() berfungsi untuk mengatur waktu durasi yang kita inginkan. Sedangkan callback adalah fungsi yang akan dijalankan setelah Durasi(duration) waktunya telah habis. pada function callback, akan kita isi dengan widget Navigator yang mengarah ke blank_screen() atau mengarah ke halaman yang dituju. Tipe Navigator yang kita pakai adalah pushReplacement, yang bertujuan agar setelah pindah halaman maka tidak bisa balik lagi ke halaman splash Screen. 3) Panggil Fungsi Durasi Waktunya pada initState @overridevoid initState() {// TODO: implement initStatesuper.initState();delayScreen();} Fungsi dari initState() sendiri digunakan sebagai fungsi yang pertama kali dipanggil ketika aplikasi pertama kali dijalankan. 4) Membuat Tampilan Splash Screen import 'dart:async'; import 'package:flutter/material.dart'; import 'package:flutter/src/foundation/key.dart'; import 'package:flutter/src/widgets/framework.dart'; import 'package:tutorial_artikel/blank_screen.dart'; class splash_screen extends StatefulWidget { const splash_screen({Key? key}) : super(key: key); @override State createState() => _splash_screenState(); } class _splash_screenState extends State { delayScreen() async { var duration = Duration(seconds: 5); Timer( duration, () { Navigator.pushReplacement( context, MaterialPageRoute( builder: (context) => blank_screen(), )); }, ); } @override void initState() { // TODO: implement initState super.initState(); delayScreen(); } Widget build(BuildContext context) { return Scaffold( body: Center( child: Image.asset( 'assets/brand.png', width: 242, ), ), ); } } Disini kita membuat tampilan Splash Screen-nya. Pada Image.assets(). argumennya kita isi sesuai dengan apa yang sudah kalian masukkan assetsnya ke dalam flutter. Jadi jangan sampai salah ya nanti akan terjadi Logic Error. Setelah kita membuat tampilannya, Maka kita mulai debug. Dan hasilnya akan seperti ini Semoga bermanfaat dan Terima Kasih! Perfect Place To Begin Your Career Development BuildWith Angga.

Hello people spirit of learning! Kita pasti sering melihat aplikasi kita ada tombol navigasi yang berbentuk tanda 3 titik. Itu dinamakan Pop up menu. Pop up menu ini fungsinya mirip seperti Bottom navbar dan Appbar yaitu Membuat menu dan saat ditekan terjadi sebuah interaksi atau bisa juga berpindah halaman. Disini kita akan membuat Pop up menu sederhana. 1) Membuat Widget Scaffold Scaffold(appBar: AppBar(actions: []),) Langkah awal pastinya Menambahkan widget Scaffold terlebih dahulu. Setelah menambahkan widget scaffold. Didalamnya tambahkan properti appBar dan diisi dengan Widget Appbar. Setelah diisi dengan Widget AppBar, tambahkan properti actions didalamnya. 2) Menambahkan Widget PopUpMenu Scaffold( appBar: AppBar(actions: [ PopupMenuButton(itemBuilder: (context) => [ ],) ]), ) Langkah kedua menambahkan widget PopupMenuButton pada properti Actions. Pada widget PopupMenuButton terdapat properti yang harus kita isi Yaitu itemBuilder. Fungsi dari properti itemBuilder adalah menampilkan menu jika tombol Pop up nya ditekan. Properti ini berbentuk void function yang bertipe List, dan hanya bisa diisi dengan tipe class abstract PopUpMenuEntry. Untuk mengetahui isi fungsi class PopUpMenuEntry, bisa membaca dokumentasinya disini. 3) Menambahkan Widget PopupMenuItem Scaffold( appBar: AppBar(actions: [ PopupMenuButton( itemBuilder: (context) => [ PopupMenuItem(child: Text('Settings')), PopupMenuItem(child: Text('Options')), PopupMenuItem(child: Text('Logout')) ], ) ]), ) Langkah terakhir adalah menambahkan widget PopupMenuItem. widget ini berfungsi untuk menambahkan menu Pop up. Bebas kita bisa isi sesuai keinginan. Kita barusan saja membuat Popup Menu sederhana. Popup menu biasanya dipakai untuk melihat menu yang lebih banyak. Semoga bermanfaaat dan terima kasih ! Perfect Place To Begin Your Career Development BuildWith Angga.

Hello People With The Spirit Of Learning! Salah satu Fitur yang penting dalam database di Laravel yaitu Migration & Seeder. Manfaat dari fitur tersebut dapat mempermudah kita dalam pembuatan tabel dan data secara cepat. Pada tutorial kali ini kita akan membahas bagaimana menggunakan fitur tersebut pada Laravel, berikut caranya : Membuat project Langkah pertama, tentu saja kita buat project laravel menggunakan perintah : composer create-project laravel/laravel my-app Dalam pembuatan project laravel dapat menggunakan composer, jika belum mempunyai dapat mendownload pada link ini https://getcomposer.org/download/. Membuat database Langkah kedua kita buat database terlebih dahulu di PhpMyAdmin. Jika sudah membuat database jangan lupa kita atur .env di project laravel. Membuat tabel dan menjalankan Migration Langkah ketiga cari folder database/migration. untuk tabel kita gunakan saja file users yang ada didalam folder tersebut. Pada folder migration file 2014_10_12_000000_create_users_table.php terdapat beberapa field yang sudah disediakan oleh laravel. kalian juga bisa memodifikasi field tersebut. Kita coba menambahkan 1 field berupa role dengan default user. Untuk menjalankan Migration pada laravel kita dapat menggunakan perintah : php artisan migrate Nah setelah itu coba kita lihat di PhpMyAdmin maka akan ada tabel pada database yang sudah kita buat sebelumnya. Membuat file Seeder Langkah keempat yaitu proses seeder digunakan untuk membuat sample data atau dummy data dengan command yang sederhana. Untuk melakukan seeder kita buat dulu file yang menjalankan proses seeder dengan perintah berikut : php artisan make:seeder UsersSeeder Setelah menjalankan perintah tersebut coba kita liat pada folder seeders disana terdapat file dengan nama UsersSeeder.php. Didalam file tersebut coba kita input data-data yang kita sesuaikan dengan field yang sudah diatur didalam tabel. Menjalankan perintah eksekusi Seeder Langkah kelima untuk menjalankan file seeder buka file DatabaseSeeder.php masukan code seperti berikut. Setelah itu coba kita jalankan perintah php artisan berikut : php artisan db:seed php artisan db:seed --class=UsersSeeder Perintah php artisan db:seed menjalankan seeder secara default DatabaseSeeder, sedangkan jika kita ingin menjalankan Class tertentu dapat menggunakan —class=(nama_class). Hasil dari seeder dapat dilihat pada database. Sampai disini tutorial Migration & Seeder pada laravel dengan menggunakan fitur tersebut tentu saja dapat membantu kita secara cepat dalam pembuatan tabel dan dummy data. Semoga membantu dan bermanfaat. Perfect Place to Begin Your Career Development. BuildWith Angga

BuildWith Angga saat ini bersedia untuk memberikan akses kelas Premium & group konsultasi belajar dengan mentor yang expert, kamu berhak mendapatkan 3 akses kelas Premium secara gratis yang bisa dipelajari tanpa batasan waktu. Bantuan dari BWA kali ini hanya diberikan khusus untuk mereka yang baru saja terkenda dampak laid off yang mungkin ingin upgrade skills, mempelajari skills baru, atau switching karir di perusahaan baru nantinya. Bantuan Dampak LaidOff Dari BuildWith Angga Loading… Bantuan ini dibataskan dengan kuota 100 orang pertama yang submit oleh karena itu silahkan bagikan kepada rekan terdekat kamu yang membutuhkannya sehingga karirnya akan menjadi lebih baik lagi ke depannya. BuildWith Angga dan mentor expert di sini berharap bahwa bantuan ini akan bermanfaat untuk kamu yang ingin switching karir dan mencari pekerjaan yang lebih baik lagi pada perusahaan baru nantinya, silahkan claim bantuan tersebut di atas dan semoga bermanfaat. Perfect place to begin your career development. BuildWith Angga.

Hello people with spirit of learning! Pasti kalian mengetahui banyak aplikasi yang kita gunakan rata-rata mempunyai tombol navigasi dibawahnya, tombol tersebut bernama Bottom Navigation Bar. Disini kita akab belajar cara membuat Bottom Navigation Bar atau biasa disebut NavBar sederhana seperti gambar diatas. Namun sebelumnya, kita mendownload assetnya terlebih dahulu disini. Sebelum membuat Bottom Navigation Bar, Kita download assetsnya terlebih dahulu. Berikut caranya : 1) Kunjungin website Shaynakit.com lalu pilih Login 2) Masukkan Email dan Password 3) Lalu pilih Mobile Design https://buildwithangga.com/storage/photos/shares/flutter-tutorial-membuat-bottom-navigation-sederhana/image3.png 4) Cari design yang berjudul “Doctor Consultation UI KIT” https://buildwithangga.com/storage/photos/shares/flutter-tutorial-membuat-bottom-navigation-sederhana/image5.png 5) Buka website figma.com dan import file figma yang sudah kita download https://buildwithangga.com/storage/photos/shares/flutter-tutorial-membuat-bottom-navigation-sederhana/image6.png 6) Sesudah import, klik icon pada Bottom Navigation nya, Lalu export masing-masing icon https://buildwithangga.com/storage/photos/shares/flutter-tutorial-membuat-bottom-navigation-sederhana/image7.png 7) Terakhir, kita create folder dalam project flutter kita bernama “assets”. Lalu pindahkan icon yang sudah kita export ke dalam folder assets. https://buildwithangga.com/storage/photos/shares/flutter-tutorial-membuat-bottom-navigation-sederhana/image8.png https://buildwithangga.com/storage/photos/shares/flutter-tutorial-membuat-bottom-navigation-sederhana/image9.png Untuk cara menambahkan assets ke dalam flutter, bisa membaca dokumentasi berikut : Cara Menambahkan Assets pada Flutter. Kita baru saja mengikuti tutorial cara mendownload template di website Shaynakit.com. Yuk masuk ke tutorial membuat Bottom Navigation Bar sederhana. Berikut caranya : 1) Menambahkan Widget Scaffold dan diisi dengan properti bottomNavigationBar Scaffold( bottomNavigationBar: ), Langkah awal untuk membuat Bottom NavBar adalah menambahkan widget Scaffold. Lalu dalam Scaffold tambahkan properti bottomNavigationBar. 2) Menambahkan Widget BottomNavigationBar Scaffold( bottomNavigationBar: BottomNavigationBar( items: [], )), Langkah kedua adalah menambahkan widget BottomNavigationBar pada properti bottomNavigationBar. pada Widget BottomNavigationBar, kita tambahkan properti items. fungsi properti items adalah untuk menempatkan Widgets yang bertipe BottomNavigationBarItems. Jadi selain widget BottomNavigationBarItems, maka akan terjadi logic error. 3) Isi Properti List Items dengan BottomNavigationBarItems https://buildwithangga.com/storage/photos/shares/flutter-tutorial-membuat-bottom-navigation-sederhana/image10.png Scaffold( bottomNavigationBar: BottomNavigationBar(items: [ BottomNavigationBarItem( icon: Image.asset( 'assets/doctor.png', width: 24, ), label: ''), BottomNavigationBarItem( icon: Image.asset( 'assets/notification.png', width: 24, ), label: ''), ])), Langkah ketiga adalah menambahkan BottomNavigationBarItem. Pada BottomNavigationBarItem, ada 2 properti yang wajib dipakai. Yaitu icon dan label. icon untuk menambahkan asset gambarnya atau iconnya dan label untuk penamaan navigasinya. Untuk icon kita isi dengan widget Image.asset lalu arahkan dengan path asset kita tempatkan. dan label disini kita isi dengan String kosong saja. Kenapa tetap menambahkan label ? bila kita tidak menambahkan label, maka akan terjadi logic error. Note : Properti List items harus kita isi minimal 2 widget yang bertipe BottomNavigationBarItem. Mengapa ? nanti akan terjadi logic error jika kurang dari 2, Berikut pesan errornya. https://buildwithangga.com/storage/photos/shares/flutter-tutorial-membuat-bottom-navigation-sederhana/image11.png 4) Menambahkan 2 Widget BottomNavigationBarItem https://buildwithangga.com/storage/photos/shares/flutter-tutorial-membuat-bottom-navigation-sederhana/image12.png Scaffold( bottomNavigationBar: BottomNavigationBar( items: [ BottomNavigationBarItem( icon: Image.asset( 'assets/doctor.png', width: 24, ), label: ''), BottomNavigationBarItem( icon: Image.asset( 'assets/notification.png', width: 24, ), label: ''), BottomNavigationBarItem( icon: Image.asset( 'assets/bookmarked.png', width: 24, ), label: ''), BottomNavigationBarItem( icon: Image.asset( 'assets/ic_profile.png', width: 24, ), label: ''), ], )), Disini kita hanya menambahkan widget BottomNavigationBarItemnya saja dan mengubah iconnya saja. 5) Menambahkan Properti Type pada BottomNavigationBar https://buildwithangga.com/storage/photos/shares/flutter-tutorial-membuat-bottom-navigation-sederhana/image13.png Scaffold( bottomNavigationBar: BottomNavigationBar( type: BottomNavigationBarType.fixed, items: [...], )), Pada gambar sebelumnya, kita melihat bahwa align icon home tidak rata dengan icon yang lainnya dan ujung kanan dan ujung kiri jaraknya tidak sama. Dengan itu pada Scaffold kita tambahkan properti type. Dan kita isi dengan Widget BottomNavigationBarType.fixed. Kita baru saja membuat Bottom Navigation Bar sederhana. fungsi dari Bottom Navigation bar atau biasa disebut dengan Bottom NavBar adalah untuk berpindah ke suatu halaman / fitur ketika kita menekan tombol navigasi yang ada. Semoga bermanfaat dan terima kasih!

Dalam pembuatan / pengembangan aplikasi, Kita membutuhkan widget-widget untuk membuat aplikasi pada Flutter. Salah satunya adalah Appbar Application Bar. Disini kita akan membuat Appbar sederhana. 1) Menambahkan Widget Appbar Scaffold( appBar: AppBar() ) Yang Pertama, Kita harus menambahkan widget Scaffold dan property appBar kita tambahkan dengan widget Appbar(). Ini adalah Langkah dasar menggunakan Appbar. 2) Menambahkan Leading, Title dan Action Scaffold( appBar: AppBar( leading: IconButton( onPressed: () {}, icon: Icon( Icons.list_rounded, size: 30, )), title: Text('Home'), centerTitle: true, actions: [ IconButton(onPressed: () {}, icon: Icon(Icons.notifications)) ], ), ), Yang kedua menambahkan Leading, Title, dan Action. Leading adalah sisi kiri menu sebelum title yang berfungsi sebagai tombol navigasi. Leading ini bersifat opsional ya, Jadi jika kamu tidak menggunakan Leading maka sisi kiri akan diisi dengan Title. Untuk membuat Title berada di tengah, maka gunakan CenterTitle dan set menjadi True. Fungsi property Action pada Appbar adalah dapat menambahkan widget-widget yang akan diletakkan pada sisi kanan Appbar secara horizontal seperti baris. Biasanya digunakan untuk menampilkan tombol menu yang sering digunakan seperti notif, search, dll. Pada bagian Property Action yang bertipe List, Saya isi dengan widget IconButton. Penulisannya code nya bisa dicontoh seperti yang diatas. 3) Mengubah warna pada AppBar Scaffold( appBar: AppBar( backgroundColor: Colors.purple, leading: IconButton( onPressed: () {}, icon: Icon( Icons.list_rounded, size: 30, )), title: Text('Home'), centerTitle: true, actions: [ IconButton(onPressed: () {}, icon: Icon(Icons.notifications)) ], ), ), Yang terakhir, Jika kalian ingin mengubah warna, maka pada AppBar gunakan property BackgroundColor. Disini aku mengubah warna Appbar nya menjadi ungu. Kalian bisa ubah sesuai keinginan. Kita baru saja menerapkan AppBar yang sederhana dalam project flutter kita. Kegunaan dari Appbar atau Application Bar adalah sebagai menu petunjuk dan menampilkan beberapa navigasi. Semoga bermanfaat dan Terima kasih!