Flutter 01.

Pengenalan Flutter

Flutter?

Flutter merupakan sebuah “tools” untuk membuat multi aplikasi (android, ios, website, smart tv, dll)
dalam sekali program/coding.

Native cross-platform

Flutter?

SDK(mesin)

Untuk compile code ke mesin native masing-masing platform

Gunanya untuk code-code yang sudah dibuat akan di compile ke masing-masing bahasa pemrograman
seperti android, ios, dll.

Framework
Library
Untuk menggunakan fungsi-fungsi/package yang disediakan flutter.

Disebut sebagai kerangka kerja, di dalam flutter tersedia banyak fungsi/package yang tersedia.

Dalam Flutter menggunakan satu bahasa pemrograman yaitu DART.

Bahasa DART itu sendiri dikembangkan oleh Google yang basis bahasnya object oriented, syntaxnya
mirip dengan bahasa JAVAScript, JAVA, C#.

Flutter
Framework Kerangka Kerja

Flutter DART
Bahasanya
Install Flutter?

[Link]

Yang dibutuhkan:

Flutter SDK

Android Studio

Pilih plugin: Install Flutter dan Dart

Xcode (Mac OS) (Sebagai Editor)

VS Code (Sebagai Editor)

Pilih Extention: Install Flutter dan Dart

Flutter 02. Dart Basic

Buka [Link] di browser masing-masing.

Struktur dasar pemrograman Dart pada dasarnya mengikuti aturan yang mirip dengan bahasa
pemrograman lain yang berorientasi objek, seperti Java atau C#. Dart adalah bahasa yang dirancang oleh
Google dan sering digunakan untuk membangun aplikasi mobile menggunakan Flutter. Untuk memahami
struktur dasar kode Dart, berikut adalah beberapa elemen utama:

1. Komentar

Komentar digunakan untuk mendokumentasikan kode atau menjelaskan fungsi-fungsi tertentu di dalam
kode. Komentar ini tidak akan dijalankan oleh program.

 Komentar satu baris: menggunakan //.

 Komentar multi-baris: menggunakan /* */.

 Komentar dokumentasi: menggunakan /// untuk mendokumentasikan fungsi atau kelas.

// Ini adalah komentar satu baris

/*

Ini adalah komentar multi-baris

*/
/// Ini adalah komentar dokumentasi

2. Fungsi main()

Fungsi main() adalah titik masuk utama dari aplikasi Dart. Setiap program Dart harus memiliki fungsi
main() untuk bisa dijalankan.

