Muhammad Hafiz

Setup Flutter Development, Stateless & Statefull Widget, Basic Widgets

Install Visual Studio

Ada beberapa library Flutter yang dibuat menggunakan bahasa C++, jadi Anda perlu menginstal Visual Studio.

1. Unduh Visual Studio di sini.

2. Instal Visual Studio, lalu centang pada "Desktop development with C++".

Install Android Studio

Meskipun Anda dapat membuat aplikasi Flutter tanpa Android Studio, sangat disarankan untuk menginstalnya. Android Studio berisi Android SDK Manager, dan Anda dapat membuat emulator untuk menjalankan aplikasi Flutter.

1. Unduh Android Studio di sini.

2. Instal Android Studio. Tutorial lengkap dapat dilihat di sini.

3. Setelah selesai diinstal, buat proyek baru lalu cari menu SDK Manager.

4. Pilih SDK Tools, kemudian centang seperti pada gambar di bawah ini.

5. Tunggu sampai proses download selesai.

Tambahkan Ekstensi Flutter

Setelah Anda menginstal Visual Studio Code, langkah selanjutnya adalah menambahkan ekstensi (fitur tambahan) Flutter agar Anda bisa mulai mengembangkan aplikasi dengan mudah.

1. Buka aplikasi "Visual Studio Code" Anda.

2. Klik ikon "Extensions" yang berada di sisi kiri layar. Ikon ini terlihat seperti empat kotak kecil, dengan satu kotak terpisah.

Anda juga bisa menggunakan pintasan keyboard: tekan `Ctrl` + `Shift` + `X`.

3. Di kolom pencarian yang muncul, ketik "flutter".

4. Pilih ekstensi "Flutter" dari hasil pencarian. Ekstensi ini diterbitkan oleh "Dart Code". Saat Anda menginstal ekstensi Flutter, ekstensi **"Dart"** juga akan ikut terinstal secara otomatis.

5. Klik tombol "Install" untuk memulai instalasi. Tunggu sampai prosesnya selesai.

Setelah instalasi selesai, Visual Studio Code Anda sudah siap untuk membuat proyek Flutter pertama!

Install SDK Flutter

Setelah Anda memiliki semua alat yang diperlukan, saatnya menginstal Flutter SDK (Software Development Kit).

1. Unduh Flutter SDK versi stabil di sini.

2. Ekstrak file yang sudah diunduh ke lokasi yang mudah Anda ingat, misalnya di `C:\Users\{username}\dev`.

3. Selanjutnya, Anda perlu menambahkan lokasi folder Flutter ke "PATH" agar bisa digunakan dari Command Prompt atau terminal mana pun. Untuk melakukannya, ketikkan **"environment"** di kolom pencarian Windows.

4. Pilih dan buka "Edit the system environment variables".

5. Di jendela yang muncul, klik tombol "Environment Variables...".

6. Pada bagian "System variables", cari dan pilih "Path", lalu klik "Edit...".

7. Klik "New" dan tambahkan lokasi folder `bin` dari Flutter SDK yang sudah Anda ekstrak sebelumnya, misalnya: `D:\Dev\flutter\bin`.

8. Klik "OK" pada semua jendela yang terbuka untuk menyimpan perubahan.

Dengan demikian, Flutter SDK sudah berhasil diinstal dan terkonfigurasi pada sistem Anda.

Cek Setup Flutter Development

Setelah mengikuti semua langkah instalasi, saatnya memastikan lingkungan pengembangan Flutter Anda sudah siap digunakan.

1. Buka **Command Prompt**, **PowerShell**, atau **Terminal**.

2. Ketik perintah berikut dan tekan Enter:

flutter doctor

3. Periksa hasilnya. Jika tidak ada tanda silang (`✗`) atau tanda seru (`!`) yang muncul, itu artinya semua komponen yang diperlukan sudah terinstal dengan benar dan siap digunakan.

Proyek Flutter Pertama "hai"

Sekarang, Anda bisa membuat proyek Flutter pertama Anda dengan mudah, baik melalui terminal maupun langsung dari Visual Studio Code.

Via Terminal / Command Prompt

