Mobile Application Development
Flutter

Flutter: Panduan Lengkap dari Instalasi hingga Hello World

Flutter adalah UI toolkit open-source yang dikembangkan oleh Google untuk membangun aplikasi native yang indah dan performa tinggi dari satu codebase. Dengan Flutter, kamu bisa membuat aplikasi untuk mobile (Android & iOS), web, desktop (Windows, macOS, Linux), dan bahkan embedded devices.

Apa itu Flutter?

Flutter menggunakan bahasa pemrograman Dart dan menyediakan widget-widget yang kaya untuk membangun UI yang beautiful dan responsive. Berbeda dengan React Native yang menggunakan native components, Flutter menggunakan rendering engine sendiri (Skia) untuk menggambar setiap pixel di layar, menghasilkan performa yang konsisten di semua platform.

Keunggulan Flutter:

  • Single Codebase: Satu code untuk semua platform (mobile, web, desktop)
  • Beautiful UI: Rich widget library dengan Material Design dan Cupertino
  • Fast Development: Hot reload dan hot restart untuk iterasi cepat
  • Native Performance: Compiled ke native ARM code
  • Expressive UI: Declarative UI paradigm yang intuitive
  • Growing Ecosystem: Packages dan plugins yang terus bertambah

Kapan Menggunakan Flutter:

  • Ingin develop untuk multiple platforms dengan satu codebase
  • Prioritas pada UI/UX yang custom dan beautiful
  • Butuh performa yang konsisten across platforms
  • Team belum ada yang expert di native development
  • Butuh development speed yang tinggi

Persiapan Sistem

Sebelum memulai, pastikan sistem kamu memenuhi requirements:

Untuk Windows:

  • Windows 10 atau 11 (64-bit)
  • Minimum 8 GB RAM (16 GB direkomendasikan)
  • 2.8 GB disk space (tidak termasuk IDE/tools)
  • Git for Windows
  • Android Studio atau VS Code dengan Flutter extension

Untuk macOS:

  • macOS 10.14 (Mojave) atau lebih baru
  • Minimum 8 GB RAM (16 GB direkomendasikan)
  • 2.8 GB disk space
  • Xcode (untuk iOS development)
  • Android Studio (untuk Android development)
  • Git
  • CocoaPods

Untuk Linux:

  • Ubuntu 20.04 LTS atau newer, Debian 11 atau newer
  • Minimum 8 GB RAM
  • 2.8 GB disk space
  • Git
  • Android Studio atau VS Code

Bagian 1: Instalasi Flutter SDK

Langkah 1: Download Flutter SDK

Buka browser dan kunjungi https://flutter.dev (opens in a new tab).

Flutter homepage dengan Get Started button

Klik "Get started" atau navigate ke flutter.dev/docs/get-started/install (opens in a new tab).

Pilih operating system kamu (Windows, macOS, Linux, atau ChromeOS).

Halaman instalasi Flutter dengan pilihan OS

Langkah 2: Download dan Extract (Windows)

Windows:

  1. Download Flutter SDK (file .zip, sekitar 500-800 MB)
  2. Extract ke lokasi yang diinginkan, misalnya:
    • C:\src\flutter (recommended)
    • JANGAN extract ke folder yang memerlukan elevated privileges seperti C:\Program Files\

Windows Explorer menampilkan extracted Flutter SDK

  1. Locate flutter\bin folder - ini berisi executable Flutter

Langkah 2a: Download dan Extract (macOS)

macOS:

Download Flutter SDK:

cd ~/development
curl -O https://storage.googleapis.com/flutter_infra_release/releases/stable/macos/flutter_macos_arm64_3.16.5-stable.zip
 
# Untuk Intel Mac, download versi x64:
# curl -O https://storage.googleapis.com/flutter_infra_release/releases/stable/macos/flutter_macos_3.16.5-stable.zip

Extract:

unzip flutter_macos_arm64_3.16.5-stable.zip

Terminal macOS menampilkan extract Flutter SDK

Langkah 2b: Download dan Extract (Linux)

