Flutter (Multiplatform)

Flutter (multiplatform) 

Cara Instal dan Menjalankan Flutter Command Line di Windows

Sebelum mulai, pastikan kamu sudah menginstall Git dan Java JDK (opsional). Flutter memerlukan Git untuk mengunduh dependensi dan mengelola SDK-nya.

Untuk memeriksa apakah Git sudah terinstal, jalankan perintah berikut di Command Prompt (CMD): 

git --version

Langkah-Langkah Instalasi

1. Kunjungi Situs Resmi Flutter

    Buka situs resmi Flutter di https://flutter.dev.

    Klik tombol Get Started di pojok kanan atas.

    Tampilan halaman utama Flutter

2. Buka Halaman Instalasi Manual

    Pilih menu Install Flutter manually dan pilih sistem operasi Windows.
    Di halaman ini dijelaskan bahwa kamu perlu
  • Menginstal Git for Windows
  • Menyiapkan editor seperti VS Code atau Android Studio
    Halaman panduan instalasi Flutter untuk Windows



3. Unduh Flutter SDK

    Klik tautan flutter_windows_x.x.x-stable.zip (versi terbaru).
    Simpan file di direktori yang mudah diakses, misalnya:

        D:\Flutter

4. Ekstrak dan Pindahkan Folder Flutter

    Ekstrak file .zip hasil unduhan.
        flutter_windows_3.35.7-stable

    Pindahkan hasil ekstraksi ke lokasi permanen, misalnya:
        D:\flutter


5. Tambahkan Flutter ke Environment Variables
  1. Tekan Win + S, ketik Edit the system environment variables.
  2. Klik tombol Environment Variables.
  3. Pada bagian User Variables, pilih Path → Edit → New → tempelkan path berikut: D:\flutter\bin
  4. Lakukan hal yang sama di System Variables.
  5. Klik OK di semua jendela untuk menyimpan.
user

system

6. Verifikasi Instalasi Flutter

    Buka Command Prompt (CMD) dan jalankan:

        flutter --version

    Jika muncul versi Flutter beserta informasi Dart dan OS, berarti instalasi berhasil.

Konfigurasi Flutter di Visual Studio Code

7. Instal Ekstensi Flutter dan Dart

    Buka VS Code → tekan Ctrl + Shift + X → buka tab Extensions.
  • Instal Flutter oleh Dart Code
  • Instal Dart (biasanya otomatis setelah Flutter terpasang)
Ekstensi ini menambahkan dukungan syntax highlighting, debugging, dan integrasi dengan Flutter SDK.

8. Buat Proyek Flutter Baru via VS Code

        Tekan Ctrl + Shift + P


        Ketik “Flutter” → pilih Flutter: New Project


        Pilih template Application
   

        Tentukan lokasi penyimpanan (misalnya D:\PBP\TUGAS\Flutter)


        Beri nama proyek, misalnya flutter_application1
   

        Hasil

9. Buat Proyek Flutter Lewat Command Prompt (Alternatif)

    Kamu juga bisa membuat proyek lewat CMD dengan perintah:

        cd D:\PBP\TUGAS\Flutter
        flutter create flutter1

    Proses ini akan membuat proyek lengkap dan menampilkan pesan:

        All done!
        Your application code is in flutter1\lib\main.dart

10. Buka File main.dart

        Masuk ke folder lib, lalu buka file main.dart.
        File ini adalah titik awal aplikasi Flutter.

11. Edit Isi Program

    Ubah kode menjadi sederhana seperti 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 const MaterialApp(
              home: Scaffold(
                body: Center(
                  child: Text(
                    'Hello, World!',
                    style: TextStyle(fontSize: 30),
                  ),
                ),
              ),
            );
          }
        }
    Kode ini akan menampilkan teks “Hello, World!” di tengah layar.

12. Jalankan Proyek Flutter

    Buka terminal di VS Code dan ketik:

        flutter run

    Flutter akan menampilkan daftar device yang tersedia:
  • Windows (desktop)
  • Chrome (web)
  • Edge (web)
    Ketik angka 2 untuk memilih Chrome dan tunggu hingga aplikasi dijalankan. (opsional)

13. Lihat Hasil di Browser

    Setelah proses selesai, browser Chrome akan terbuka otomatis menampilkan halaman:

        Hello, World!

    Tanda “DEBUG” di pojok kanan atas menunjukkan bahwa aplikasi berjalan dalam mode pengembangan.

Komentar

Postingan populer dari blog ini

KOTLIN MULTIPLATFORM MOBILE (KMM)