Tutorial Flutter dasar Part 3

pada tanggal

 




Berikut adalah langkah-langkah untuk mulai membangun aplikasi menggunakan Flutter, mulai dari pengaturan lingkungan hingga membuat aplikasi sederhana dan memahami dasar-dasar widget serta layout.

1. Setup Lingkungan Pengembangan

Untuk memulai pengembangan Flutter, kamu perlu menyiapkan lingkungan pengembangan yang mendukung Flutter. Berikut langkah-langkahnya:

a. Install Flutter SDK

  1. Unduh Flutter SDK dari situs resmi Flutter: Flutter.dev.
  2. Ekstrak file Flutter dan tambahkan folder flutter/bin ke dalam PATH sistem agar bisa diakses dari terminal/command prompt.

b. Install Editor

Kamu bisa memilih editor yang nyaman, dua yang paling umum adalah:

  1. Android Studio: Lengkap dengan emulator bawaan dan pengaturan Flutter yang mudah.
  2. Visual Studio Code (VS Code): Ringan dan didukung oleh plugin Flutter dan Dart.

c. Install Plugin Flutter & Dart

  1. Android Studio:
    • Buka Android Studio, pergi ke Settings/Preferences > Plugins, cari Flutter, dan instal.
    • Setelah menginstal Flutter plugin, Dart plugin akan otomatis terinstal.
  2. Visual Studio Code:
    • Buka VS Code, pergi ke Extensions (Ctrl+Shift+X), cari Flutter, dan instal. Ini akan otomatis menginstal plugin Dart.

d. Setup Emulator/Perangkat

  1. Jika menggunakan Android Studio, kamu bisa membuat emulator Android melalui AVD Manager.
  2. Jika menggunakan perangkat fisik (Android/iOS), aktifkan USB Debugging dan hubungkan perangkatmu dengan komputer.

e. Verifikasi Instalasi

Pastikan semuanya telah terpasang dengan benar dengan menjalankan perintah berikut di terminal:

flutter doctor

Ini akan menampilkan status dari setup Flutter, dan menunjukkan apa yang perlu diperbaiki (jika ada).

2. Membuat Aplikasi Sederhana (Hello World)

Setelah setup lingkungan selesai, kamu siap membuat aplikasi pertama menggunakan Flutter. Aplikasi paling dasar adalah "Hello World".

a. Membuat Project Baru

Di terminal, jalankan perintah berikut untuk membuat aplikasi baru:

flutter create my_first_app

Ini akan membuat struktur folder aplikasi Flutter.

b. Menjalankan Aplikasi

Masuk ke folder proyek yang baru saja dibuat:
cd my_first_app

Jalankan aplikasi dengan perintah:
flutter run

Jika emulator sudah diaktifkan atau perangkat fisik terhubung, aplikasi akan berjalan dan menampilkan aplikasi default Flutter di perangkatmu.

c. Modifikasi Aplikasi Hello World

Buka file lib/main.dart dan ubah seperti berikut:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello Flutter!'),
        ),
        body: Center(
          child: Text('Hello World!'),
        ),
      ),
    );
  }
}

Jalankan kembali aplikasi dengan flutter run, dan kamu akan melihat teks "Hello World!" di layar.

3. Memahami Widget

Widget adalah elemen dasar dalam Flutter. Semua komponen UI di Flutter adalah widget. Widget dapat berupa Stateless Widget atau Stateful Widget.

  • Stateless Widget: Widget yang tidak berubah setelah pertama kali ditampilkan.
  • Stateful Widget: Widget yang dapat berubah-ubah selama masa hidupnya (misalnya, ketika pengguna berinteraksi dengan aplikasi).

Contoh Stateless Widget:

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Stateless Widget Example'),
        ),
        body: Center(
          child: Text('This is a stateless widget'),
        ),
      ),
    );
  }
}

4. Layout di Flutter

Layout di Flutter dibuat dengan menggunakan widget. Berikut adalah beberapa widget yang sering digunakan untuk membangun layout:

a. Row dan Column

  • Row: Untuk menyusun widget secara horizontal.
  • Column: Untuk menyusun widget secara vertikal.

Contoh Layout Sederhana Menggunakan Row dan Column:


class MyLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Layout Example')),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text('Ini adalah Column'),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('Row 1'),
              SizedBox(width: 20), // Spasi antar widget
              Text('Row 2'),
            ],
          ),
        ],
      ),
    );
  }
}

b. Container

Container adalah widget serbaguna yang digunakan untuk menyusun widget lain di dalamnya, memberikan padding, margin, warna, ukuran, dan masih banyak lagi.

Contoh Penggunaan Container:

class MyContainerApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          padding: EdgeInsets.all(20.0),
          margin: EdgeInsets.all(10.0),
          color: Colors.blue,
          child: Text('Ini adalah Container'),
        ),
      ),
    );
  }
}

c. Stack dan Positioned

  • Stack: Menyusun widget di atas satu sama lain.
  • Positioned: Mengatur posisi widget di dalam Stack.

Contoh Penggunaan Stack:

class MyStackApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Container(
            color: Colors.blue,
            width: 100,
            height: 100,
          ),
          Positioned(
            top: 50,
            left: 50,
            child: Container(
              color: Colors.red,
              width: 100,
              height: 100,
            ),
          ),
        ],
      ),
    );
  }
}

5. Responsive Layout

Untuk membuat layout yang responsif, kamu bisa menggunakan widget seperti Expanded, Flexible, dan menggunakan MediaQuery untuk mendapatkan ukuran layar.

Contoh Menggunakan Expanded:

class MyResponsiveApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(
            child: Container(
              color: Colors.blue,
            ),
          ),
          Expanded(
            child: Container(
              color: Colors.green,
            ),
          ),
        ],
      ),
    );
  }
}

Dengan Expanded, widget secara otomatis akan menyesuaikan ukurannya berdasarkan ruang yang tersedia.
 


 

Komentar

Posting Komentar