Linux:

cd ~/development
wget https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_3.16.5-stable.tar.xz
tar xf flutter_linux_3.16.5-stable.tar.xz

Terminal Linux menampilkan extract Flutter SDK

Langkah 3: Update PATH Environment Variable

Flutter command-line tools perlu ditambahkan ke PATH.

Windows:

  1. Buka "Edit environment variables for your account" dari Start menu
  2. Di "User variables", pilih "Path" dan klik "Edit"
  3. Klik "New" dan tambahkan full path ke flutter\bin
    • Contoh: C:\src\flutter\bin

Windows Environment Variables dialog

  1. Klik "OK" untuk save

macOS/Linux:

Edit file .zshrc atau .bashrc:

# Buka editor
nano ~/.zshrc
 
# Tambahkan di akhir file:
export PATH="$PATH:$HOME/development/flutter/bin"
 
# Save (Ctrl+O, Enter, Ctrl+X)
 
# Reload configuration
source ~/.zshrc

Terminal editor menampilkan PATH configuration

Langkah 4: Verify Installation

Buka terminal baru dan jalankan:

flutter --version

Terminal menampilkan Flutter version

Output akan menampilkan versi Flutter, Dart, dan DevTools:

Flutter 3.16.5 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 78666c8dc5 (X weeks ago) • 2023-12-19 16:14:14 -0800
Engine • revision 3f3e560236
Tools • Dart 3.2.3 • DevTools 2.28.4

Langkah 5: Run Flutter Doctor

Flutter menyediakan tool diagnosis untuk check environment:

flutter doctor

Terminal menampilkan output Flutter doctor

Flutter doctor akan check:

  • ✓ Flutter SDK installed
  • ✓ Dart SDK installed
  • ✗ Android toolchain (akan disetup nanti)
  • ✗ Xcode (macOS only)
  • ✗ IDE (Android Studio/VS Code)
  • ✗ Connected devices

Kita akan fix semua issues step by step.

Bagian 2: Setup Android Development

Langkah 6: Install Android Studio

Download dan install Android Studio dari developer.android.com/studio (opens in a new tab).

Android Studio download page

Follow instalasi wizard seperti yang dijelaskan di tutorial Android Studio sebelumnya.

Langkah 7: Install Flutter Plugin di Android Studio

  1. Buka Android Studio
  2. Buka Plugins (Windows/Linux: File > Settings > Plugins, macOS: Android Studio > Preferences > Plugins)
  3. Search "Flutter"
  4. Klik "Install"

Android Studio plugins menampilkan Flutter plugin

Plugin Flutter akan otomatis install plugin Dart juga.

  1. Restart Android Studio setelah instalasi selesai

Langkah 8: Configure Android SDK

Pastikan Android SDK terinstall dengan lengkap:

  1. Buka SDK Manager di Android Studio
  2. Di SDK Platforms tab:
    • Centang Android 13.0 (Tiramisu) - API Level 33
    • Atau API level yang lebih baru

SDK Manager menampilkan Android platforms

  1. Di SDK Tools tab, pastikan terinstall:
    • Android SDK Build-Tools
    • Android SDK Command-line Tools
    • Android SDK Platform-Tools
    • Android Emulator

SDK Manager menampilkan SDK tools

  1. Klik "Apply" untuk install/update

Langkah 9: Accept Android Licenses

Run command untuk accept Android licenses:

flutter doctor --android-licenses

Terminal menampilkan Android license agreement

Ketik y untuk accept semua licenses.

Langkah 10: Verify Android Setup

Run Flutter doctor lagi:

flutter doctor

Flutter doctor menampilkan Android toolchain terinstall

Android toolchain sekarang harus menampilkan checkmark ✓.

Bagian 3: Setup iOS Development (macOS Only)

Langkah 11: Install Xcode

Jika belum install, download Xcode dari Mac App Store.

Mac App Store menampilkan Xcode

Setelah install, jalankan:

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch

Accept Xcode license:

sudo xcodebuild -license accept