1. Buka terminal atau command prompt.

2. Ketik perintah berikut untuk membuat proyek baru bernama "hai":

flutter create hai

3. Masuk ke direktori proyek yang baru dibuat:

cd hai

4. Jalankan proyek Anda dengan perintah berikut:

flutter run

Setelah itu, akan muncul pilihan di mana proyek akan dijalankan, seperti di Windows, Chrome, atau Edge.

Membuat Proyek Flutter via Visual Studio Code

Anda bisa membuat proyek Flutter langsung dari Visual Studio Code, yang seringkali lebih mudah karena sudah terintegrasi dengan baik.

1. Buka Visual Studio Code.

2. Buka **Command Palette** dengan menekan `Ctrl` + `Shift` + `P` (untuk Windows/Linux) atau `Cmd` + `Shift` + `P` (untuk macOS).

3. Ketik `Flutter: New Project` lalu pilih opsi tersebut dari daftar yang muncul.

4. Pilih jenis proyek yang ingin Anda buat, biasanya "Application" untuk membuat aplikasi mobile standar.

5. Pilih direktori atau folder di mana Anda ingin menyimpan proyek baru Anda.

6. Masukkan nama proyek Anda (misalnya, "hai") dan tekan **Enter**.

Struktur Proyek Flutter

Setelah proyek dibuat, Anda akan melihat struktur folder standar yang sudah terorganisir. Berikut adalah penjelasan singkat mengenai setiap folder dan file penting:

• `lib/`: Folder ini adalah tempat utama untuk menyimpan semua kode **Dart** Anda. File **`main.dart`** di dalamnya adalah titik awal (class utama) dari aplikasi Anda.

• `android/`: Berisi semua file dan konfigurasi yang spesifik untuk aplikasi **Android**, seperti file `build.gradle`.

• `ios/`: Berisi semua file dan konfigurasi yang spesifik untuk aplikasi **iOS**, seperti file `Info.plist`.

• `assets/`: Folder ini biasanya dibuat secara manual untuk menyimpan semua aset (gambar, font, video, dll.) yang digunakan di dalam aplikasi.

• `test/`: Folder untuk menyimpan kode yang digunakan untuk pengujian (testing) aplikasi Anda.

• `pubspec.yaml`: File konfigurasi utama proyek Flutter. Di sini Anda akan mengelola dependensi (package) dan aset yang digunakan oleh aplikasi Anda.

• `README.md`: File teks yang berisi deskripsi singkat tentang proyek, cara instalasi, dan informasi lainnya.

• `.gitignore`: File ini digunakan oleh **GIT** untuk mengabaikan file atau folder tertentu agar tidak terunggah ke repositori, seperti file build atau file cache.

Stateless

Stateless Widget adalah jenis widget di Flutter yang tidak memiliki "state" atau keadaan yang dapat berubah. Ini berarti tampilannya tidak akan berubah selama aplikasi berjalan, seperti halnya sebuah foto yang tidak bisa bergerak atau berubah warna.

Widget ini bersifat statis dan cocok untuk menampilkan data yang tidak perlu diperbarui, seperti logo, judul, atau teks tetap lainnya.

Contoh Kode

Anda dapat membuat kelas baru dengan nama `stateless.dart` di dalam folder `lib/`, lalu buat kode berikut:

Penjelasan Kode

Dalam kode di atas, `MyStateless` adalah sebuah StatelessWidget. Metode `build` hanya akan dipanggil satu kali saat widget pertama kali dibuat. Karena tidak ada "state" atau data yang dapat berubah, tampilan (UI) yang dihasilkan akan selalu sama.

Tampilan yang dihasilkan adalah sebuah halaman dengan AppBar (judul "Stateless Widget") dan teks "ini body" yang berada di tengah-tengah halaman. Tampilan ini akan selalu tetap seperti itu, tidak akan ada perubahan interaktif.

Stateful Widget

Stateful Widget adalah widget dinamis yang tampilan UI-nya dapat berubah (diperbarui) saat ada perubahan data atau "state". Bayangkan seperti tombol yang berubah warna saat Anda menekannya, atau sebuah angka yang bertambah setiap kali Anda mengklik.

