Pertemuan 1: Pendahuluan Flutter dan Dart

Daftar Isi

• 1. Konsep Pemrograman Mobile & Cross-Platform
• 2. Mengenal Flutter & Mengapa Menggunakan Flutter
• 3. Dasar-Dasar Bahasa Pemrograman Dart
• 4. Instalasi & Struktur Project Flutter

1. Konsep Pemrograman Mobile & Cross-Platform

Pengembangan aplikasi mobile secara umum terbagi menjadi dua pendekatan utama:

1. Native Development: Menggunakan bahasa resmi platform (Java/Kotlin untuk Android, Swift/Objective-C untuk iOS). Memberikan performa maksimal tetapi membutuhkan dua codebase berbeda.
2. Cross-Platform Development: Memungkinkan pengembang menulis satu codebase tunggal yang dapat dijalankan di berbagai platform (Android, iOS, Web, Desktop). Contoh framework: Flutter, React Native.

2. Mengenal Flutter & Mengapa Menggunakan Flutter

Flutter adalah open-source UI software development kit yang diciptakan oleh Google untuk membangun aplikasi aplikasi terkompilasi secara native untuk mobile, web, dan desktop dari satu codebase.

Keunggulan Utama Flutter:

• Hot Reload & Hot Restart: Perubahan kode dapat langsung terlihat pada emulator/perangkat dalam hitungan detik tanpa kehilangan state aplikasi.
• Single Codebase: Cukup menulis satu kode Dart untuk Android dan iOS.
• High Performance: Menggunakan mesin rendering Skia/Impeller sehingga tidak memerlukan javascript bridge.
• Rich & Customizable Widgets: Menyediakan komponen UI sesuai standar Material Design (Android) dan Cupertino (iOS).

3. Dasar-Dasar Bahasa Pemrograman Dart

Flutter menggunakan bahasa Dart, yang juga dikembangkan oleh Google. Dart bersifat object-oriented, strongly typed, dan mendukung fitur modern seperti null safety.

void main() {
  String namaMataKuliah = "Mobile Multimedia Solution";
  int pertemuan = 1;
  bool isFlutterFun = true;

  print("Selamat Datang di $namaMataKuliah - Pertemuan $pertemuan");

  if (isFlutterFun) {
    print("Flutter sangat menyenangkan!");
  }
}

4. Instalasi & Struktur Project Flutter

File & Folder Utama Project Flutter:

• lib/main.dart: Berkas utama titik masuk (entry point) aplikasi Flutter.
• pubspec.yaml: Berkas konfigurasi project, dependency (package), serta aset (gambar, font).
• android/ & ios/: Folder spesifik platform native.
• build/: Folder output kompilasi aplikasi.

graph TD
    A[Project Flutter Root] --> B[lib/]
    A --> C[pubspec.yaml]
    A --> D[android/]
    A --> E[ios/]
    B --> F[main.dart]

Pertemuan 2: Widget Dasar

Daftar Isi

• 1. Konsep Everything is a Widget
• 2. Widget Output & Media (Text, Image, Icon)
• 3. Widget Layout Basic (Container, Row, Column)
• 4. Action Buttons (ElevatedButton, TextButton, IconButton)

1. Konsep Everything is a Widget

Di dalam Flutter, prinsip utamanya adalah "Everything is a Widget". Tampilan UI, layout, spasi, hingga tema diatur menggunakan komponen yang dinamakan Widget.

Ada dua jenis kategori utama widget berdasarkan state-nya:

• StatelessWidget: Widget yang tampilannya statis dan tidak berubah setelah di-build.
• StatefulWidget: Widget yang tataletaknya atau datanya dapat berubah secara dinamis selama aplikasi berjalan.

2. Widget Output & Media (Text, Image, Icon)

Text Widget

Digunakan untuk menampilkan string teks dengan berbagai style.

Text(
  'Halo Flutter!',
  style: TextStyle(
    fontSize: 20,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
  ),
)

Image Widget

Digunakan untuk menampilkan gambar dari aset lokal maupun internet.

Image.network('https://picsum.photos/200')
Image.asset('assets/images/logo.png')

3. Widget Layout Basic (Container, Row, Column)

Container

Widget serbaguna yang menggabungkan fitur sizing, padding, margin, dan dekorasi warna/border.

Container(
  padding: EdgeInsets.all(16.0),
  decoration: BoxDecoration(
    color: Colors.amber,
    borderRadius: BorderRadius.circular(8.0),
  ),
  child: Text('Di dalam Container'),
)

Row & Column

• Row: Menyusun widget secara horizontal (menyamping).
• Column: Menyusun widget secara vertikal (ke bawah).

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Text('Judul Utama'),
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        Icon(Icons.star),
        Icon(Icons.favorite),
      ],
    ),
  ],
)

4. Action Buttons (ElevatedButton, TextButton, IconButton)

Flutter menyediakan berbagai pilihan tombol untuk menerima aksi pengguna (tap).

ElevatedButton(
  onPressed: () {
    print('Tombol Ditekan!');
  },
  child: Text('Simpan Data'),
)

Pertemuan 3: Layout & Styling

Daftar Isi

• 1. Pengaturan Spasi & Alignment
• 2. Layout Fleksibel (Expanded & Flexible)
• 3. Menampilkan List Data (ListView & GridView)
• 4. Visual Styling dengan BoxDecoration

1. Pengaturan Spasi & Alignment

• Padding: Memberikan spasi di dalam elemen.
• SizedBox: Memberikan jarak dengan ukuran lebar/tinggi yang pasti antar widget.
• Center / Align: Mengatur posisi widget di tengah atau di sudut tertentu.

SizedBox(height: 16.0); // Memberikan spasi vertikal 16px

2. Layout Fleksibel (Expanded & Flexible)

Widget Expanded memaksa anak widget untuk mengisi seluruh ruang kosong yang tersisa dalam Row atau Column.

Row(
  children: [
    Container(color: Colors.red, width: 50),
    Expanded(
      child: Container(color: Colors.blue), // Mengisi sisa ruang
    ),
  ],
)

3. Menampilkan List Data (ListView & GridView)

ListView.builder

Digunakan untuk menampilkan daftar data panjang secara efisien (lazy loading).

ListView.builder(
  itemCount: 20,
  itemBuilder: (context, index) {
    return ListTile(
      leading: Icon(Icons.person),
      title: Text('Pengguna $index'),
      subtitle: Text('Deskripsi pengguna ke-$index'),
    );
  },
)

4. Visual Styling dengan BoxDecoration

BoxDecoration digunakan pada Container untuk menambahkan warna gradien, bayangan (shadow), dan sudut tumpul (border radius).

Container(
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(12),
    boxShadow: [
      BoxShadow(
        color: Colors.black12,
        blurRadius: 6,
        spreadRadius: 2,
      ),
    ],
  ),
)