Langkah 12: Install CocoaPods

Flutter menggunakan CocoaPods untuk manage iOS dependencies:

sudo gem install cocoapods

Terminal menampilkan instalasi CocoaPods

Verify:

pod --version

Langkah 13: Setup iOS Simulator

List available simulators:

xcrun simctl list devices

Jika tidak ada simulator, buka Xcode:

  1. Xcode > Settings > Platforms
  2. Klik + untuk install iOS simulator
  3. Download iOS simulator runtime

Xcode Platforms menampilkan iOS simulators

Langkah 14: Verify iOS Setup

flutter doctor

Flutter doctor menampilkan Xcode terinstall

Xcode section sekarang harus ✓.

Bagian 4: Setup Editor (VS Code)

Meskipun Android Studio bisa digunakan, banyak Flutter developers prefer VS Code karena lebih ringan.

Langkah 15: Install VS Code

Download dari code.visualstudio.com (opens in a new tab).

VS Code download page

Install sesuai OS kamu.

Langkah 16: Install Flutter Extension

  1. Buka VS Code
  2. Buka Extensions (Cmd/Ctrl + Shift + X)
  3. Search "Flutter"
  4. Install "Flutter" extension (by Dart Code)

VS Code extensions menampilkan Flutter extension

Extension Flutter akan otomatis install Dart extension juga.

Langkah 17: Verify Setup Complete

Run Flutter doctor final check:

flutter doctor -v

Flutter doctor verbose output menampilkan semua setup lengkap

Semua items penting harus ✓:

  • ✓ Flutter (Channel stable)
  • ✓ Android toolchain
  • ✓ Xcode (macOS only)
  • ✓ VS Code atau Android Studio
  • ✓ Connected device (akan disetup di langkah berikutnya)

Bagian 5: Membuat Project Flutter

Langkah 18: Create New Flutter Project

Buka terminal dan navigate ke folder projects:

cd ~/Documents
flutter create hello_world

Terminal menampilkan proses create Flutter project

Command ini akan:

  1. Create project structure
  2. Generate boilerplate code
  3. Setup dependencies
  4. Initialize git repository

Proses memakan waktu 1-2 menit.

Output:

Creating project hello_world...
  hello_world/android/... (created)
  hello_world/ios/... (created)
  hello_world/lib/... (created)
  hello_world/test/... (created)
Running "flutter pub get" in hello_world...
Wrote 127 files.

All done!
In order to run your application, type:

  $ cd hello_world
  $ flutter run

Langkah 19: Open Project di VS Code

cd hello_world
code .

VS Code akan membuka project.

VS Code menampilkan Flutter project structure

Struktur Project:

hello_world/
├── android/              # Android native project
├── ios/                  # iOS native project
├── lib/                  # Dart code (main source)
│   └── main.dart         # Entry point
├── test/                 # Test files
├── web/                  # Web support files
├── windows/              # Windows desktop files (jika enabled)
├── linux/                # Linux desktop files (jika enabled)
├── macos/                # macOS desktop files (jika enabled)
├── .gitignore
├── analysis_options.yaml # Linter configuration
├── pubspec.yaml          # Dependencies dan assets
└── README.md

Langkah 20: Explore main.dart

Buka file lib/main.dart.

VS Code editor menampilkan main.dart

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),
      ),
    );
  }
}

Penjelasan Code:

  • main(): Entry point aplikasi
  • runApp(): Function untuk run Flutter app
  • MyApp: Root widget aplikasi (StatelessWidget)
  • MaterialApp: Widget untuk Material Design app
  • MyHomePage: StatefulWidget dengan state
  • Scaffold: Basic layout structure (AppBar, Body, FloatingActionButton)
  • setState(): Update state dan trigger rebuild

Langkah 21: Simplify untuk Hello World

Replace seluruh content lib/main.dart dengan:

import 'package:flutter/material.dart';
 
void main() {
  runApp(const HelloWorldApp());
}
 