Tidak seperti StatelessWidget, StatefulWidget terdiri dari dua bagian:

• `MyStatefulWidget`: Ini adalah kelas widget utama yang bersifat tetap (immutable), artinya properti yang didefinisikan di sini tidak akan berubah. Tugas utamanya hanya membuat kelas state yang dapat berubah.

• `_MyStatefulWidgetState`: Ini adalah kelas "state" yang memiliki properti yang dapat berubah (seperti `int _kelipatan = 0;`). Kelas ini bertanggung jawab untuk membangun dan memperbarui UI ketika perubahan terjadi.

Contoh Kode

Buat file baru bernama `statefull.dart` di dalam folder `lib/`, lalu tambahkan kode berikut:

Penjelasan Kode

Pada kode di atas, tampilan utama adalah sebuah `Scaffold` dengan sebuah `FloatingActionButton`. Ketika Anda menekan tombol `FloatingActionButton`, fungsi `_kelipatanDua()` akan dipanggil.

Fungsi ini kemudian memanggil `setState()`. Inilah yang memicu perubahan. Di dalam `setState()`, nilai variabel `_kelipatan` bertambah 2. Flutter kemudian akan membangun ulang (rebuild) bagian UI yang terpengaruh, yaitu widget `Text` yang menampilkan nilai `_kelipatan`. Karena itu, setiap kali Anda menekan tombol, angka yang ditampilkan akan berubah secara dinamis dari 0, 2, 4, 6, dan seterusnya.

Widget `Text`

Widget `Text` adalah salah satu widget paling dasar dan paling sering digunakan di Flutter. Fungsi utamanya adalah untuk menampilkan teks di layar aplikasi. Widget ini sangat fleksibel dan dapat diatur tampilannya menggunakan berbagai properti.

Properti Penting pada `Text`

• `data`: Ini adalah properti utama yang berisi teks itu sendiri yang akan ditampilkan, seperti `"Hai i am Text Widget"`. Properti ini wajib ada.

• `style`: Properti ini sangat kuat karena memungkinkan Anda mengontrol tampilan teks secara mendetail, seperti:

  • `fontSize`: Mengatur ukuran teks (misalnya, `14.0` untuk 14 piksel).
  • `color`: Mengatur warna teks (misalnya, `Colors.red` untuk warna merah).
  • `fontWeight`: Mengatur ketebalan teks (misalnya, `FontWeight.bold` untuk teks tebal).
  • `fontStyle`: Mengatur gaya teks (misalnya, `FontStyle.italic` untuk teks miring).

• `textAlign`: Mengatur perataan teks secara horizontal, seperti `TextAlign.center` (tengah), `TextAlign.left` (kiri), atau `TextAlign.right` (kanan).

• `maxLines`: Membatasi jumlah baris teks yang akan ditampilkan. Jika teks lebih panjang dari yang diizinkan, ia akan terpotong.

• `overflow`: Mengatur apa yang terjadi jika teks terlalu panjang dan melebihi ruang yang tersedia. Nilai umum adalah `TextOverflow.ellipsis`, yang akan menambahkan tanda **"..."** di akhir teks yang terpotong.

Contoh Kode

Contoh kode di bawah ini menampilkan teks "Hai i am Text Widget" yang diatur agar berwarna merah, tebal dan miring, serta berada di tengah.

Output:

Widget `Container`

Widget `Container` berfungsi seperti sebuah **kotak serbaguna** yang dapat Anda gunakan untuk menampung widget lain dan mengatur tampilannya, seperti ukuran, warna, jarak, atau dekorasi.

Bayangkan Anda memiliki sebuah barang (`child` widget) yang ingin Anda letakkan di dalam sebuah kotak. `Container` adalah kotak itu, dan Anda bisa mengatur bagaimana kotak tersebut terlihat.

Properti Penting pada `Container`

• `child`: Properti ini menerima satu widget yang akan ditempatkan di dalam `Container`. Misalnya, Anda bisa meletakkan `Text`, `Image`, atau bahkan `Column` di dalamnya.

