Setelah menyiapkan Flutter SDK di sistem kamu, penting untuk memahami bagaimana struktur proyek Flutter diatur dan bagaimana cara menjalankan aplikasi kamu di berbagai lingkungan pengembangan. Pada artikel kali ini kita akan menjelaskan secara mendalam tentang struktur proyek Flutter, file dan folder penting yang terdapat di dalamnya, serta langkah-langkah menjalankan aplikasi di platform pengembangan populer seperti Visual Studio Code, Android Studio, dan terminal.

Langkah-Langkah Membuat Proyek Flutter Baru

Sebelum memahami struktur proyek Flutter, kita perlu membuat proyek baru terlebih dahulu. Berikut adalah cara membuat proyek Flutter baru menggunakan beberapa alat pengembangan populer.

1. Membuat Proyek Flutter di Visual Studio Code

• Langkah Awal:

  1. Buka Visual Studio Code.

  2. Pastikan ekstensi Flutter dan Dart sudah terpasang. Jika belum, instal ekstensi tersebut dari marketplace VS Code.

     

• Membuat Proyek Baru:

  1. Buka Command Palette dengan menekan Ctrl + Shift + P (Windows) atau Cmd + Shift + P (Mac).

  2. Ketik "Flutter" dan pilih Flutter: New Project.

     

  3. Pilih "Application" sebagai template proyek baru.

  4. Tentukan lokasi penyimpanan proyek kamu, misalnya di folder "Documents".

  5. Berikan nama untuk proyek baru kamu dan tekan Enter. Nama proyek harus menggunakan huruf kecil dan tidak boleh mengandung spasi.

  6. Tunggu beberapa saat hingga VS Code selesai menyiapkan proyek. VS Code akan membuat folder dengan struktur proyek Flutter standar dan file aplikasi dasar di dalamnya.

2. Membuat Proyek Flutter di Android Studio

• Persiapan Awal:

  1. Buka Android Studio.

  2. Pastikan plugin Flutter dan Dart sudah terpasang. Jika belum, tambahkan melalui Preferences > Plugins.

     

• Membuat Proyek Baru:

  1. Klik Start a new Flutter project di layar utama Android Studio.

  2. Pilih "Flutter Application" sebagai jenis proyek yang ingin kamu buat.

  3. Pada layar konfigurasi proyek, tentukan nama proyek, lokasi penyimpanan, dan jalur Flutter SDK.

     

  4. Tentukan paket aplikasi (package name) untuk Android, seperti com.example.myfirstapp.

  5. Klik "Finish" untuk membuat proyek. Android Studio akan menyiapkan proyek baru dengan struktur standar Flutter.

3. Membuat Proyek Flutter Menggunakan Terminal

• Langkah-Langkah:

  1. Buka terminal atau command line.

  2. Arahkan ke direktori di mana kamu ingin menyimpan proyek, misalnya dengan perintah cd ~/Documents/.

  3. Buat proyek Flutter dengan mengetikkan perintah:

      flutter create my_first_app
     

     Gantilah my_first_app dengan nama proyek yang kamu inginkan. Pastikan nama tersebut menggunakan huruf kecil dan tidak mengandung spasi.

  4. Setelah proyek selesai dibuat, masuk ke direktori proyek dengan perintah:

      cd my_first_app
     

  5. Sekarang proyek kamu siap untuk dijalankan.

Memahami Struktur Proyek Flutter

Ketika membuat proyek baru dengan Flutter, beberapa folder dan file akan dibuat secara otomatis untuk membantu kamu mengelola aplikasi dengan lebih baik. Setiap folder dan file memiliki fungsinya masing-masing yang mendukung berbagai aspek dalam pengembangan aplikasi Flutter. Berikut adalah penjelasan rinci mengenai struktur proyek standar Flutter:

1. Folder lib/:

   • Folder lib/ adalah tempat di mana kode utama aplikasi berada, dan biasanya merupakan direktori pertama yang perlu kamu perhatikan.

   • File lib/main.dart adalah titik masuk aplikasi Flutter. Di dalam file ini, fungsi main() memanggil runApp(), yang menjalankan aplikasi dengan widget utama.

   • Kamu dapat membuat sub-folder di dalam lib/ seperti lib/screens/, lib/widgets/, atau lib/models/ untuk menyusun kode aplikasi secara lebih terorganisir. Misalnya, kamu bisa memisahkan tampilan halaman utama ke dalam folder screens/, dan komponen-komponen kecil yang dapat digunakan kembali ke dalam folder widgets/.