class HelloWorldApp extends StatelessWidget {
  const HelloWorldApp({super.key});
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello World',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        useMaterial3: true,
      ),
      home: const HelloWorldScreen(),
    );
  }
}
 
class HelloWorldScreen extends StatelessWidget {
  const HelloWorldScreen({super.key});
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue.shade700,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Icon(
              Icons.flutter_dash,
              size: 100,
              color: Colors.white,
            ),
            const SizedBox(height: 24),
            const Text(
              'Hello World!',
              style: TextStyle(
                fontSize: 48,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
            const SizedBox(height: 16),
            const Text(
              'Selamat datang di Flutter Development',
              style: TextStyle(
                fontSize: 20,
                color: Colors.white,
              ),
              textAlign: TextAlign.center,
            ),
            const SizedBox(height: 8),
            const Text(
              'Build beautiful apps untuk semua platform',
              style: TextStyle(
                fontSize: 16,
                color: Colors.white70,
              ),
              textAlign: TextAlign.center,
            ),
          ],
        ),
      ),
    );
  }
}

VS Code menampilkan simplified main.dart

Save file (Cmd/Ctrl + S).

Bagian 6: Running di Android

Langkah 22: Start Android Emulator

Buka Android Studio dan launch AVD, atau via command line:

flutter emulators

Terminal menampilkan list emulators

Launch emulator:

flutter emulators --launch <emulator_id>

Atau manual dari Android Studio AVD Manager.

Android emulator running

Langkah 23: Run Flutter App

Di VS Code, klik Run > Start Debugging (F5), atau via terminal:

flutter run

Terminal menampilkan Flutter build process

Flutter akan:

  1. Build Android app
  2. Install ke emulator
  3. Launch app
  4. Enable hot reload

Build pertama memakan waktu beberapa menit. Build berikutnya jauh lebih cepat.

Langkah 24: App Running di Android

Aplikasi akan launch di emulator.

Flutter Hello World app running di Android

Selamat! Aplikasi Flutter pertama kamu berjalan di Android dengan:

  • Background biru
  • Flutter Dash icon
  • "Hello World!" text
  • Subtitle dan description

Langkah 25: Test Hot Reload

Salah satu fitur powerful Flutter adalah Hot Reload.

Di main.dart, ubah text:

const Text(
  'Hello Flutter!',  // Changed
  style: TextStyle(
    fontSize: 48,
    fontWeight: FontWeight.bold,
    color: Colors.white,
  ),
),

Save file (Cmd/Ctrl + S) atau press R di terminal.

App di emulator dengan text yang diupdate

Perubahan langsung terlihat dalam hitungan detik tanpa restart app!

Hot Reload Shortcuts:

  • r: Hot reload
  • R: Hot restart (full restart)
  • h: List available commands
  • q: Quit

Langkah 26: VS Code Flutter Commands

Di VS Code, buka Command Palette (Cmd/Ctrl + Shift + P):

VS Code Command Palette dengan Flutter commands

Useful commands:

  • Flutter: Hot Reload: Reload app
  • Flutter: Hot Restart: Restart app
  • Flutter: Open DevTools: Performance profiling
  • Flutter: Clean Project: Clean build
  • Dart: Add Dependency: Add package

Bagian 7: Running di iOS (macOS Only)

Langkah 27: Open iOS Simulator

open -a Simulator

Simulator app akan launch dengan default iOS device.

iOS Simulator launched

Atau dari Xcode: Xcode > Open Developer Tool > Simulator.

Langkah 28: Run Flutter App di iOS

Di terminal (pastikan di project directory):

flutter run

Flutter akan detect iOS simulator dan build untuk iOS.

Terminal menampilkan Flutter build untuk iOS

Build pertama iOS juga memakan waktu beberapa menit.

Langkah 29: App Running di iOS

Aplikasi akan launch di iOS simulator.

Flutter Hello World app running di iOS

Aplikasi yang sama running di iOS dengan look & feel yang konsisten!

Langkah 30: Test Hot Reload di iOS

Ubah code dan save. Hot reload juga bekerja seamlessly di iOS.

