Flutter adalah SDK pengembangan aplikasi open-source yang dibuat oleh Google untuk membangun aplikasi mobile lintas platform. Dengan menggunakan Flutter, bahkan programmer pemula yang tidak memiliki pengalaman dalam bahasa pemrograman apapun dapat dengan mudah dan cepat membangun aplikasi mobile native yang responsif dan berkualitas tinggi. Artikel ini akan menunjukkan cara membuat project flutter di visual studio code dan kemudian cara membangun aplikasi sederhana dengan Flutter dan terakhir menjalankannya di perangkat Android.
Mengapa Menggunakan Flutter Daripada Pengembangan Java Native?
Flutter memiliki beberapa fitur unik yang membedakannya dari Java native dan SDK lainnya, seperti:
- Fast Development: Flutter menggunakan Widget yang dapat disesuaikan dan disarangkan satu sama lain untuk membuat antarmuka aplikasi, seperti struktur HTML.
- Hot Reload: Anda dapat melihat perubahan yang dibuat dalam kode secara instan tanpa harus melakukan recompiling.
- It’s Native in the end: Di balik layar, kode dasarnya dikompilasi menjadi Java, memastikan kinerja yang sama seperti yang ditawarkan oleh aplikasi native.
- Light on system resources: Flutter dapat dijalankan dengan nyaman pada sistem yang memiliki sumber daya yang lebih rendah.
Cara Mengatur Flutter
- Langkah 1: Menyiapkan Flutter SDK
- Unduh SDK terbaru di sini: Flutter SDK Archive
- Ekstrak file zip dan letakkan folder ‘flutter’ yang berisi di direktori yang diinginkan.
Catatan: Disarankan untuk tidak menginstal Flutter di direktori yang memerlukan hak admin, seperti ‘C:\Program Files’.
- Langkah 2: Tambahkan Flutter ke PATH: Meskipun tidak diperlukan, disarankan untuk mengatur variabel PATH agar Flutter mudah diakses dari mana saja di sistem.
- Untuk mengatur variabel PATH, buka Edit environment variables for your account di Control Panel. Anda dapat mencari pengaturan ini di bilah pencarian.
- Di bawah user variable, periksa apakah ada entri yang disebut PATH:
- Jika sudah ada, tambahkan PATH baru ke ‘flutter\bin’.
- Jika entri tersebut belum ada, buat entri baru bernama PATH, dan kemudian tambahkan lokasi lengkap ke ‘flutter\bin’.
- Restart ulang Windows setelah mengatur variabel PATH agar dapat berfungsi.
- Langkah 3: Siapkan Android Studio: Android Studio secara otomatis mengunduh alat pengembangan yang diperlukan agar Flutter dapat berfungsi dengan Android.
- Unduh Android Studio di sini: Android Studio
- Mulai Android Studio dan ikuti wizard SDK Manager untuk mengunduh semua alat build yang diperlukan.
- Langkah 4: Siapkan Visual Studio Code: Visual Studio Code (atau VS Code) adalah code editor ringan yang dapat digunakan dalam pengembangan Flutter. Dalam artikel ini, VS Code digunakan sebagai code editor karena lebih ringan dan memiliki fitur minimal yang diperlukan.
- Unduh dan instal VS Code: VS Code Download.
- Untuk membantu dalam pengembangan, dua ekstensi atau plugin pada VS Code harus dipasang. Instal plugin Flutter dan Dart dari Tab Ekstensi VS Code. Anda dapat merujuk: Setting Up VS Code Extensions for Flutter
- Pasang Git Bash: Meskipun bersifat opsional, disarankan untuk digunakan sebagai command prompt. Git Bash menyediakan banyak perintah unix yang umum digunakan untuk beberapa tugas cepat. Anda dapat mengunduh Git Bash untuk Windows di sini: Git.
- Jalankan Flutter Doctor: Flutter doctor adalah alat bawaan oleh Flutter yang dapat digunakan untuk memeriksa status instalasi Flutter. Setelah mengatur variabel PATH, Anda dapat membuka Command Prompt dan mengeksekusi perintah “flutter doctor”.
flutter doctor
Perintah ini akan memeriksa semua yang diperlukan untuk menjalankan Flutter dan memberikan laporan rinci tentang setiap kesalahan yang ditemukan.
Membuat Proyek Kosong
Arahkanlah ke tempat di mana Anda ingin membuat proyek Anda. Kemudian, bukalah command prompt. Anda juga dapat menggunakan konteks “Git Bash here” dengan mengklik kanan untuk membuka Git Bash di lokasi tersebut. Setelah itu, ketiklah perintah untuk membuat proyek baru:
flutter create project_name
Contoh: Ketika mengeksekusi proyek haloflutter
flutter create haloflutter
Buka folder ini di VS Code. Kamu bisa klik kanan dan menggunakan menu konteks untuk membuka langsung di VS Code, atau mulai VS Code terlebih dahulu dan kemudian buka folder ini sebagai proyek.
Ada sebuah panel besar di sebelah kiri yang menampilkan semua file dan folder, disebut Explorer Panel. Kamu bisa menuju folder ‘lib’ dan memilih file ‘main.dart’. File ini merupakan titik awal dari mana aplikasi akan mulai dijalankan.
Kode aplikasi sudah terbuka, Anda dapat mencoba untuk menjalankan aplikasi sederhana ini selanjutnya.
Menjalankan Aplikasi Halo Flutter
Hapuslah Widget MyHomePage.
Buatlah sebuah Stateless Widget baru dan beri nama HaloFlutter. Stateless Widget digunakan untuk mendefinisikan Widget yang tidak perlu menangani perubahan pada keadaan internalnya. Jenis Widget ini biasanya digunakan untuk membangun komponen yang setelah digambar, tidak perlu diperbarui lagi.
class HaloFlutter extends StatelessWidget {
const HaloFlutter({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
);
}
}
Gantilah widget Container dengan widget Scaffold. Scaffold akan mengimplementasikan struktur tata letak visual dasar desain material. Widget ini menyediakan API untuk menampilkan drawer, appbar, dan konten aplikasi. Properti body pada Scaffold akan digunakan untuk menampilkan konten aplikasi.
class HaloFlutter extends StatelessWidget {
const HaloFlutter({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const Scaffold(
);
}
}
Deklarasikan Widget Container di badan Scaffold.
Widget Container adalah widget berguna yang menggabungkan widget painting, positioning, dan sizing. Anda dapat membungkus widget apa pun dengan Container dan mengontrol properti yang disebutkan di atas.
class HaloFlutter extends StatelessWidget {
const HaloFlutter({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container()
);
}
}
Widget Container memiliki properti alignment yang dapat membantu dalam memposisikan Widget ke tengah layar. Untuk mengatur alignment, gunakan class Alignment.
alignment: Alignment.center
Pada properti children dari Widget Container, deklarasikan Widget Teks. Widget Teks digunakan untuk menampilkan dan mengelola teks. Setelah membuat Widget Teks, masukkan ‘Halo Flutter’ di antara tanda kutip tunggal. Apapun yang dimasukkan di antara tanda kutip tunggal akan ditampilkan oleh Widget Teks.
class HaloFlutter extends StatelessWidget {
const HaloFlutter({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
alignment: Alignment.center,
child: const Text('Halo Flutter!'),
),
);
}
}
Akhirnya, pada properti home dari main class My App di atas, ubahlah MyHomePage (…) menjadi HaloFlutter(). Hal ini akan membuat main class MyApp merujuk pada HaloFlutter yang baru saja dibuat.
Sekarang jalankan aplikasi menggunakan command ‘flutter run’.
Sebuah teks “Hello Flutter!” akan muncul ditulis di tengah layar.
Berikut ini adalah code lengkapnya
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(
primarySwatch: Colors.blue,
useMaterial3: true,
),
home: const HaloFlutter(),
);
}
}
class HaloFlutter extends StatelessWidget {
const HaloFlutter({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
alignment: Alignment.center,
child: const Text('Halo Flutter!'),
),
);
}
}
Tutorial sebelumnya : Cara Menginstal Flutter
Tutorial setelahnya : Mengenal Flutter Widget
Semua Tutorial Flutter : Tutorial Flutter