Program ini membuat aplikasi sederhana dengan halaman yang menampilkan sebuah kotak berwarna biru tua di tengah layar
Ringkasan:
Program ini membuat aplikasi sederhana dengan halaman yang menampilkan sebuah kotak berwarna biru tua di tengah layar. Di dalam kotak tersebut, terdapat ikon Android berwarna putih dengan ukuran besar (70 piksel). Scaffold memberikan struktur dasar halaman, sementara widget lainnya seperti Center dan Container membantu dalam menempatkan dan mengatur ukuran serta warna elemen UI.
Program ini menunjukkan penggunaan dasar dari widget Flutter seperti Scaffold, Center, Container, dan Icon, serta konsep penataan widget secara hierarki.
Berikut adalah penjelasan terperinci dari kode program Flutter yang diberikan:
1. import 'package:flutter/material.dart';
Mengimpor package flutter/material.dart yang merupakan pustaka utama untuk membuat aplikasi Flutter dengan desain material. Pustaka ini menyediakan berbagai widget dan tema yang mengikuti gaya desain material Google.
2. void main()
Fungsi main adalah titik masuk aplikasi. Setiap aplikasi Flutter dimulai dari fungsi main.
Di dalam fungsi ini, runApp() dipanggil untuk memulai aplikasi Flutter dan menampilkan widget yang diberikan.
3. runApp(new MaterialApp(home: new HalamanSatu()))
runApp: Fungsi ini menempatkan widget root dari aplikasi pada layar. Dalam kasus ini, widget yang di-root adalah MaterialApp.
MaterialApp: Widget ini adalah kerangka utama aplikasi Flutter yang mendukung desain material. Ini menyediakan fitur seperti tema, routing, dan navigasi.
home: new HalamanSatu(): Parameter home menentukan widget yang akan ditampilkan pertama kali ketika aplikasi dibuka. Dalam hal ini, widget pertama yang ditampilkan adalah HalamanSatu, yang didefinisikan sebagai widget berikutnya.
4. class HalamanSatu extends StatelessWidget
HalamanSatu adalah sebuah kelas yang merupakan subclass dari StatelessWidget.
StatelessWidget adalah jenis widget yang tidak memiliki state atau data yang dapat berubah. Karena tidak ada interaksi pengguna yang memengaruhi tampilan, widget ini statis (hanya menampilkan sesuatu yang tetap).
Di dalam kelas ini, Anda perlu mengimplementasikan metode build untuk mendeskripsikan tampilan widget.
5. @override Widget build(BuildContext context)
build(BuildContext context): Fungsi ini adalah tempat di mana tampilan widget didefinisikan. Pada Flutter, UI dinyatakan dalam bentuk widget, dan metode build memproduksi sebuah pohon widget (widget tree).
context: Objek yang menyediakan informasi tentang posisi widget dalam struktur widget dan lingkungan sekitarnya.
6. return new Scaffold(...)
Scaffold: Widget ini menyediakan struktur visual dasar untuk aplikasi desain material, termasuk AppBar, Drawer, dan BottomNavigationBar. Di sini, Scaffold digunakan untuk menyediakan area layar yang dapat digunakan untuk membuat tampilan lebih terstruktur.
7. body: new Center(...)
Center: Widget ini mengatur child widget-nya agar berada di tengah layar. Di dalam widget Center, akan ada widget Container yang diletakkan di tengah-tengah layar.
8. new Container(...)
Container: Widget ini digunakan untuk membuat wadah dengan lebar, tinggi, dan properti gaya lainnya. Pada contoh ini, Container digunakan untuk membuat kotak dengan ukuran dan warna tertentu.
color: Colors.blue[900]: Properti color menetapkan warna latar belakang container. Dalam hal ini, kotak akan diwarnai dengan biru gelap.
width: 200.0, height: 100.0: Menentukan ukuran kotak dengan lebar 200 piksel dan tinggi 100 piksel.
9. child: new Center(...)
child: Container dapat memiliki widget anak, dan di sini widget anak tersebut juga adalah Center. Ini berarti, widget di dalam Container akan diletakkan di tengah Container.
10. new Icon(...)
- **`Icon`**: Widget ini menampilkan ikon dari kumpulan ikon bawaan Flutter (material icons). Di sini ikon yang digunakan adalah **`Icons.android`**, ikon berbentuk logo Android.
- **`color: Colors.white`**: Menentukan bahwa ikon akan diwarnai putih.
- **`size: 70.0`**: Menentukan ukuran ikon, dalam hal ini 70 piksel.
Tidak ada komentar:
Posting Komentar