Video ini membahas DartPad, yaitu alat online yang sangat berguna untuk belajar dan mencoba kode Dart tanpa harus langsung memasang Dart SDK, Android Studio, atau IDE lain di komputer.

Saya jelaskan dari dasar supaya kamu bukan hanya tahu “tombolnya untuk apa”, tetapi juga mengerti kapan dan mengapa DartPad digunakan.

🟦 1. Apa itu DartPad?

DartPad adalah editor dan tempat menjalankan kode Dart secara online melalui browser.

Sederhananya:

Browser
   ↓
DartPad
   ↓
Tulis kode Dart
   ↓
Run
   ↓
Lihat hasil

Jadi kita tidak harus membuat project Dart lengkap di komputer hanya untuk mencoba kode sederhana.

Misalnya kita ingin belajar variable.

Kita bisa langsung menulis:

void main() {
  String nama = "Budi";

  print(nama);
}

Kemudian klik Run dan hasilnya akan ditampilkan.

🟦 2. Kenapa DartPad bagus untuk belajar?

Bayangkan kamu baru belajar Dart.

Kalau menggunakan IDE lengkap, kamu mungkin harus:

Install IDE
   ↓
Install Dart SDK / Flutter SDK
   ↓
Buat project
   ↓
Konfigurasi
   ↓
Baru menulis kode

Untuk pemula, proses ini bisa terasa panjang.

Dengan DartPad:

Buka browser
   ↓
Buka DartPad
   ↓
Tulis kode
   ↓
Run

Selesai.

Karena itu DartPad sangat cocok untuk:

• belajar sintaks Dart
• mencoba contoh kode
• latihan variable
• latihan function
• latihan OOP
• mencoba collection
• mencoba async/await
• eksperimen kecil
• melihat dokumentasi

🟦 3. DartPad vs IDE

Video juga menyebut beberapa IDE/editor.

Contohnya:

• Android Studio
• IntelliJ IDEA
• Visual Studio
• Visual Studio Code
• Eclipse
• Vim
• Emacs

Namun video tersebut memilih DartPad untuk seri belajar Dart.

Secara sederhana:

Untuk belajar konsep Dart, DartPad sudah sangat cukup untuk banyak latihan dasar.

Tetapi ketika mulai membuat aplikasi Flutter sungguhan, kamu biasanya akan menggunakan IDE/editor seperti VS Code atau Android Studio.

🟦 4. DartPad bukan hanya untuk Dart

Ini bagian yang menarik.

DartPad dapat digunakan untuk dua jenis eksperimen:

Dart
 │
 ├── Dart application
 │
 └── Flutter application

🟩 5. Dart Application

Kalau memilih Dart, kita akan mendapatkan editor untuk kode Dart biasa.

Contoh:

void main() {
  print("Hello Dart");
}

Outputnya muncul di bagian console.

Cocok untuk belajar:

Variable
Data Type
If/Else
Loop
Function
Class
Object
Inheritance
List
Set
Map
Future
Async/Await

🟩 6. Flutter Application

DartPad juga menyediakan contoh Flutter.

Misalnya Counter App.

Counter App adalah aplikasi sederhana yang mempunyai angka:

0

kemudian kita menekan tombol:

     +

menjadi:

1

tekan lagi:

2

dan seterusnya.

Gambaran sederhananya:

┌────────────────────────┐
│       Flutter App      │
├────────────────────────┤
│                        │
│          0             │
│                        │
│                  (+)   │
└────────────────────────┘

Setelah tombol ditekan:

0 → 1 → 2 → 3 → 4 → ...

Counter App sering digunakan sebagai aplikasi pertama ketika belajar Flutter karena memperkenalkan konsep dasar seperti UI, state, widget, dan event.

🟦 7. Bagian-bagian DartPad

Sekarang kita bahas bagian-bagian yang disebut dalam video.

Secara konseptual, DartPad mempunyai beberapa area utama:

┌─────────────────────────────────────────┐
│ Toolbar                                 │
├───────────────────────┬─────────────────┤
│                       │                 │
│   Code Editor         │    Output/UI    │
│                       │                 │
│   Tulis kode Dart     │                 │
│                       │                 │
├───────────────────────┴─────────────────┤
│ Console / Documentation / Problems      │
└─────────────────────────────────────────┘

Tampilan bisa berubah mengikuti versi DartPad, tetapi konsepnya kurang lebih seperti itu.

🟦 8. Editor Window

Bagian editor adalah tempat kita menulis dan mengedit kode.

Misalnya:

void main() {
  print("Hello Dart");
}

Kita mengetik kode di sini.

Anggap saja editor seperti:

buku tempat kita menulis program.

🟦 9. Tombol Run

Tombol Run digunakan untuk menjalankan kode.

Misalnya kita memiliki:

void main() {
  print("Halo");
}

