Mari kita mulai belajar Flutter dari dasar
Flutter adalah framework UI (User Interface) dari Google yang digunakan untuk membangun aplikasi mobile, web, dan desktop dari satu basis kode. Flutter menggunakan bahasa pemrograman Dart.
Berikut adalah langkah-langkah dasar untuk memulai dengan Flutter:
1. Instalasi Flutter SDK:
Langkah pertama adalah menginstal Flutter SDK di komputer Anda. Cara instalasinya berbeda-beda tergantung sistem operasi Anda (Windows, macOS, Linux). Anda bisa mengikuti panduan resmi di situs web Flutter: https://flutter.dev/docs/get-started/install.
Setelah instalasi, Anda perlu memastikan Flutter sudah terkonfigurasi dengan benar dengan menjalankan perintah di terminal/command prompt:
flutter doctor
Perintah ini akan memeriksa dependensi yang dibutuhkan Flutter dan memberikan laporan jika ada yang perlu diinstal.
2. Membuat Proyek Flutter Baru:
Setelah instalasi berhasil, Anda bisa membuat proyek Flutter baru dengan perintah:
flutter create nama_aplikasi
Ganti nama_aplikasi dengan nama yang Anda inginkan untuk proyek Anda. Setelah perintah ini selesai, akan ada folder baru dengan nama proyek Anda yang berisi struktur dasar proyek Flutter.
3. Struktur Proyek Flutter:
Beberapa folder dan file penting dalam proyek Flutter yang baru dibuat:
android/ dan ios/: Berisi kode spesifik platform untuk Android dan iOS. Anda biasanya tidak akan sering memodifikasi folder ini kecuali memerlukan konfigurasi tingkat lanjut.
lib/: Folder utama tempat kode Dart aplikasi Anda akan berada. File utama biasanya adalah main.dart.
test/: Berisi file untuk melakukan pengujian (testing) pada aplikasi Anda.
pubspec.yaml: File konfigurasi proyek. Di sini Anda menambahkan dependensi eksternal (packages), aset (gambar, font), dan informasi proyek lainnya.
4. File main.dart:
Buka file lib/main.dart. Ini adalah titik masuk (entry point) aplikasi Flutter Anda. Secara default, Flutter akan membuat aplikasi counter sederhana di sini. Mari kita pahami kode dasarnya:
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: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headlineMedium,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}
Mari kita bedah beberapa konsep penting di sini:
import 'package:flutter/material.dart';: Mengimpor library material.dart yang menyediakan banyak widget (komponen UI) yang mengikuti desain Material Design dari Google.
void main() { runApp(const MyApp()); }: Fungsi main() adalah titik awal eksekusi aplikasi. runApp() berfungsi untuk menjalankan widget utama aplikasi, dalam hal ini adalah MyApp.
StatelessWidget: Widget yang propertinya tidak bisa berubah setelah widget itu dibuat. MyApp di contoh ini adalah StatelessWidget.
StatefulWidget: Widget yang memiliki state (keadaan) yang bisa berubah selama masa hidup widget. MyHomePage di contoh ini adalah StatefulWidget karena nilai _counter bisa bertambah.
build(BuildContext context): Metode yang wajib ada di setiap widget. Metode ini mengembalikan widget lain yang akan ditampilkan di layar. BuildContext menyediakan informasi tentang lokasi widget dalam widget tree.
MaterialApp: Widget dasar untuk banyak aplikasi Flutter yang mengimplementasikan spesifikasi desain Material Design. Ini menyediakan tema, routing, dan lain-lain.
Scaffold: Menyediakan struktur dasar tata letak layar seperti AppBar (bilah aplikasi di atas), body (konten utama), dan FloatingActionButton.
AppBar: Bilah aplikasi di bagian atas layar.
Center: Widget yang membuat anaknya berada di tengah-tengah area yang tersedia.
Column: Widget yang menata anak-anaknya secara vertikal.
Row: (Tidak ada di contoh ini, tapi penting) Widget yang menata anak-anaknya secara horizontal.
Text: Widget untuk menampilkan teks.
FloatingActionButton: Tombol mengambang yang biasanya digunakan untuk tindakan utama di layar.
setState(() { ... });: Fungsi yang digunakan untuk memberitahu Flutter bahwa ada perubahan state di dalam StatefulWidget. Ketika setState() dipanggil, Flutter akan membangun ulang (rebuild) bagian UI yang terpengaruh.
5. Menjalankan Aplikasi:
Untuk menjalankan aplikasi, Anda perlu menghubungkan perangkat fisik (Android/iOS) atau menggunakan emulator/simulator. Pastikan perangkat atau emulator Anda sudah berjalan. Kemudian, di terminal/command prompt, arahkan ke direktori proyek Anda dan jalankan perintah:
flutter run
Flutter akan membangun aplikasi Anda dan menjalankannya di perangkat atau emulator yang terhubung.
Langkah Selanjutnya:
Ini adalah dasar-dasar untuk memulai dengan Flutter. Untuk melangkah lebih jauh, Anda bisa mempelajari tentang:
Widget lebih lanjut: Ada banyak widget bawaan di Flutter untuk berbagai keperluan tata letak, input, tampilan, dan interaksi.
Tata letak (Layout): Memahami cara menggunakan widget seperti Row, Column, Stack, Expanded, Padding, Margin, dan lainnya untuk menyusun elemen UI.
State Management: Mengelola data dan perubahan UI dengan lebih baik menggunakan konsep seperti setState (untuk state sederhana), atau package yang lebih canggih seperti Provider, BLoC/Cubit, Riverpod.
Navigasi (Navigation): Pindah antar halaman (screens) dalam aplikasi.
Networking: Mengambil data dari internet.
Penyimpanan Lokal (Local Storage): Menyimpan data di perangkat.
Posting Komentar untuk "Mari kita mulai belajar Flutter dari dasar"