iOS Simulator Shortcuts:

  • Cmd + K: Toggle keyboard
  • Cmd + Shift + H: Home button
  • Cmd + Right/Left: Rotate device

Bagian 8: Running di Physical Devices

Android Physical Device

Langkah 31: Enable Developer Options

Di Android device:

  1. Settings > About Phone
  2. Tap Build Number 7 kali
  3. Back to Settings > Developer Options
  4. Enable USB Debugging

Langkah 32: Connect dan Run

Connect device via USB:

flutter devices

Terminal menampilkan connected devices

Run:

flutter run

Flutter akan install app ke physical device.

Flutter app running di physical Android device

iOS Physical Device

Langkah 33: Configure Signing

Open project di Xcode:

open ios/Runner.xcworkspace

Di Xcode:

  1. Select "Runner" project
  2. Select "Runner" target
  3. Go to "Signing & Capabilities"
  4. Select your Team (Apple ID)

Xcode signing configuration

Langkah 34: Run on Device

Connect iPhone via USB:

flutter devices

Run:

flutter run

Trust developer di device jika diminta.

Flutter app running di physical iPhone

Bagian 9: Flutter Fundamentals

Widgets

Everything in Flutter is a widget. Widgets describe what their view should look like.

StatelessWidget - Immutable widget:

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello');
  }
}

StatefulWidget - Widget dengan mutable state:

class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}
 
class _CounterState extends State<Counter> {
  int count = 0;
 
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Count: $count'),
        ElevatedButton(
          onPressed: () {
            setState(() {
              count++;
            });
          },
          child: Text('Increment'),
        ),
      ],
    );
  }
}

Layout Widgets

Column - Vertical layout:

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)

Row - Horizontal layout:

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Icon(Icons.star),
    Text('Rating'),
    Text('4.5'),
  ],
)

Container - Box model:

Container(
  width: 200,
  height: 100,
  padding: EdgeInsets.all(16),
  margin: EdgeInsets.symmetric(vertical: 8),
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(8),
    boxShadow: [
      BoxShadow(
        color: Colors.black26,
        blurRadius: 4,
        offset: Offset(0, 2),
      ),
    ],
  ),
  child: Text('Hello'),
)

Stack - Layered widgets:

Stack(
  children: [
    Container(color: Colors.blue),
    Positioned(
      top: 20,
      left: 20,
      child: Text('Overlay Text'),
    ),
  ],
)

Material Components

// Button
ElevatedButton(
  onPressed: () {},
  child: Text('Click Me'),
)
 
// Icon Button
IconButton(
  icon: Icon(Icons.favorite),
  onPressed: () {},
)
 
// Text Field
TextField(
  decoration: InputDecoration(
    labelText: 'Name',
    border: OutlineInputBorder(),
  ),
  onChanged: (value) {
    print(value);
  },
)
 
// Card
Card(
  child: Padding(
    padding: EdgeInsets.all(16),
    child: Text('Card Content'),
  ),
)
 
// List Tile
ListTile(
  leading: Icon(Icons.person),
  title: Text('John Doe'),
  subtitle: Text('john@example.com'),
  trailing: Icon(Icons.arrow_forward),
  onTap: () {},
)

Navigation

// Navigate to new screen
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondScreen()),
);
 
// Navigate back
Navigator.pop(context);
 
// Navigate with named routes
Navigator.pushNamed(context, '/second');
 
// Replace current screen
Navigator.pushReplacement(
  context,
  MaterialPageRoute(builder: (context) => NewScreen()),
);

State Management dengan setState

class CounterScreen extends StatefulWidget {
  @override
  _CounterScreenState createState() => _CounterScreenState();
}
 
class _CounterScreenState extends State<CounterScreen> {
  int _counter = 0;
 
  void _increment() {
    setState(() {
      _counter++;
    });
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Counter')),
      body: Center(
        child: Text(
          '$_counter',
          style: TextStyle(fontSize: 48),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _increment,
        child: Icon(Icons.add),
      ),
    );
  }
}