void main() {

print('Hello, Dart!');

Pada contoh ini, program akan mencetak "Hello, Dart!" di konsol.

3. Variabel dan Tipe Data

Dart memiliki tipe data statik dan dinamis. Variabel bisa dideklarasikan dengan tipe yang spesifik atau
tanpa tipe eksplisit menggunakan kata kunci var atau dynamic.

 Deklarasi variabel dengan tipe eksplisit:

int number = 10;

String name = 'John Doe';

bool isActive = true;

Deklarasi variabel dengan var (Dart akan menentukan tipe secara otomatis):

var age = 25; // Dart akan mengetahui bahwa ini tipe int

Deklarasi dengan dynamic (tipe bisa berubah):

dynamic variable = 'Hello';

variable = 10; // Ini diizinkan karena dynamic bisa berubah tipe

4. Fungsi

Fungsi digunakan untuk memecah logika program menjadi bagian-bagian yang terpisah. Fungsi bisa
memiliki parameter dan bisa mengembalikan nilai.

 Fungsi tanpa nilai balik:

void greet() {

print('Hello, World!');
}

Fungsi dengan nilai balik:

int add(int a, int b) {

return a + b;

Fungsi dengan parameter opsional:

void greet([String name = 'Guest']) {

print('Hello, $name!');

5. Kondisi (if-else)

Kondisi digunakan untuk mengatur alur eksekusi berdasarkan nilai boolean tertentu.

void main() {

int age = 20;

if (age >= 18) {

print('Dewasa');

} else {

print('Belum dewasa');

6. Perulangan (looping)

Dart mendukung berbagai macam perulangan seperti for, while, dan do-while.

 For loop:

for (int i = 0; i < 5; i++) {

print(i);

}
While loop:

int i = 0;

while (i < 5) {

print(i);

i++;

Do-while loop:

int i = 0;

do {

print(i);

i++;

} while (i < 5);

7. List dan Map

Dart mendukung struktur data seperti List (array) dan Map (dictionary).

 List:

List<int> numbers = [1, 2, 3, 4, 5];

print(numbers[0]); // Output: 1

Map:

Map<String, String> person = {

'name': 'Alice',

'city': 'Wonderland'

};

print(person['name']); // Output: Alice

8. Kelas dan Objek

Dart adalah bahasa berorientasi objek. Anda bisa membuat kelas dan objek untuk memodelkan entitas
nyata.

 Membuat kelas:

class Person {

String name;

int age;

// Constructor

Person([Link], [Link]);

void introduce() {

print('Hi, my name is $name and I am $age years old.');

Membuat objek dari kelas:

void main() {

Person person = Person('John', 25);

[Link]();

9. Asynchronous Programming

Dart mendukung asynchronous programming menggunakan Future dan async-await.

 Menggunakan Future:

Future<String> fetchData() async {

return [Link](Duration(seconds: 2), () => 'Data Fetched');

}

void main() async {

String data = await fetchData();

print(data);

10. Exception Handling

Untuk menangani kesalahan atau error, Dart mendukung penggunaan try-catch seperti bahasa
pemrograman lainnya.

void main() {

try {

int result = 10 ~/ 0; // Error karena pembagian dengan 0

print(result);

} catch (e) {

print('Error: $e');

Ringkasan Struktur Dasar Dart:

1. Komentar digunakan untuk dokumentasi.

2. Fungsi main() sebagai titik masuk program.

3. Variabel menggunakan var, dynamic, atau tipe statis seperti int, String, dll.

4. Fungsi dapat memiliki parameter dan nilai balik.

5. Kondisi (if-else) untuk pengambilan keputusan.

6. Looping (for, while) untuk perulangan.

7. List dan Map sebagai struktur data.

8. Kelas dan Objek untuk pemrograman berorientasi objek.

9. Asynchronous Programming untuk operasi non-blok.

 10. Exception Handling untuk menangani error.

Itulah struktur dasar pengkodean di Dart yang bisa dijadikan fondasi untuk membuat aplikasi Dart
sederhana.

Tipe data Dart

Dart memiliki beberapa tipe data bawaan yang mendukung berbagai jenis nilai, dari angka hingga objek
kompleks seperti daftar dan peta. Berikut adalah tipe data utama dalam Dart:

1. Numbers (Angka)

Dart mendukung dua tipe data numerik: int dan double.

 int: digunakan untuk angka bulat (integer).

int age = 25;

int year = 2023;

 double: digunakan untuk angka desimal (floating point).

double price = 19.99;

double pi = 3.14159;

2. String (Teks)

Tipe data String digunakan untuk menyimpan urutan karakter (teks). Teks di Dart bisa dideklarasikan
menggunakan tanda kutip tunggal (') atau kutip ganda (").

 Deklarasi string:

String name = 'Alice';

String greeting = "Hello, World!";

 Interpolation: String di Dart mendukung string interpolation, memungkinkan kita menyisipkan

variabel di dalam string menggunakan simbol $.

String name = 'Alice';

String message = 'Hello, $name!'; // Output: Hello, Alice!

Jika ingin memanggil ekspresi kompleks dalam interpolasi, gunakan ${}.

String message = 'The sum of 2 + 3 is ${2 + 3}'; // Output: The sum of 2 + 3 is 5

3. Boolean

Tipe data bool hanya bisa bernilai true atau false. Ini biasanya digunakan dalam kondisi seperti if atau
while.

bool isLoggedIn = true;

bool hasData = false;

4. List (Array)

List adalah struktur data yang berisi kumpulan elemen berurutan (seperti array di bahasa
pemrograman lain). List bisa berisi elemen dengan tipe yang sama atau berbeda.

 List dengan tipe data spesifik:

List<int> numbers = [1, 2, 3, 4, 5];

 List yang dapat berisi elemen dari berbagai tipe:

List<dynamic> mixedList = [1, 'Hello', true];

 List kosong:

List<String> names = [];

5. Map (Dictionary)

Map adalah struktur data yang menyimpan pasangan key-value. Setiap key harus unik, tetapi nilai
(value) tidak harus unik. Map sering digunakan untuk merepresentasikan data dalam bentuk kunci dan
nilai, seperti kamus.

 Membuat Map:

Map<String, String> person = {

'name': 'Alice',

'city': 'Wonderland'

};

 Akses elemen dalam Map:

print(person['name']); // Output: Alice

  Map kosong:

Map<String, int> scores = {};

6. Set

Set adalah kumpulan elemen yang unik (tidak ada duplikasi). Set mirip dengan List, tetapi setiap elemen
hanya boleh muncul sekali.

 Membuat Set:

Set<int> uniqueNumbers = {1, 2, 3, 4, 4}; // Hanya akan menyimpan {1, 2, 3, 4}

7. Runes (Unicode)

Runes digunakan untuk merepresentasikan karakter Unicode. Dart mendukung Unicode, sehingga Anda
dapat bekerja dengan berbagai jenis karakter dari berbagai bahasa, termasuk emoji.

 Mengakses kode Unicode:

var heartSymbol = '\u2665'; // Simbol hati ♥

8. Symbol

Symbol adalah tipe data khusus yang digunakan untuk menyimpan simbol yang unik. Symbol jarang
digunakan, biasanya untuk meta-programming, dan sering digunakan di kode framework.

 Membuat Symbol:

Symbol s = #mySymbol;

9. Null

Dart memiliki tipe khusus untuk null yang merepresentasikan ketiadaan nilai. Sejak Dart 2.12, dengan
fitur null safety, sebuah variabel tidak bisa bernilai null secara default kecuali ditandai secara eksplisit.

 Deklarasi variabel nullable:

int? nullableNumber = null; // Tipe data ini dapat bernilai null

Dengan tanda tanya (?), kita menunjukkan bahwa nullableNumber dapat memiliki nilai null.

10. Dynamic

Tipe dynamic digunakan jika kita tidak tahu tipe data apa yang akan dipegang oleh variabel pada waktu
kompilasi. Variabel bertipe dynamic dapat berubah-ubah tipenya selama eksekusi program.

 Menggunakan dynamic:
dynamic something = 'Hello';

something = 123; // Ini diperbolehkan, karena dynamic bisa berubah tipe

Namun, menggunakan dynamic dapat meningkatkan risiko kesalahan pada runtime, sehingga disarankan
untuk menggunakannya dengan hati-hati.

11. Object

Object adalah tipe data root dari semua tipe di Dart. Semua variabel dalam Dart adalah turunan dari
Object, sehingga Object bisa menampung nilai dari tipe apapun.

Object anything = 'Hello'; // Menyimpan string

anything = 42; // Sekarang menyimpan integer

Ringkasan

Berikut adalah rangkuman tipe data utama dalam Dart:

 int: untuk bilangan bulat.

 double: untuk bilangan desimal.

 String: untuk teks.

 bool: untuk nilai benar/salah.

 List: untuk array atau kumpulan elemen berurutan.

 Map: untuk pasangan key-value.

 Set: untuk kumpulan elemen yang unik.

 Runes: untuk karakter Unicode.

 Symbol: untuk simbol yang unik.

 dynamic: tipe yang bisa berubah.

 Object: tipe dasar dari semua objek.

Dengan tipe data ini, Anda dapat memodelkan berbagai data dan logika dalam aplikasi Dart.
Function (Fungsi) Dart

Dalam Dart, fungsi (function) adalah bagian penting untuk membagi logika program menjadi bagian-
bagian yang terpisah dan mudah dikelola. Fungsi digunakan untuk mengeksekusi sekelompok instruksi
berulang kali atau ketika diperlukan. Berikut adalah penjelasan dasar tentang fungsi di Dart dan
beberapa jenis fungsi yang sering digunakan.

Struktur Dasar Fungsi di Dart

Fungsi di Dart memiliki struktur dasar sebagai berikut:

returnType functionName(parameter1, parameter2, ...) {

// Blok kode yang dieksekusi

return someValue; // Jika fungsi mengembalikan nilai

 returnType: Tipe data yang dikembalikan oleh fungsi (seperti int, String, dll). Jika fungsi tidak
mengembalikan nilai, gunakan void.

 functionName: Nama dari fungsi.

 parameter: Daftar parameter yang diterima oleh fungsi. Jika fungsi tidak memerlukan parameter,
maka tanda kurung kosong () digunakan.

 return: Kata kunci ini digunakan untuk mengembalikan nilai dari fungsi. Jika fungsi tidak
mengembalikan apa pun, ini bisa diabaikan.

Contoh Fungsi Sederhana

1. Fungsi tanpa parameter dan tanpa return value (void)

void sayHello() {
print('Hello, World!');
}

Cara memanggil fungsi:

void main() {

sayHello(); // Output: Hello, World!

}
 2. Fungsi dengan parameter

Fungsi ini menerima input dari luar dalam bentuk parameter.

void greet(String name) {

print('Hello, $name!');

Cara memanggil fungsi:

void main() {

greet('Alice'); // Output: Hello, Alice!

3. Fungsi dengan nilai kembali (return value)

Fungsi ini mengembalikan hasil kepada pemanggil fungsi.

int add(int a, int b) {

return a + b;

Cara memanggil fungsi:

void main() {

int result = add(5, 3);

print(result); // Output: 8

}
Latihan

Berikut adalah beberapa **soal latihan Dart basic** yang meliputi penggunaan variabel, fungsi, kondisi,
dan struktur dasar pemrograman Dart, beserta jawaban atau solusi dari masing-masing soal.

### **Soal 1: Penjumlahan Sederhana**

Buat sebuah fungsi bernama `addNumbers` yang menerima dua parameter bertipe `int`, dan
mengembalikan hasil penjumlahan kedua angka tersebut. Cetak hasil penjumlahan di dalam `main()`.

#### **Jawaban:**

int addNumbers(int a, int b) {

return a + b;

void main() {

int result = addNumbers(5, 3);

print('Hasil penjumlahan: $result'); // Output: Hasil penjumlahan: 8

### **Soal 2: Memeriksa Bilangan Genap atau Ganjil**

Buat fungsi bernama `checkEvenOdd` yang menerima satu parameter bertipe `int`. Fungsi ini akan
mencetak `Genap` jika angka tersebut adalah bilangan genap dan mencetak `Ganjil` jika angka tersebut
adalah bilangan ganjil.

#### **Jawaban:**

void checkEvenOdd(int number) {

if (number % 2 == 0) {

print('$number adalah bilangan Genap');

} else {

print('$number adalah bilangan Ganjil');

}
}

void main() {

checkEvenOdd(10); // Output: 10 adalah bilangan Genap

checkEvenOdd(7); // Output: 7 adalah bilangan Ganjil

### **Soal 3: Menghitung Luas Persegi Panjang**

Buat fungsi bernama `calculateArea` yang menerima dua parameter: panjang dan lebar. Fungsi ini akan
mengembalikan luas persegi panjang (luas = panjang * lebar). Cetak hasil luas tersebut di dalam `main()`.

#### **Jawaban:**

int calculateArea(int panjang, int lebar) {

return panjang * lebar;

void main() {

int luas = calculateArea(5, 10);

print('Luas persegi panjang: $luas'); // Output: Luas persegi panjang: 50

### **Soal 4: Penggunaan List dan Perulangan**

Buat sebuah list yang berisi beberapa nama. Gunakan perulangan `for` untuk mencetak semua nama
dalam list tersebut.

#### **Jawaban:**

void main() {

List<String> names = ['Alice', 'Bob', 'Charlie', 'Diana'];

for (String name in names) {

print(name);
 }

// Output:

// Alice

// Bob

// Charlie

// Diana

### **Soal 5: Mencari Angka Terbesar dari 3 Angka**

Buat fungsi bernama `findMax` yang menerima tiga angka sebagai parameter. Fungsi ini harus
mengembalikan angka terbesar di antara ketiganya.

#### **Jawaban:**

int findMax(int a, int b, int c) {

if (a > b && a > c) {

return a;

} else if (b > a && b > c) {

return b;

} else {

return c;

void main() {

int max = findMax(10, 25, 17);

print('Angka terbesar: $max'); // Output: Angka terbesar: 25

### **Soal 6: Menghitung Faktorial**

Buat sebuah fungsi bernama `factorial` yang menerima satu angka dan mengembalikan faktorial dari
angka tersebut. Faktorial dari `n` (ditulis `n!`) adalah hasil perkalian dari semua bilangan bulat positif ≤
`n`.

#### **Jawaban:**

int factorial(int n) {

int result = 1;

for (int i = 1; i <= n; i++) {

result *= i;

return result;

void main() {

print('Faktorial dari 5 adalah: ${factorial(5)}'); // Output: Faktorial dari 5 adalah: 120

### **Soal 7: Menghitung Rata-rata List Angka**

Buat fungsi bernama `calculateAverage` yang menerima list angka bertipe `List<int>`. Fungsi ini akan
menghitung dan mengembalikan nilai rata-rata dari list tersebut.

#### **Jawaban:**

double calculateAverage(List<int> numbers) {

int total = 0;

for (int number in numbers) {

total += number;

return total / [Link];

void main() {
 List<int> numbers = [10, 20, 30, 40, 50];

print('Rata-rata: ${calculateAverage(numbers)}'); // Output: Rata-rata: 30.0

### **Soal 8: Memeriksa Angka Positif, Negatif, atau Nol**

Buat fungsi bernama `checkNumber` yang menerima satu angka dan mencetak apakah angka tersebut
**positif**, **negatif**, atau **nol**.

#### **Jawaban:**

void checkNumber(int number) {

if (number > 0) {

print('$number adalah angka positif');

} else if (number < 0) {

print('$number adalah angka negatif');

} else {

print('$number adalah nol');

void main() {

checkNumber(10); // Output: 10 adalah angka positif

checkNumber(-5); // Output: -5 adalah angka negatif

checkNumber(0); // Output: 0 adalah nol

### **Soal 9: Reverse String**

Buat sebuah fungsi bernama `reverseString` yang menerima satu string sebagai parameter, dan
mengembalikan string tersebut dalam urutan terbalik.

#### **Jawaban:**
String reverseString(String input) {

return [Link]('').[Link]('');

void main() {

print(reverseString('Dart')); // Output: traD

### **Soal 10: Membuat Fungsi Menghitung Pangkat**

Buat sebuah fungsi bernama `calculatePower` yang menerima dua parameter, yaitu basis dan eksponen.
Fungsi ini mengembalikan hasil dari basis yang dipangkatkan dengan eksponen.

#### **Jawaban:**

int calculatePower(int base, int exponent) {

int result = 1;

for (int i = 0; i < exponent; i++) {

result *= base;

return result;

void main() {

print('3^4 = ${calculatePower(3, 4)}'); // Output: 3^4 = 81

### Ringkasan:

Latihan-latihan di atas mencakup berbagai aspek dasar pemrograman Dart, seperti:

- Operasi dasar dan penjumlahan.

- Penggunaan kondisi (`if-else`).

- Perulangan (`for` loop).

- Manipulasi list dan string.

- Fungsi dengan return value.

- Penggunaan parameter opsional dan fungsi asinkron (dalam soal lanjutan).

Ini merupakan dasar-dasar penting untuk membangun keterampilan dalam pemrograman Dart.
Flutter 03. Stateless vs Statefull

Dalam Flutter, konsep stateless dan stateful berkaitan dengan bagaimana widget berinteraksi dengan
perubahan data yang terjadi di aplikasi. Widget di Flutter bersifat immutable, artinya setelah dibuat,
mereka tidak bisa diubah. Namun, kita bisa membedakan antara dua jenis widget: StatelessWidget dan
StatefulWidget.

Stateless: Aplikasi yang tidak membutuhkan perubahan state/keadaan.

StatelessWidget adalah widget yang tidak bergantung pada perubahan data atau status internal.
Artinya, widget ini hanya dirender sekali dan tidak berubah meskipun ada perubahan dalam aplikasi.

Karakteristik:

 Tidak memiliki state (keadaan) internal yang bisa berubah.

 Biasanya digunakan untuk UI yang tetap dan tidak memerlukan interaksi atau perubahan data.

 Misalnya: teks, gambar, atau ikon yang tidak berubah.

Stateless Widget

TEXT

TEXT

Bersifat statis hanya menampilkan output saja.

Statefull: Aplikasi yang membutuhkan perubahan state/keadaan.

2. StatefulWidget

StatefulWidget adalah widget yang dapat berubah berdasarkan perubahan state (keadaan) internal atau
eksternal. Dengan kata lain, widget ini bisa diperbarui atau dirender ulang setiap kali ada perubahan
dalam state-nya.
Karakteristik:

 Memiliki state (keadaan) yang dapat diubah selama aplikasi berjalan.

 Digunakan ketika UI memerlukan interaksi atau perubahan, seperti input pengguna, animasi,
atau data dinamis.

 Mempunyai dua bagian utama:

1. StatefulWidget: Kerangka widget.

2. State: Objek yang menyimpan status (data) yang dapat diubah, dan widget akan di-
render ulang ketika state berubah.

Stateless Widget

TEXT

[hasil]

Aksi input

Bersifat dinamis dapat menampilkan hasil dari input.