CodeMarket - Marketplace Source Code Terbaik

Flutter adalah framework open source dari Google yang digunakan untuk membangun aplikasi Android, iOS, Web, dan Desktop dari satu basis kode (single codebase). Salah satu langkah pertama untuk mengenal Flutter adalah membuat aplikasi sederhana Hello World.

Pada tutorial ini, kita akan belajar cara membuat Hello World di Flutter dengan mudah.

1. Persiapan Awal

Sebelum mulai, pastikan Anda sudah:

Menginstal Flutter SDK
Menginstal Android Studio atau VS Code
Menginstal Android Emulator atau menyiapkan perangkat fisik
Menjalankan perintah berikut untuk memastikan Flutter siap:

Pastikan tidak ada error penting sebelum lanjut.

2. Membuat Project Flutter Baru

Buka terminal atau command prompt, lalu jalankan perintah:

Masuk ke folder project:

Buka project tersebut menggunakan editor favorit (VS Code atau Android Studio).

3. Mengenal Struktur Project Flutter

Beberapa folder penting yang perlu diketahui:

lib/ → berisi kode utama aplikasi
lib/main.dart → file utama aplikasi Flutter
pubspec.yaml → konfigurasi project dan dependency

Untuk membuat Hello World, kita hanya fokus pada file main.dart.

4. Membuat Hello World di Flutter

Buka file lib/main.dart, lalu ubah isinya menjadi 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: 24),

),

),

),

);

}

5. Penjelasan Kode Singkat

runApp() → menjalankan aplikasi Flutter
MaterialApp → komponen dasar aplikasi Flutter
Scaffold → kerangka tampilan aplikasi
Center → memposisikan widget ke tengah
Text → menampilkan tulisan Hello World

6. Menjalankan Aplikasi

Jalankan emulator atau hubungkan perangkat Android, lalu jalankan perintah:

Jika berhasil, layar aplikasi akan menampilkan teks Hello World di tengah layar.

7. Tips Tambahan

Gunakan Hot Reload (Ctrl + S) untuk melihat perubahan secara langsung
Ubah teks atau ukuran font untuk mencoba fitur Flutter
Biasakan membaca error log jika aplikasi tidak berjalan

Kesimpulan

Membuat Hello World di Flutter sangat mudah dan menjadi langkah awal yang penting untuk memahami konsep dasar Flutter. Dengan satu file sederhana, kita sudah bisa menjalankan aplikasi lintas platform.

Langkah selanjutnya setelah ini adalah mempelajari:

Widget dasar Flutter
Layout (Row, Column, Container)
Navigasi antar halaman

Membuat Hello World di Flutter