Troubleshooting Common Issues

Issue 1: Flutter Doctor Shows Errors

Error: cmdline-tools component is missing

Solusi:

# Install via Android Studio SDK Manager
# Go to SDK Manager > SDK Tools
# Check "Android SDK Command-line Tools"
# Click Apply

Issue 2: Android Licenses Not Accepted

Error: Android sdkmanager not found

Solusi:

# Set ANDROID_HOME first
export ANDROID_HOME=$HOME/Library/Android/sdk  # macOS/Linux
# Or set in Windows environment variables
 
# Then run
flutter doctor --android-licenses

Issue 3: Gradle Build Failed

Error: Gradle build fails with "Could not resolve"

Solusi:

cd android
./gradlew clean
cd ..
flutter clean
flutter pub get
flutter run

Issue 4: iOS Build Failed - CocoaPods

Error: CocoaPods not installed or failed

Solusi:

# Reinstall pods
cd ios
rm -rf Pods Podfile.lock
pod install
cd ..
flutter clean
flutter run

Issue 5: Hot Reload Not Working

Solusi:

  1. Try hot restart (press R in terminal)
  2. Full restart app
  3. Check for syntax errors
  4. Run flutter clean dan rebuild

Issue 6: Device Not Detected

Solusi:

# Check devices
flutter devices
 
# For Android
adb devices
adb kill-server
adb start-server
 
# For iOS
xcrun simctl list devices

Issue 7: "Waiting for another flutter command to release the startup lock"

Solusi:

# Delete lock file
rm -rf /path/to/flutter/bin/cache/lockfile
 
# Or restart system

Tips dan Best Practices

1. Widget Tree Organization

Break down complex widgets into smaller, reusable widgets:

// Bad - Everything in one widget
class MyScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          // 100 lines of widgets...
        ],
      ),
    );
  }
}
 
// Good - Separated widgets
class MyScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          HeaderWidget(),
          ContentWidget(),
          FooterWidget(),
        ],
      ),
    );
  }
}

2. Use const Constructors

Menggunakan const improves performance:

// Good
const Text('Hello')
const SizedBox(height: 16)
const Icon(Icons.star)
 
// When possible, make custom widgets const
class MyWidget extends StatelessWidget {
  const MyWidget({super.key});  // const constructor
  
  @override
  Widget build(BuildContext context) {
    return const Text('Hello');
  }
}

3. Code Formatting

Use Flutter's built-in formatter:

# Format all Dart files
dart format .
 
# Format specific file
dart format lib/main.dart

Di VS Code, enable format on save:

{
  "editor.formatOnSave": true,
  "[dart]": {
    "editor.formatOnSave": true
  }
}

4. Debugging

Flutter DevTools:

flutter pub global activate devtools
flutter pub global run devtools

Open browser di URL yang ditampilkan untuk access DevTools.

Flutter DevTools dashboard

Debug Prints:

print('Debug message');
debugPrint('Widget tree message');
 
// Print object
debugPrint(myObject.toString());

Flutter Inspector:

Di VS Code atau Android Studio, enable Flutter Inspector untuk visualize widget tree.

Flutter Inspector showing widget tree

5. Performance Tips

  • Use ListView.builder untuk long lists (lazy loading)
  • Avoid expensive operations di build() method
  • Use const constructors
  • Profile app dengan DevTools
  • Minimize widget rebuilds dengan const dan proper state management

6. Package Management

pubspec.yaml manages dependencies:

dependencies:
  flutter:
    sdk: flutter
  http: ^1.1.0
  provider: ^6.1.1
 
dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^3.0.0

Install packages:

flutter pub get

Search packages di pub.dev (opens in a new tab).

7. Assets Management

Add assets di pubspec.yaml:

flutter:
  assets:
    - assets/images/
    - assets/icons/
 
  fonts:
    - family: CustomFont
      fonts:
        - asset: fonts/CustomFont-Regular.ttf
        - asset: fonts/CustomFont-Bold.ttf
          weight: 700

Use assets:

Image.asset('assets/images/logo.png')
 
Text(
  'Hello',
  style: TextStyle(fontFamily: 'CustomFont'),
)

Next Steps

1. Master Flutter Basics

  • All widgets (Material & Cupertino)
  • Layouts dan positioning
  • Handling user input
  • Lists dan grids
  • Images dan assets
  • Navigation dan routing
  • Animations

2. State Management

Pilih state management solution:

Provider (recommended untuk beginners):

flutter pub add provider

Riverpod (modern alternative):

flutter pub add flutter_riverpod

Bloc (scalable architecture):

flutter pub add flutter_bloc

GetX (all-in-one):

flutter pub add get

3. Networking

flutter pub add http
flutter pub add dio  # Alternative dengan more features

Basic HTTP request:

import 'package:http/http.dart' as http;
import 'dart:convert';
 
Future<void> fetchData() async {
  final response = await http.get(
    Uri.parse('https://api.example.com/data'),
  );
  
  if (response.statusCode == 200) {
    final data = jsonDecode(response.body);
    print(data);
  }
}

4. Local Storage

SharedPreferences (simple key-value):

flutter pub add shared_preferences

Hive (fast NoSQL database):

flutter pub add hive flutter pub add hive_flutter

SQLite (relational database):

flutter pub add sqflite

5. Advanced Topics

  • Complex animations (AnimationController, Tween)
  • Custom painters (Canvas)
  • Platform channels (native code)
  • Background tasks
  • Push notifications
  • Maps dan location
  • Camera dan media
  • Firebase integration

6. Testing

// Unit test
test('Counter increments', () {
  final counter = Counter();
  counter.increment();
  expect(counter.value, 1);
});
 
// Widget test
testWidgets('Button shows text', (WidgetTester tester) async {
  await tester.pumpWidget(MyApp());
  expect(find.text('Click Me'), findsOneWidget);
});

Run tests:

flutter test

7. Building for Production

Android:

flutter build apk --release  # APK
flutter build appbundle --release  # AAB (recommended)

iOS:

flutter build ios --release

Web:

flutter build web --release

Desktop:

flutter build windows --release  # Windows
flutter build macos --release    # macOS
flutter build linux --release    # Linux

Resources

Official Documentation

Learning Platforms

Communities

YouTube Channels

Popular Packages

Design Resources

Penutup

Selamat! Kamu telah berhasil setup Flutter development environment dan membuat aplikasi Hello World pertama yang berjalan di Android dan iOS (jika menggunakan macOS). Flutter adalah framework yang sangat powerful dengan kemampuan untuk build aplikasi beautiful untuk multiple platforms dari satu codebase.

Flutter terus berkembang dengan cepat. Google heavily invest in Flutter, dan adoption rate-nya terus meningkat. Banyak perusahaan besar seperti Google, Alibaba, BMW, eBay menggunakan Flutter untuk production apps.

Yang membuat Flutter special:

  1. Fast Development - Hot reload membuat iterasi sangat cepat
  2. Expressive UI - Widget-based architecture sangat flexible
  3. Native Performance - Compiled ke native ARM code
  4. Single Codebase - Satu code untuk semua platform
  5. Growing Community - Ecosystem dan community yang terus berkembang

Kunci untuk master Flutter:

  1. Pahami Dart dengan baik - ini foundation-nya
  2. Think in Widgets - everything is a widget
  3. Practice consistently - build real projects
  4. Learn state management - crucial untuk app yang scalable
  5. Explore packages di pub.dev
  6. Join community - banyak resources dan bantuan tersedia
  7. Build portfolio - showcase your skills

Flutter bukan hanya untuk mobile - dengan Flutter, kamu bisa build untuk web, desktop, dan bahkan embedded devices. Ini adalah true cross-platform framework.

Yang terpenting, enjoy the journey dan have fun creating beautiful apps! Flutter community sangat welcoming untuk beginners, jangan ragu untuk bertanya dan berbagi.

Happy Fluttering!

React NativeKotlin Multiplatform Mobile (KMM)