Kita klik:

Run

Kemudian DartPad menjalankan program.

Output:

Halo

Jadi alurnya:

Tulis kode
   ↓
Run
   ↓
Compiler/runtime
   ↓
Program dijalankan
   ↓
Output

🟦 10. Console

Console adalah tempat kita melihat output dari program Dart.

Misalnya:

void main() {
  print("Nama saya Budi");
  print("Saya sedang belajar Dart");
}

Console akan menampilkan:

Nama saya Budi
Saya sedang belajar Dart

Jadi ketika kamu menggunakan:

print(...)

hasilnya biasanya dapat dilihat melalui console.

🟦 11. UI pada Flutter

Kalau kita menjalankan aplikasi Flutter, outputnya bukan sekadar tulisan di console.

Kita akan melihat UI (User Interface).

Contohnya:

┌──────────────────────────┐
│       My Flutter App     │
├──────────────────────────┤
│                          │
│          0               │
│                          │
│                     (+)  │
└──────────────────────────┘

Bagian ini disebut UI.

Jadi:

Dart biasa

Kode
 ↓
Console

Flutter

Kode
 ↓
Flutter
 ↓
UI

🟦 12. Documentation

DartPad juga mempunyai bagian Documentation.

Ini sangat berguna karena kita bisa melihat informasi mengenai API atau fungsi tertentu.

Misalnya kita menggunakan:

print()

Kita dapat melihat dokumentasi mengenai print.

Jadi ketika lupa:

“print ini sebenarnya digunakan untuk apa?”

Dokumentasi dapat membantu menjawabnya.

🟦 13. Mengapa dokumentasi penting?

Ketika belajar programming, jangan membiasakan diri hanya menghafal.

Programmer juga harus terbiasa membaca dokumentasi.

Misalnya kamu menemukan:

someFunction(...)

Kamu tidak tahu:

• parameter apa yang dibutuhkan?
• return value-nya apa?
• bagaimana cara menggunakannya?
• apa kegunaannya?

Kamu bisa melihat dokumentasi.

Kebiasaan ini sangat penting ketika nanti belajar Flutter.

🟦 14. Error dan Information

Salah satu fitur yang sangat membantu di DartPad adalah memberitahu kita ketika ada masalah dalam kode.

Misalnya kita menulis:

void main() {
  print("Hello")
}

Perhatikan:

print("Hello")
            ↑
      tidak ada ;

Dart akan memberikan informasi/error mengenai masalah tersebut.

Misalnya secara konseptual:

Error:
Expected ';'

Artinya:

Dart mengharapkan tanda ;.

🟦 15. Error vs Information

Video menjelaskan bahwa DartPad dapat menunjukkan beberapa jenis pesan.

Secara sederhana, kamu bisa menemukan:

Error

Masalah yang harus diperbaiki.

Contoh:

