Aplikasi Flutter sederhana membuat AppBar (Aplication Bar)
Berikut kode program dari tampilan diatas 👍
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('ldr corner'),
backgroundColor: Colors.red, // Mengganti dengan warna merah sesuai gambar
leading: IconButton(
icon: const Icon(Icons.home),
onPressed: () {
// Aksi ketika tombol home ditekan
},
),
actions: [
IconButton(
icon: const Icon(Icons.search),
onPressed: () {
// Aksi ketika tombol search ditekan
},
),
],
),
body: Container(
color: Colors.yellow[100], // Set warna background sesuai gambar (kuning pucat)
),
),
);
}
}
Selanjutnya kita coba jelaskan 👍
Berikut adalah penjelasan lengkap mengenai kode program Flutter yang diatas :
import 'package:flutter/material.dart';
Penjelasan:
Baris ini mengimpor pustaka flutter/material.dart yang berisi komponen dan widget yang diperlukan untuk membuat aplikasi menggunakan desain material di Flutter. Desain material adalah gaya antarmuka yang diusung oleh Google.
void main() => runApp(const MyApp());
Penjelasan:
Fungsi main() adalah titik awal program di Dart, seperti halnya dalam bahasa pemrograman lainnya.
runApp() adalah fungsi bawaan Flutter yang digunakan untuk menjalankan aplikasi. Fungsi ini menerima widget sebagai parameter, dalam hal ini adalah MyApp.
const MyApp() menunjukkan bahwa instance dari MyApp adalah konstanta, yang berarti tidak akan berubah sepanjang masa hidupnya di aplikasi.
class MyApp extends StatelessWidget {
const MyApp({super.key});
Penjelasan:
MyApp adalah kelas turunan dari StatelessWidget, yang berarti widget ini bersifat statis dan tidak akan berubah selama aplikasi berjalan. Jika Anda membutuhkan widget yang dapat berubah, Anda akan menggunakan StatefulWidget.
const MyApp({super.key}) mendefinisikan konstruktor konstanta untuk MyApp. Ini memungkinkan instansiasi MyApp sebagai konstanta.
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
Penjelasan:
@override berarti metode build sedang mengesampingkan metode dari kelas induknya (StatelessWidget).
Widget build(BuildContext context) adalah metode yang wajib ada pada widget di Flutter untuk membangun antarmuka (UI). Metode ini harus mengembalikan sebuah widget.
MaterialApp adalah widget yang membungkus seluruh aplikasi dan memberikan tema serta gaya material design. Ini diperlukan agar aplikasi menggunakan widget material secara konsisten.
home: adalah properti dari MaterialApp yang menentukan widget utama yang akan ditampilkan, dalam hal ini, sebuah Scaffold.
Scaffold(
appBar: AppBar(
title: const Text('ldr corner'),
backgroundColor: Colors.red,
Penjelasan:
Scaffold adalah widget dasar yang menyediakan struktur visual seperti AppBar, body, drawer, dll., yang umum digunakan dalam aplikasi material design.
appBar: digunakan untuk mendefinisikan bagian AppBar di aplikasi.
AppBar adalah komponen di bagian atas layar yang biasanya berisi judul, ikon navigasi, atau tombol tindakan.
title: const Text('ldr corner'): Menampilkan teks "ldr corner" sebagai judul di AppBar.
backgroundColor: Colors.red: Mengatur warna latar belakang AppBar menjadi merah. Colors.red adalah konstanta warna bawaan di Flutter.
leading: IconButton(
icon: const Icon(Icons.home),
onPressed: () {
// Aksi ketika tombol home ditekan
},
),
Penjelasan:
leading: adalah properti pada AppBar yang menentukan ikon di sebelah kiri, biasanya digunakan untuk tombol navigasi.
IconButton: Membuat tombol yang berupa ikon. Di sini, ikon yang digunakan adalah Icons.home, yang merupakan ikon bawaan Flutter berbentuk rumah.
onPressed: adalah fungsi callback yang akan dipanggil saat ikon ditekan. Dalam kode ini, fungsi tersebut masih kosong (belum ada aksi yang dilakukan).
actions: [
IconButton(
icon: const Icon(Icons.search),
onPressed: () {
// Aksi ketika tombol search ditekan
},
),
],
Penjelasan:
actions: adalah properti pada AppBar yang memungkinkan Anda menambahkan daftar widget di sebelah kanan AppBar. Biasanya digunakan untuk ikon atau tombol tindakan.
Di sini, sebuah IconButton ditambahkan dengan ikon Icons.search (ikon pencarian), yang akan menjalankan aksi ketika ditekan. Saat ini, aksi tersebut masih kosong.
body: Container(
color: Colors.yellow[100],
),
Penjelasan:
body: adalah bagian utama dari layar di bawah AppBar. Di sini, digunakan Container untuk membungkus seluruh area tampilan.
color: Colors.yellow[100]: Mengatur warna latar belakang body menjadi kuning pucat (Colors.yellow[100] adalah warna kuning muda di Flutter, dan angka [100] menandakan intensitas warna yang lebih ringan).
Ringkasan:
Kode ini adalah aplikasi Flutter sederhana dengan:
AppBar berwarna merah yang menampilkan judul "ldr corner" di tengah, ikon "home" di sebelah kiri, dan ikon "search" di sebelah kanan.
body berisi latar belakang berwarna kuning pucat.
Struktur dasar ini memungkinkan Anda untuk membangun aplikasi dengan fitur tambahan seperti fungsi pada tombol, navigasi, atau logika lain di kemudian hari.
Tidak ada komentar:
Posting Komentar