Bagus! Kalau kamu ingin buat blog pembelajaran tentang kode Flutter yang kamu kirim, saya bisa bantu bikinkan draft artikel yang jelas dan menarik. Misalnya seperti ini:
---
Membuat Aplikasi Flutter Sederhana: Demo Widget dengan Tombol dan Gambar
Halo teman-teman! Kali ini kita akan belajar membuat aplikasi Flutter sederhana yang menampilkan teks, gambar, dan tombol dengan aksi SnackBar. Yuk, simak penjelasannya!
1. Setup Dasar Aplikasi Flutter
Kita mulai dengan membuat aplikasi Flutter baru. Di main.dart, tulis kode berikut:
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(
title: 'Demo Widget Flutter',
theme: ThemeData(primarySwatch: Colors.blue),
home: const HomeScreen(),
);
}
}
Penjelasan:
Fungsi main() memanggil runApp() yang menjalankan aplikasi.
MyApp adalah widget utama yang menggunakan MaterialApp.
MaterialApp mengatur tema dan layar awal (home) yang akan kita buat berikutnya.
2. Membuat Halaman Utama (HomeScreen)
Halaman utama kita buat sebagai widget StatelessWidget yang menampilkan teks, gambar, dan tombol:
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Kelompok 1'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text(
'Aisah, Caca, Gadiza, Nasya, Qori',
style: TextStyle(fontSize: 20),
),
const SizedBox(height: 20),
Image.network(
'https://images.unsplash.com/photo-1753925984756-7505c50a3170?q=80&w=1029&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
width: 200,
),
const SizedBox(height: 20),
ElevatedButton(
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Well')),
);
},
child: const Text('Tekan sini guis'),
),
],
),
),
);
}
}
Penjelasan:
Scaffold memberikan struktur dasar layar dengan AppBar.
Center dan Column untuk mengatur tata letak vertikal.
Teks menampilkan nama-nama anggota kelompok.
Image.network menampilkan gambar dari URL.
Tombol ElevatedButton ketika ditekan akan memunculkan SnackBar dengan pesan "Well".
3. Jalankan Aplikasi
Setelah kode siap, jalankan aplikasi menggunakan:
flutter run
Kamu akan melihat layar dengan teks, gambar, dan tombol. Coba tekan tombolnya, dan akan muncul pesan singkat di bawah layar.
https://zs1es06rps1et.zapp.page/#/
---
Kalau kamu mau, saya juga bisa bantu buatkan versi blog yang lebih panjang, lengkap dengan penjelasan konsep Flutte
r atau cara kustomisasi widget. Mau saya buatkan? Atau ada bagian lain dari Flutter yang ingin kamu bahas?
Tidak ada komentar:
Posting Komentar