void main() {
  print("Hello"
}

Ada syntax yang tidak lengkap.

Warning / Info / Suggestion

Tidak selalu berarti program gagal.

Misalnya Dart memberikan saran:

“Variable ini dibuat tetapi tidak pernah digunakan.”

Contoh:

void main() {
  int umur = 20;
}

Program mungkin tetap dapat berjalan, tetapi Dart bisa memberi informasi bahwa umur tidak digunakan.

Jadi jangan langsung panik ketika melihat tanda kuning atau informasi.

Bedakan:

🔴 Error
→ harus diperhatikan/diperbaiki

🟡 Warning/Info
→ peringatan atau saran

🟦 16. Hide Problems

Video juga menunjukkan tombol Hide.

Misalnya DartPad sedang menunjukkan beberapa masalah:

Problems
────────────
2 issues
1 warning

Kita bisa menyembunyikan tampilan tersebut.

Tetapi ada hal yang sangat penting:

Hide bukan berarti error-nya hilang.

Ini hanya menyembunyikan tampilan masalah.

Analoginya:

Ada sampah di lantai
       ↓
Kita tutup dengan karpet
       ↓
Sampah masih ada

Begitu juga dengan error.

Hide
 ↓
Tampilan error disembunyikan

Bukan:

Hide
 ↓
Error diperbaiki

🟦 17. Show Problems

Kalau sebelumnya kita menekan Hide, kita dapat menampilkan kembali masalah dengan Show.

Jadi:

Show → tampilkan masalah
Hide → sembunyikan tampilan masalah

Keduanya hanya mengatur tampilan.

🟦 18. Format

Tombol Format digunakan untuk merapikan kode sesuai aturan formatting Dart.

Misalnya kode kita berantakan:

void main(){print("Hello");print("Dart");}

Kita bisa menggunakan format sehingga menjadi lebih mudah dibaca:

void main() {
  print("Hello");
  print("Dart");
}

Ini sangat penting karena programmer tidak hanya membuat kode yang bisa berjalan.

Kode juga harus:

• mudah dibaca
• konsisten
• rapi
• mudah dipelihara

🟦 19. Format bukan untuk memperbaiki logika

Ini juga penting.

Format hanya membantu merapikan struktur penulisan.

Misalnya:

int umur = 20;

dan:

int umur=20;

Formatter dapat merapikan spasinya.

Tetapi kalau logika program salah:

int hasil = 10 / 0;

format tidak akan memperbaiki logikanya.

Jadi:

Format ≠ memperbaiki program

Format hanya membuat kode lebih rapi.

🟦 20. Reset

Tombol Reset digunakan untuk mengembalikan DartPad ke kondisi awal/default.

Misalnya kita sudah melakukan banyak eksperimen:

class A {
  ...
}

class B {
  ...
}

Kemudian ingin memulai dari awal.

Kita bisa melakukan:

Reset
  ↓
Konfirmasi
  ↓
DartPad kembali ke kondisi awal

⚠️ Jadi hati-hati menggunakan Reset jika ada kode yang belum disimpan/dibagikan.

🟦 21. New DartPad

Video juga menyebut New DartPad.

Fungsinya untuk membuat sesi DartPad baru.

Kurang lebih:

DartPad saat ini
      ↓
New DartPad
      ↓
DartPad baru

Ini berguna kalau kamu ingin memisahkan latihan.

Misalnya:

DartPad 1 → latihan Variable
DartPad 2 → latihan Function
DartPad 3 → latihan OOP

🟦 22. Stable, Beta, dan Channel lainnya

Dart mempunyai beberapa channel/release track.

Secara umum kita mengenal:

Stable
Beta
Dev

Stable

Versi yang paling matang dan biasanya paling cocok untuk belajar serta penggunaan umum.

Beta

Fitur lebih baru dibanding stable, tetapi belum sematang stable.

Dev

Berisi perkembangan yang lebih awal/eksperimental dibanding channel yang lebih stabil.

Untuk pemula:

Gunakan Stable.

Karena tujuan kita adalah belajar konsep, bukan mencoba fitur eksperimental.

🟦 23. Versi Dart

DartPad juga menampilkan versi Dart yang sedang digunakan.

Misalnya secara konsep:

Dart version: 3.x.x

Kenapa versi penting?

Karena bahasa pemrograman terus berkembang.

Sintaks atau fitur yang tersedia dapat berbeda antar versi.

Misalnya kamu menemukan tutorial lama:

kode tertentu

tetapi ketika dicoba ternyata berbeda.

Salah satu hal yang perlu dicek adalah:

Versi Dart yang digunakan tutorial tersebut.

🟦 24. SDK

Video juga membahas Dart SDK.

SDK adalah singkatan dari:

Software Development Kit

Dart SDK berisi berbagai tools yang dibutuhkan untuk bekerja dengan Dart.

Secara sederhana:

Dart SDK
 │
 ├── Compiler
 ├── Runtime/tools
 ├── Libraries
 └── Development tools

Jika kamu melakukan development Dart secara lokal di komputer, Dart SDK menjadi bagian penting dari lingkungan development.

Sedangkan ketika menggunakan DartPad, banyak kebutuhan setup tersebut sudah ditangani oleh lingkungan online.

🟦 25. Library

Di DartPad ada bagian yang memberikan informasi tentang library yang dapat digunakan.

Jangan khawatir kalau sekarang belum mengerti apa itu library.

Bayangkan library sebagai:

kumpulan kode yang sudah dibuat dan dapat kita gunakan kembali.

Misalnya kita ingin melakukan operasi matematika.

Dart memiliki library yang menyediakan berbagai fungsi matematika.

Secara konsep:

Library
   ↓
Kumpulan fitur
   ↓
Kita import
   ↓
Kita gunakan

Contohnya:

import 'dart:math';

void main() {
  print(sqrt(25));
}

Output:

5.0

Kita tidak perlu membuat sendiri fungsi akar kuadrat dari nol.

🟦 26. Import

Ketika kita menulis:

import 'dart:math';

kita sedang mengatakan:

“Saya ingin menggunakan fitur dari library dart:math.”

Kemudian kita bisa menggunakan:

sqrt(25)

Konsep import akan sangat penting ketika nanti belajar Dart dan Flutter.

🟦 27. Sample Flutter Application

DartPad juga menyediakan contoh aplikasi Flutter.

Salah satunya:

Counter App

Contoh sederhananya:

┌────────────────────────┐
│         Counter        │
├────────────────────────┤
│                        │
│           0            │
│                        │
│                     +  │
└────────────────────────┘

Ketika + ditekan:

0 → 1

Tekan lagi:

1 → 2

Tekan lagi:

2 → 3

dan seterusnya.

🟦 28. Apa yang sebenarnya terjadi ketika tombol ditekan?

Secara konsep:

User menekan tombol
        ↓
Event terjadi
        ↓
Function dijalankan
        ↓
State berubah
        ↓
Flutter memperbarui UI

Misalnya:

counter = 0

Kemudian user menekan tombol:

counter++

menjadi:

counter = 1

Flutter kemudian memperbarui bagian UI yang menampilkan angka tersebut.

Jangan khawatir jika konsep state belum jelas.

Ini akan menjadi materi penting ketika masuk ke Flutter.

🟦 29. Tombol tiga titik (…)

Di DartPad terdapat menu tambahan yang dapat memberikan beberapa pilihan.

Video menyebut beberapa hal seperti:

• berbagi DartPad
• membuka repository/source terkait
• mengakses website Dart
• mengakses website Flutter

Fitur-fitur ini berguna ketika kamu ingin:

“Saya ingin membagikan kode ini kepada orang lain.”

Misalnya kamu membuat latihan:

void main() {
  print("Hello Dart");
}

Kemudian DartPad dapat dibagikan sehingga orang lain bisa melihat/menjalankan kode tersebut.

🟦 30. DartPad sangat cocok untuk latihan kecil

Misalnya kamu baru belajar variable.

Daripada membuat project besar, cukup:

void main() {
  String nama = "Budi";
  int umur = 20;

  print(nama);
  print(umur);
}

Lalu Run.

Latihan if

void main() {
  int umur = 20;

  if (umur >= 18) {
    print("Dewasa");
  } else {
    print("Belum dewasa");
  }
}

Latihan loop

void main() {
  for (int i = 1; i <= 5; i++) {
    print(i);
  }
}

Latihan function

void salam(String nama) {
  print("Halo $nama");
}

void main() {
  salam("Budi");
}

Latihan List

void main() {
  List<String> buah = [
    "Apel",
    "Mangga",
    "Jeruk",
  ];

  for (var item in buah) {
    print(item);
  }
}

Dengan DartPad, semua contoh tersebut bisa langsung dicoba.

🟦 31. Alur belajar menggunakan DartPad

Kalau kamu sedang mengikuti seri belajar Dart, saya sarankan menggunakan pola seperti ini:

Tonton materi
      ↓
Pahami konsep
      ↓
Buka DartPad
      ↓
Ketik ulang contoh
      ↓
Run
      ↓
Ubah-ubah kode
      ↓
Lihat hasil
      ↓
Coba eksperimen sendiri

Bagian “ubah-ubah kode” justru sangat penting.

Misalnya tutorial memberikan:

int umur = 20;

Jangan hanya menjalankan.

Coba ubah:

int umur = 10;

Kemudian:

int umur = 30;

Lihat bagaimana program berubah.

🧠 32. Kesalahan yang sering dilakukan pemula

Jangan hanya melakukan:

Copy
 ↓
Paste
 ↓
Run
 ↓
"Saya sudah mengerti."

Itu sering membuat kita merasa paham padahal sebenarnya hanya mengikuti tutorial.

Lebih baik:

Copy
 ↓
Run
 ↓
Pahami
 ↓
Hapus
 ↓
Ketik ulang
 ↓
Ubah
 ↓
Buat versi sendiri

Contohnya tutorial memberikan:

String nama = "Budi";
print(nama);

Kamu coba ubah menjadi:

String nama = "Andi";
print("Nama saya adalah $nama");

Kemudian coba lagi:

String nama = "Citra";
int umur = 21;

print("Nama: $nama");
print("Umur: $umur");

Dengan cara seperti ini, konsep akan lebih cepat melekat.

🎯 Ringkasan DartPad

Jadi, semua isi video dapat dirangkum seperti ini:

                     DARTPAD
                        │
          ┌─────────────┴─────────────┐
          │                           │
      DART CODE                  FLUTTER CODE
          │                           │
          ↓                           ↓
     Editor Window                   UI
          │                           │
          ↓                           ↓
        RUN                         RUN
          │                           │
          ↓                           ↓
       Console                    Flutter App
          │
          ├── Documentation
          ├── Problems
          ├── Formatting
          ├── Libraries
          └── Dart Version

Fitur yang paling penting untuk kamu ingat:

⭐ Yang paling penting

Untuk sekarang, kamu tidak perlu menghafal semua tombol DartPad.

Cukup kuasai alur ini:

Buka DartPad → tulis kode → Run → lihat Console → kalau error baca Problems → perbaiki → Run lagi.

Dan ketika masuk Flutter:

Pilih/ buka contoh Flutter → tulis/ubah kode → Run → lihat UI → lakukan eksperimen.

Dengan pola tersebut, DartPad akan menjadi “laboratorium” untuk latihan Dart kamu sebelum nantinya berpindah ke VS Code/Android Studio dan membuat project Flutter yang sebenarnya.