Belajar Flutter : Membuat Aplikasi Sederhana Dengan Widget
Pada kesempatan kali ini, kita akan belajar membuat aplikasi sederhana menggunakan Flutter. Aplikasi ini akan menampilkan teks, gambar, dan tombol yang dapat menampilkan pesan snack bar.
Langkah 1: Membuat Project Flutter
Pertama-tama, kita perlu membuat project Flutter baru. Jika Anda belum memiliki Flutter SDK, silakan download dan install terlebih dahulu. Setelah itu, buat project baru dengan menjalankan perintah `flutter create nama_project` di terminal.
Langkah 2: Membuat Struktur Aplikasi
Berikut adalah struktur aplikasi yang kita akan buat:
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(),
);
}
}
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),
// Foto di tengah
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 Kode
- `Scaffold` digunakan untuk membuat struktur dasar aplikasi.
- `AppBar` digunakan untuk membuat bar atas aplikasi.
- `Center` digunakan untuk membuat konten aplikasi berada di tengah.
- `Column` digunakan untuk membuat konten aplikasi dalam bentuk kolom.
- `Text` digunakan untuk menampilkan teks.
- `Image.network` digunakan untuk menampilkan gambar dari URL.
- `ElevatedButton` digunakan untuk membuat tombol yang dapat menampilkan pesan snack bar.
- `ScaffoldMessenger` digunakan untuk menampilkan pesan snack bar.
Kesimpulan
Dengan demikian, kita telah berhasil membuat aplikasi sederhana menggunakan Flutter. Aplikasi ini menampilkan teks, gambar, dan tombol yang dapat menampilkan pesan snack bar. Semoga tutorial ini dapat membantu Anda dalam belajar Flutter.
Comments
Post a Comment