2. Folder android/:

   • Berisi kode sumber dan konfigurasi yang diperlukan untuk menjalankan aplikasi di platform Android.

   • File penting seperti AndroidManifest.xml (untuk konfigurasi aplikasi Android), serta build.gradle (untuk mengatur dependensi dan konfigurasi build) terdapat di dalam folder ini.

   • Folder ini memungkinkan kamu menambahkan fitur atau konfigurasi spesifik yang hanya digunakan pada platform Android, seperti izin akses (permissions) atau integrasi dengan layanan tertentu.

3. Folder ios/:

   • Mirip dengan folder android/, folder ini mengandung kode dan konfigurasi untuk platform iOS.

   • File seperti Info.plist digunakan untuk pengaturan aplikasi iOS, misalnya menentukan nama aplikasi, ikon, dan izin yang diperlukan. File Podfile digunakan untuk mengatur dependensi CocoaPods.

   • Jika kamu berencana menjalankan aplikasi di iOS, sangat penting untuk memiliki perangkat atau simulator iOS.

4. Folder web/:

   • Jika kamu ingin mengembangkan aplikasi Flutter yang dapat dijalankan di web, folder ini akan berisi konfigurasi untuk mengatur aplikasi web, termasuk file HTML dan JavaScript yang diperlukan.

   • File index.html yang ada di sini berfungsi sebagai titik awal untuk aplikasi web, di mana elemen <body> akan diisi dengan aplikasi Flutter saat dijalankan di browser.

5. Folder test/:

   • Folder ini berisi kode pengujian untuk aplikasi kamu. Pengujian sangat penting untuk memastikan bahwa aplikasi bekerja seperti yang diharapkan, terutama untuk aplikasi yang kompleks.

   • Flutter mendukung pengujian unit, widget, dan integrasi. Kamu bisa membuat berbagai tes otomatis di sini untuk memeriksa fungsi aplikasi, memastikan tampilan UI sesuai, atau menguji perilaku aplikasi dalam skenario tertentu.

6. File pubspec.yaml:

   • File konfigurasi utama untuk proyek Flutter kamu. Di sini, kamu dapat menentukan dependensi pihak ketiga, asset seperti gambar atau font, dan juga mengatur informasi proyek.

   • Bagian dependencies digunakan untuk menambahkan paket pihak ketiga yang dapat diinstal melalui pub.dev, sedangkan bagian flutter dapat digunakan untuk mendeklarasikan asset yang ingin dimasukkan ke dalam aplikasi.

Memahami Kode main.dart pada Flutter

File lib/main.dart adalah titik awal untuk aplikasi Flutter, di mana struktur dasar aplikasi dan widget utama diinisialisasi. Berikut adalah contoh kode dasar main.dart dan penjelasan tiap bagiannya:

import 'package:flutter/material.dart';

// Fungsi main() adalah titik masuk dari aplikasi
void main() {
  runApp(MyApp());
}

// MyApp adalah kelas utama aplikasi yang merupakan subclass dari StatelessWidget
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello Flutter'),
        ),
        body: Center(
          child: Text('Welcome to your first Flutter app!'),
        ),
      ),
    );
  }
}

Penjelasan:

• Fungsi main() memanggil runApp() dengan parameter MyApp(), yang merupakan widget utama dari aplikasi.

• MyApp adalah widget yang mewarisi dari StatelessWidget, dan memiliki metode build() yang mengembalikan widget MaterialApp.

• Widget MaterialApp adalah dasar dari aplikasi Flutter yang menggunakan Material Design, yang terdiri dari tema dan beberapa widget utama seperti Scaffold, AppBar, dan lain-lain.

• Scaffold adalah widget dasar untuk mengatur tampilan halaman, termasuk AppBar (baris bagian atas) dan body (konten utama aplikasi).

Menjalankan Aplikasi Flutter di Berbagai Platform Pengembangan

