import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: HaiHallo(),
));
}
class HaiHallo extends StatelessWidget {
const HaiHallo({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: const Text("Hallo World", style: TextStyle(fontSize: 77)),
),
);
}
}
Kode program Flutter di atas adalah sebuah aplikasi sederhana yang menampilkan teks "Hallo World" di layar. Berikut adalah penjelasan terperinci dari setiap bagian kode:
### 1. `import 'package:flutter/material.dart';`
Kode ini mengimpor pustaka (`package`) Flutter yang berisi widget dan alat untuk membangun antarmuka pengguna berbasis Material Design. **Material Design** adalah sebuah standar desain yang dikembangkan oleh Google.
### 2. `void main() { runApp(MaterialApp(home: HaiHallo(),)); }`
Ini adalah fungsi `main()`, titik awal dari aplikasi Dart. Dalam Flutter, kita menggunakan `runApp()` untuk menjalankan aplikasi dan memuat widget utama ke layar.
- **`runApp()`**: Fungsi ini menerima sebuah widget, dalam hal ini widget `MaterialApp`, dan menampilkannya di layar.
- **`MaterialApp`**: Ini adalah widget dasar untuk membuat aplikasi Flutter dengan gaya Material Design.
- **`home: HaiHallo()`**: `home` adalah properti dari `MaterialApp` yang mendefinisikan widget utama aplikasi. Dalam hal ini, widget utamanya adalah kelas `HaiHallo`, yang akan dijelaskan lebih lanjut di bawah.
### 3. `class HaiHallo extends StatelessWidget {`
Ini mendefinisikan kelas `HaiHallo`, yang merupakan subclass dari `StatelessWidget`. Kelas ini adalah representasi dari sebuah halaman atau komponen visual yang tidak memiliki perubahan status (stateless).
- **`StatelessWidget`**: Digunakan ketika widget tidak memiliki data atau state yang berubah selama siklus hidup widget.
### 4. `const HaiHallo({super.key});`
Konstruktor `HaiHallo` didefinisikan di sini. `const` digunakan untuk menandai bahwa objek ini bersifat konstan, artinya tidak akan berubah setelah dibuat.
### 5. `@override Widget build(BuildContext context) {`
Metode `build()` adalah tempat di mana Anda mendefinisikan tampilan visual dari widget. Ini akan dipanggil setiap kali widget perlu dirender.
- **`context`**: Objek `BuildContext` yang berisi informasi tentang lokasi widget dalam pohon widget (widget tree).
### 6. `return Scaffold( body: Center( child: const Text("Hallo World", style: TextStyle(fontSize: 77)),),);`
Pada bagian ini, kita mendefinisikan struktur dan tampilan antarmuka aplikasi:
- **`Scaffold`**: Widget ini menyediakan struktur dasar untuk aplikasi dengan gaya Material Design. Biasanya digunakan untuk mendefinisikan elemen seperti `AppBar`, `Drawer`, dan `Body`.
- **`body: Center(...)`**: `body` adalah bagian utama dari tampilan. Widget `Center` digunakan untuk menempatkan widget anaknya di tengah layar.
- **`child: const Text("Hallo World", style: TextStyle(fontSize: 77))`**: Widget `Text` digunakan untuk menampilkan teks "Hallo World". Di sini, kita memberikan gaya khusus untuk teks melalui properti `style`, dengan ukuran font (fontSize) yang ditentukan sebesar 77.
### Alur Kerja Program:
1. Fungsi `main()` dijalankan dan memanggil `runApp()` untuk memulai aplikasi.
2. `runApp()` memuat widget `MaterialApp`, dan properti `home` menunjuk ke widget `HaiHallo`.
3. Di dalam `HaiHallo`, widget `Scaffold` digunakan sebagai kerangka utama, dan widget `Center` memastikan bahwa teks "Hallo World" ditampilkan di tengah layar.
4. Ukuran teks "Hallo World" diatur menggunakan properti `TextStyle` dengan ukuran font 77.
Aplikasi ini hanya memiliki satu layar dengan teks sederhana "Hallo World" di tengah layar, berukuran besar, dan menggunakan gaya desain Material dari Flutter.
Tidak ada komentar:
Posting Komentar