• `color`: Mengatur warna latar belakang kotak (misalnya, `Colors.blueAccent`).

• `width` dan `height`: Mengatur lebar dan tinggi kotak dalam piksel.

• `padding`: Mengatur **jarak dari dalam**. Ini adalah ruang antara konten (`child`) dengan tepi bagian dalam `Container`.

• `margin`: Mengatur **jarak dari luar**. Ini adalah ruang antara `Container` dengan widget lain di sekelilingnya.

• `decoration`: Properti yang sangat kuat untuk menambahkan dekorasi yang lebih kompleks pada `Container` melalui objek `BoxDecoration`. Anda bisa mengatur:

  • Warna latar belakang.
  • Batas (border).
  • Sudut melengkung (misalnya, `borderRadius: BorderRadius.circular(10)`).
  • Bayangan (shadow).

Contoh Kode

Contoh kode di bawah ini membuat sebuah kotak berwarna biru dengan lebar dan tinggi 200, memiliki jarak luar 20, jarak dalam 20, dan batas putih dengan sudut melengkung.

Output:

Widget `ElevatedButton`

Widget `ElevatedButton` adalah jenis tombol yang memiliki efek bayangan (shadow) yang terangkat dari layar. Ini memberikan kesan bahwa tombol tersebut dapat ditekan, menjadikannya pilihan yang baik untuk aksi utama yang penting dalam aplikasi.

Properti Penting pada `ElevatedButton`

• `onPressed`: Ini adalah properti terpenting. Properti ini menerima sebuah fungsi atau "callback" yang akan dijalankan ketika tombol ditekan. Jika properti ini diatur ke `null`, tombol akan menjadi non-aktif atau tidak bisa ditekan.

• `child`: Properti ini menerima satu widget yang akan ditampilkan di dalam tombol. Biasanya, widget yang digunakan adalah `Text` untuk menampilkan label tombol, atau `Icon` untuk menampilkan ikon.

• `style`: Properti ini memungkinkan Anda untuk mengubah tampilan tombol secara menyeluruh melalui objek `ButtonStyle` (atau `ElevatedButton.styleFrom` untuk cara yang lebih ringkas). Anda bisa mengatur:

  • `backgroundColor`: Warna latar belakang tombol.
  • `foregroundColor`: Warna teks atau ikon di dalam tombol.
  • `padding`: Jarak di dalam tombol.
  • `shape`: Bentuk tombol (misalnya, dengan sudut melengkung).

Contoh Kode

Contoh kode di bawah ini membuat tombol berwarna hijau dengan teks putih, memiliki jarak dalam 20, dan sudut melengkung 16. Ketika tombol ditekan, ia akan mencetak tulisan "tombol ditekan" di konsol.

Output:

Widget `Icon`

Widget `Icon` digunakan untuk menampilkan ikon di layar aplikasi Anda. Flutter menyediakan banyak sekali pilihan ikon bawaan, seperti **Material Icons** dari Google (yang paling umum) dan **Cupertino Icons** dari Apple.

Properti Penting pada `Icon`

• `icon`: Properti ini wajib ada. Anda harus menentukan ikon mana yang akan ditampilkan dengan memilih dari kelas `Icons` atau `CupertinoIcons`. Contohnya, `Icons.add` untuk menampilkan ikon tambah.

• `color`: Mengatur warna ikon (misalnya, `Colors.amber` untuk warna kuning). Anda bisa memilih dari berbagai pilihan warna yang sudah disediakan oleh Flutter.

• `size`: Mengatur ukuran ikon dalam satuan piksel (misalnya, `50.0` untuk ukuran 50).

Contoh Kode

Berikut adalah dua contoh penggunaan widget `Icon`:

Output:

Widget `Image`

Widget `Image` adalah widget dasar yang sangat penting untuk menampilkan gambar dari berbagai sumber. Anda bisa menampilkannya dari aset lokal di komputer, dari internet, atau bahkan dari data yang ada di memori.

Properti Penting pada `Image`

• `image`: Properti ini menerima objek yang disebut `ImageProvider`, yang menentukan sumber gambar. Contohnya, `AssetImage` jika gambar berasal dari folder proyek, atau `NetworkImage` jika gambar dari internet.