Setelah memahami struktur proyek dan kode main.dart, langkah selanjutnya adalah menjalankan aplikasi Flutter kamu di berbagai platform atau lingkungan pengembangan. Berikut ini adalah panduan menjalankan aplikasi di alat pengembangan populer.

1. Visual Studio Code

• Langkah Awal:

  • Buka Visual Studio Code, kemudian pilih File > Open Folder dan arahkan ke folder proyek Flutter kamu.

  • Pastikan kamu sudah menginstal ekstensi Flutter dan Dart di Visual Studio Code untuk dukungan pengembangan Flutter.

• Menjalankan Aplikasi:

  • Tekan F5 atau klik ikon "Run" di sisi kiri editor untuk menjalankan aplikasi.

  • Jika terdapat lebih dari satu perangkat atau emulator yang terhubung, pilih perangkat yang diinginkan.

  • Kamu juga dapat menjalankan aplikasi melalui terminal dengan mengetikkan perintah flutter run.

• Menggunakan Hot Reload dan Hot Restart:

  • Hot Reload: Tekan Ctrl + S untuk menerapkan perubahan kode ke aplikasi yang berjalan tanpa kehilangan status aplikasi.

  • Hot Restart: Tekan Shift + F5 untuk me-restart aplikasi dari awal.

2. Android Studio

• Persiapan Awal:

  • Buka Android Studio, pilih File > Open dan arahkan ke direktori proyek Flutter.

  • Pastikan emulator Android sudah terpasang, atau sambungkan perangkat Android fisik ke komputer.

• Menjalankan Aplikasi:

  • Pilih perangkat emulator atau perangkat fisik dari toolbar, lalu klik tombol "Run" (ikon segitiga hijau).

• Hot Reload dan Hot Restart:

  • Gunakan tombol yang tersedia di toolbar Android Studio untuk menjalankan hot reload atau hot restart, atau tekan shortcut keyboard yang sesuai.

3. Menggunakan Terminal atau Command Line

• Menavigasi ke Direktori Proyek:

  • Buka terminal atau command line, kemudian arahkan ke direktori proyek Flutter kamu.

• Menjalankan Aplikasi:

  • Ketik flutter run untuk menjalankan aplikasi di perangkat atau emulator yang terhubung.

• Hot Reload dan Hot Restart:

  • Saat aplikasi berjalan, ketik r untuk melakukan hot reload, atau R untuk hot restart.

Perbedaan Hot Reload, Hot Restart, dan Full Restart

• Hot Reload memungkinkan pengembang untuk menerapkan perubahan kode dengan cepat tanpa kehilangan status aplikasi. Misalnya, jika kamu sedang berada di halaman tertentu, perubahan kode akan diterapkan tanpa harus kembali ke halaman utama.

• Hot Restart me-restart aplikasi dari awal, dan status aplikasi saat ini akan hilang. Cocok digunakan untuk menguji perubahan signifikan atau kode yang berkaitan dengan inisialisasi.

• Full Restart mengkompilasi ulang seluruh aplikasi dan dimulai dari awal. Ini dapat dilakukan dengan menghentikan aplikasi yang berjalan dan menjalankannya kembali.

Tips Pengembangan Flutter

• Susun Struktur Proyek dengan Baik: Mengelompokkan kode ke dalam folder berdasarkan fungsionalitas akan memudahkan pengelolaan dan pemeliharaan.

• Gunakan flutter doctor untuk Memeriksa Konfigurasi: Jalankan flutter doctor di terminal untuk memastikan bahwa semua dependensi dan alat pengembangan telah terpasang dengan benar.

• Emulator atau Perangkat Fisik?: Untuk performa lebih baik saat pengembangan, terutama saat menguji animasi atau fungsi berat lainnya, disarankan untuk menggunakan perangkat fisik daripada emulator.

Dengan pemahaman yang lebih mendalam tentang struktur proyek Flutter dan berbagai cara menjalankan aplikasi di berbagai alat pengembangan, kamu akan lebih siap dalam membangun aplikasi mobile yang menarik dan responsif. Selamat mencoba dan terus eksplorasi fitur-fitur Flutter yang canggih!