• `width` dan `height`: Mengatur ukuran (lebar dan tinggi) gambar.

• `fit`: Mengatur bagaimana gambar akan menyesuaikan diri dalam ruang yang tersedia. Beberapa nilai yang sering digunakan adalah:

  • `BoxFit.cover`: Gambar akan diperbesar untuk menutupi seluruh area, dan mungkin ada bagian gambar yang terpotong.
  • `BoxFit.contain`: Gambar akan diperkecil agar pas di dalam area tanpa ada yang terpotong, sehingga mungkin ada ruang kosong di sekelilingnya.
  • `BoxFit.fill`: Gambar akan diregangkan untuk mengisi seluruh area, dan mungkin terlihat tidak proporsional.

• `alignment`: Mengatur posisi gambar di dalam ruang yang tersedia (misalnya, `Alignment.center` untuk memposisikan gambar di tengah).

Contoh Kode (Network Image)

Contoh di bawah ini menunjukkan cara menampilkan gambar yang diambil langsung dari internet menggunakan `Image.network`.

Output:

Asset Image

Untuk menampilkan gambar dari aset lokal (gambar yang disimpan di dalam folder proyek Anda), ada beberapa langkah yang perlu diikuti.

Langkah-langkah:

1. Buat folder: Di dalam folder utama proyek Anda, buat folder baru, misalnya `assets/images`.

2. Masukkan gambar: Masukkan file gambar Anda (misalnya, `logo.png`) ke dalam folder `assets/images` yang baru saja Anda buat.

   

3. Daftarkan di `pubspec.yaml`: Buka file `pubspec.yaml` dan tambahkan lokasi folder aset Anda di bawah bagian `flutter:`. Perhatikan spasi atau indentasi yang benar.

   

   Setelah mengedit file ini, jalankan `flutter pub get` di terminal Anda untuk memperbarui dependensi proyek.

Contoh Kode

Setelah gambar didaftarkan, Anda bisa menampilkannya menggunakan `Image.asset` dengan jalur yang sesuai. Contoh kode di bawah ini menampilkan gambar `logo.png` dengan lebar 100 dan tinggi 150.

Output:

Widget `CircleAvatar`

Widget `CircleAvatar` adalah widget yang sangat berguna untuk menampilkan gambar profil pengguna atau inisialnya dalam bentuk lingkaran. Widget ini sering digunakan dalam daftar kontak, chat, atau halaman profil.

Properti Penting pada `CircleAvatar`

• `child`: Properti ini menerima satu widget yang akan ditampilkan di dalam lingkaran. Biasanya, Anda akan menempatkan `Text` (untuk inisial nama) atau `Icon` di sini.

• `backgroundImage`: Properti ini digunakan untuk menampilkan gambar dari sumber eksternal, seperti dari internet (`NetworkImage`) atau dari folder aset lokal (`AssetImage`).

• `radius`: Mengatur ukuran lingkaran. Nilai ini mengontrol jari-jari lingkaran dalam piksel, sehingga semakin besar angkanya, semakin besar lingkarannya. Ukuran defaultnya adalah 20.

• `backgroundColor`: Mengatur warna latar belakang lingkaran.

Contoh Kode

Berikut adalah dua contoh penggunaan `CircleAvatar`. Yang pertama menampilkan inisial "IF" di dalam lingkaran hijau, sementara yang kedua menampilkan ikon orang di dalam lingkaran biru.

Output:

---

Tugas

1. Buatlah tampilan widget secara vertical dan horizontal dengan menggunakan minimal 3 buah basic widget dalam 1 tampilan

Output:

2. Buatlah tampilan yang berisi informasi profile kalian (foto, nama, nim, Alamat, nomor handphone, jurusan) dengan mengimplementasikan seluruh basic widget yang ada pada modul praktikum ini.

Output:

Link Tugas bisa diakses melalui link : https://github.com/muhammadhafiz27/Widget-Flutter-Sederhana.git

Setup Environment, Dart Dasar dan OOP Dart

Read More