Modul Tutorial menggunakan Flutter untuk Pemrograman Mobile

Assalamu‘alaikum wr. wb.

Hello guys! Untuk mengembangkan Aplikasi berbasis Mobile (Seluler), kita telah mengenal salah satu Framework Mobile Programming yang namanya Flutter. Flutter sendiri merupakan salah satu Framework yang menggunakan Bahasa Dart.

PENGERTIAN FLUTTER

Sumber : AWS.Amazon.com dan Wikipedia.org

Secara umum, mengembangkan aplikasi seluler adalah tugas yang kompleks dan menantang. Ada banyak kerangka kerja yang tersedia untuk mengembangkan aplikasi seluler. Android menyediakan kerangka kerja asli berdasarkan bahasa Java dan iOS menyediakan kerangka kerja asli berdasarkan bahasa Objective-C / Swift.

Namun, untuk mengembangkan aplikasi yang mendukung kedua sistem operasi tersebut, kita perlu melakukan pemrograman dalam dua bahasa yang berbeda menggunakan dua kerangka kerja yang berbeda. Untuk membantu mengatasi kompleksitas ini, terdapat kerangka kerja seluler yang mendukung kedua sistem operasi tersebut. Kerangka kerja ini berkisar dari kerangka kerja aplikasi seluler hibrida berbasis HTML yang sederhana (yang menggunakan HTML untuk Antarmuka Pengguna dan JavaScript untuk logika aplikasi) hingga kerangka kerja khusus bahasa yang kompleks (yang melakukan pekerjaan berat mengubah kode menjadi kode asli). Terlepas dari kesederhanaan atau kompleksitasnya, kerangka kerja ini selalu memiliki banyak kekurangan, salah satu kelemahan utamanya adalah kinerja yang lambat.

Dalam skenario ini, Flutter - kerangka kerja yang sederhana dan berkinerja tinggi berdasarkan bahasa Dart, memberikan kinerja tinggi dengan merender Antarmuka Pengguna langsung dalam kanvas sistem operasi daripada melalui kerangka kerja asli.

Flutter juga menawarkan banyak widget (UI) siap pakai untuk membuat aplikasi modern. Widget-widget ini dioptimalkan untuk lingkungan seluler dan merancang aplikasi menggunakan widget sama mudahnya seperti merancang HTML.

Secara khusus, aplikasi Flutter itu sendiri adalah widget. Widget Flutter juga mendukung animasi dan gesture. Logika aplikasi didasarkan pada pemrograman reaktif. Widget dapat memiliki status secara opsional. Dengan mengubah status widget, Flutter secara otomatis (pemrograman reaktif) akan membandingkan status widget (lama dan baru) dan merender widget dengan perubahan yang diperlukan saja daripada merender ulang seluruh widget.

A. Pengertian Flutter

Flutter adalah Framework Open Source untuk membuat aplikasi seluler berkualitas tinggi dan berkinerja tinggi di seluruh sistem operasi seluler - Android dan iOS. Ini menyediakan SDK yang sederhana, kuat, efisien, dan mudah dipahami untuk menulis aplikasi seluler dalam bahasa milik Google, yaitu Dart. Tutorial ini membahas dasar-dasar kerangka kerja Flutter, instalasi Flutter SDK, pengaturan Android Studio untuk mengembangkan aplikasi berbasis Flutter, arsitektur kerangka kerja Flutter, dan pengembangan berbagai jenis aplikasi seluler menggunakan kerangka kerja Flutter.

Saat Flutter diluncurkan pada Tahun 2018, Flutter terutama mendukung pengembangan aplikasi seluler. Flutter kini mendukung pengembangan aplikasi di enam platform: iOS, Android, web, Windows, MacOS, dan Linux.

B. Cara Kerja Flutter

Flutter mempermudah proses penciptaan antarmuka pengguna (UI) yang konsisten dan menarik untuk aplikasi yang dapat berjalan pada 6 (Enam) Platform yang didukung oleh kerangka kerja ini.

Jika kita membandingkan Flutter dengan pengembangan Native, kita dapat melihat perbedaannya. Di bawah ini, kami akan membandingkan pengembangan Aplikasi Native dengan pengembangan aplikasi lintas platform, dan kemudian kita akan menjelaskan fitur-fitur unik yang ditawarkan oleh Flutter.

1. Pengembangan Aplikasi Native dibandingkan dengan pengembangan Aplikasi Lintas Platform

Pengembangan Aplikasi Native adalah proses pengkodean aplikasi yang ditargetkan untuk satu platform tertentu, seperti iOS. Di sisi lain, pengembangan aplikasi lintas platform melibatkan pembuatan aplikasi yang dapat berjalan pada berbagai platform dengan menggunakan satu basis kode.

2. Pengembangan Aplikasi Native

Dalam pengembangan Aplikasi Native, pengembang menulis kode khusus untuk setiap platform yang mereka targetkan. Hal ini memberikan akses penuh kepada fitur-fitur perangkat yang khas untuk platform tersebut. Keuntungan utama dari pengembangan aplikasi native adalah kinerja dan kecepatannya yang lebih tinggi dibandingkan dengan pengembangan lintas platform.

Namun, pengembangan aplikasi native memiliki beberapa kerugian, termasuk kebutuhan akan lebih banyak kode dan pengembang. Ini juga dapat menghasilkan tantangan saat peluncuran aplikasi di berbagai platform dengan tujuan memberikan pengalaman pengguna yang seragam. Di sinilah penggunaan kerangka kerja pengembangan aplikasi lintas platform seperti Flutter menjadi relevan.

3. Pengembangan Aplikasi Lintas Platform

Pengembangan aplikasi lintas platform memungkinkan pengembang untuk menggunakan satu bahasa pemrograman dan satu basis kode untuk membangun aplikasi yang dapat dijalankan di berbagai platform. Jika aplikasi Anda ditujukan untuk berbagai platform, pendekatan ini dapat menghemat waktu dan biaya.

Meskipun demikian, pengembangan aplikasi lintas platform mungkin memiliki beberapa keterbatasan, termasuk keterbatasan dalam akses ke fitur-fitur perangkat yang khas untuk setiap platform. Namun, Flutter memiliki berbagai fitur yang mengatasi beberapa masalah ini, memungkinkan pengembangan aplikasi lintas platform yang lebih mulus dan berkualitas tinggi.

C. Kelebihan dan Kekurangan Flutter

Flutter dilengkapi dengan widget-widget yang indah dan dapat disesuaikan untuk aplikasi seluler yang berkinerja tinggi dan luar biasa. Ini memenuhi semua kebutuhan dan persyaratan kustom. Selain itu, Flutter menawarkan banyak keunggulan lain seperti yang disebutkan di bawah ini :

• Dart memiliki repositori paket perangkat lunak yang besar yang memungkinkan Anda untuk memperluas kemampuan aplikasi Anda.
• Pengembang hanya perlu menulis satu kode sumber untuk kedua aplikasi (baik platform Android maupun iOS). Flutter kemungkinan akan diperluas ke platform lain di masa depan.
• Flutter membutuhkan pengujian yang lebih sedikit. Karena kode sumber tunggal, sudah cukup jika kita menulis tes otomatis sekali untuk kedua platform.
• Kesederhanaan Flutter membuatnya menjadi kandidat yang baik untuk pengembangan yang cepat. Kemampuan penyesuaian dan perluasan membuatnya bahkan lebih kuat.
• Dengan Flutter, pengembang memiliki kontrol penuh atas widget dan tata letaknya.
• Flutter menawarkan alat pengembang yang hebat, dengan hot reload yang menakjubkan.

Meskipun memiliki banyak keunggulan, Flutter memiliki beberapa kekurangan berikut ini :

• Karena dikodekan dalam bahasa Dart, seorang pengembang perlu mempelajari bahasa baru (meskipun mudah untuk dipelajari).
• Kerangka kerja modern berusaha memisahkan logika dan antarmuka pengguna sebanyak mungkin, tetapi dalam Flutter, antarmuka pengguna dan logika saling tercampur. Kita dapat mengatasi ini dengan menggunakan pemrograman cerdas dan menggunakan modul berlevel tinggi untuk memisahkan antarmuka pengguna dan logika.
• Flutter hanyalah satu lagi kerangka kerja untuk membuat aplikasi seluler. Pengembang kesulitan dalam memilih alat pengembangan yang tepat dalam segmen yang sangat padat ini.

D. Sejarah Perkembangan Flutter

Flutter adalah kerangka kerja pengembangan aplikasi seluler yang awalnya dikenal sebagai "Sky" dan berjalan pada sistem operasi Android. Flutter pertama kali diperkenalkan dalam Dart developer summit pada Tahun 2015 dengan tujuan untuk mampu merender konten secara konsisten pada 120 frame per detik. Pada September 2018, Google mengumumkan Flutter Release Preview 2 selama Google Developer Days di Shanghai, yang merupakan rilis utama terakhir sebelum Flutter 1.0. Pada Tanggal 4 Desember 2018 (26 Rabi'ul Awal 1440 H), Flutter 1.0 dirilis dalam acara Flutter Live, menandai versi stabil pertama dari kerangka kerja tersebut. Pada tanggal 11 Desember 2019 (14 Rabi'ul Akhir 1441 H), Flutter 1.12 dirilis dalam acara Flutter Interactive.

Pada Tanggal 6 Mei 2020 (13 Ramadhan 1441 H), Dart software development kit (SDK) versi 2.8 dan Flutter 1.17.0 dirilis, menambahkan dukungan untuk API Metal yang meningkatkan kinerja pada perangkat iOS sekitar 50%, serta widget Material baru dan alat pengembangan pelacakan jaringan.

Pada tanggal 3 Maret 2021 (19 Rajab 1442 H), Google merilis Flutter 2 selama acara Flutter Engage online. Pembaruan utama ini membawa dukungan resmi untuk aplikasi berbasis web dengan renderer baru bernama Canvas Kit dan widget khusus web, dukungan aplikasi desktop yang masih dalam akses awal untuk Windows, macOS, dan Linux, serta peningkatan API Add-to-App. Rilis ini juga menggunakan Dart 2.0 yang menampilkan null-safety, yang menyebabkan banyak perubahan besar dan masalah dengan banyak paket eksternal; namun, tim Flutter menyertakan petunjuk dan alat untuk mengatasi masalah ini.

Pada Tanggal 8 September 2021 (30 Muharram 1443 H), Google merilis Dart 2.14 dan Flutter 2.5. Pembaruan ini membawa peningkatan pada mode layar penuh Android dan versi terbaru dari Material Design Google yang disebut Material You. Dart menerima dua pembaruan baru, yaitu standarisasi kondisi lint dan dukungan stabil untuk Apple Silicon.

Pada Tanggal 12 Mei 2022 (10 Syawal 1443 H), Google mengumumkan rilis Flutter 3 dan Dart 2.17. Pembaruan ini memperluas jumlah platform yang didukung menjadi enam, termasuk dukungan stabil untuk Linux dan macOS pada prosesor Intel dan Apple Silicon.

Pada Tanggal 30 Agustus 2022 (2 Shafar 1444 H), diumumkan Flutter 3.3. Rilis ini menampilkan interop Objective-C dan Swift serta pratinjau awal mesin pengurai baru yang disebut "Impeller" yang bertujuan untuk mengurangi stutter yang disebabkan oleh kompilasi shader.

Pada Tanggal 25 Januari 2023 (3 Rajab 1444 H), Flutter 3.7 telah resmi diluncurkan.

PERSIAPAN INSTALASI FLUTTER

Sumber : Pilarteknotama.co.id

[Anda juga bisa melihatnya di sini (Miniblog - enzashorts.blogspot.com).]

Flutter adalah sebuah Kerangka Kerja (Framework) SDK (Software Development Kit) mobile yang dikembangkan dan diperkenalkan oleh Google. Tujuannya adalah untuk memungkinkan pengembangan aplikasi yang dapat digunakan di berbagai perangkat dengan basis kode yang sama. Dengan kata lain, pengembang dapat membuat aplikasi yang kompatibel dengan platform-platform berbeda seperti Android, iOS, Web, dan Desktop (Windows) menggunakan satu kode sumber yang sama. Flutter memiliki 2 (Dua) komponen penting, yaitu, Software Development Kit (SDK) dan juga Framework User Interface (UI).

Berikut ini adalah Cara Install Flutter di Windows.

Pertama, bukalah Situs Resmi Flutter di sini (Flutter.dev).

Lalu, klik pada Tombol "flutter_windows_3.x.x-stable.zip" untuk menginstal Flutter di Windows.

Setelah berhasil Download, Extract file zip tersebut, jangan tempel Folder "flutter" di "Program files" dan Tempelkan ke :

C:\Users\[NAMA USER PC ANDA]

Contoh punya saya :

C:\Users\Inzaghi Posuma

Tunggulah sampai semuanya sudah ter-Ekstrak.

Selanjutnya, kita atur lagi di bagian System Environment Variables yang ada di Komputer Windows.

Kemudian, kita atur dengan mengeklik "Environment Variables...", cari di bagian Path lalu klik "Edit...", lalu klik di Tombol "New" dan tempelkan Alamat Folder Flutter tadi. Setelah itu, klik di Tombol "OK" semuanya.

Alamat Folder Flutter :

C:\Users\[NAMA USER PC ANDA]\flutter\bin

Contoh punya saya :

C:\Users\Inzaghi Posuma\flutter\bin

Terakhir, ketiklah "flutter" di Command Prompt (CMD) untuk memeriksa apakah Flutter tersebut sudah terinstal atau belum.

PERSIAPAN INSTALASI PLUGIN FLUTTER

A. Install Plugin Flutter di Android Studio

Sumber : Jagongoding.com

Pastikan bahwa Flutter telah terpasang pada sistem operasi, kita harus memastikan juga bahwa aplikasi Android Studio (minimal versi 3.0) telah terpasang.

Pertama, bukalah Android Studio terlebih dahulu, kemudian bukalah pada bagian "Plugins" dan klik "Install".

Jika ditanya mengenai Third Party Plugins Privacy Note, maka klik Tombol "Accept".

Setelah itu klik "Install", karena Flutter membutuhkan Plugin Dart.
Tunggulah beberapa saat untuk proses Instalasi.

Jika sudah, maka klik Tombol "Restart" untuk melakukan Restart dari Aplikasi Android Studio.

Jika sudah, maka buka kembali Android Studio IDE.

B. Install Plugin/Extensions Flutter di VS Code

Sumber : Geeksforgeeks.org dan Bosctechlabs.com

1. Install Extension di VS Code

Pertama, bukalah Visual Studio Code terlebih dahulu. Dan ketiklah "flutter" untuk menginstal Flutter, kemudian klik "Install".

Jika sudah, maka lakukan Instalasi Extension Dart di VS Code dengan mengetik "dart", dan klik "Install".

Sekarang kita telah berhasil menambahkan Flutter dan Dart ke kode Visual studio, sekarang mari kita periksa apakah flutter sudah diinstal atau belum. Untuk ini kita akan membuka terminal baru di Visual Studio Code dan mengetikkan berikut ini di Command Line VS Code :

flutter --version

Jika semuanya baik-baik saja maka biasanya akan menampilkan versi flutter yang di-Install.

2. Setup Emulator di VS Code

Pertama, bukalah VS Code klik pada bagian Extensions. Ketiklah "emulator" dan carilah Ekstensi Android iOS Emulator, dan klik "Install".

Kemudian, klik pada bagian "Settings" dan ketiklah "emulator" untuk mengatur Emulator di VS Code.

MEMBUAT PROGRAM APLIKASI FLUTTER SEDERHANA

A. Android Studio

Sumber : 

Pertama, bukalah Android Studio terlebih dahulu, dan klik "New Flutter Project".

Setelah itu, pilihlah Direktori Folder yang ingin Anda simpan. Setelah itu, klik "Ok" dan pilih "Next".

Selanjutnya, Anda akan diminta untuk memberikan Nama Proyek yang ingin kalian namai. Jika sudah, maka klik "Create".

Tunggulah beberapa saat sampai Loading-nya selesai.

Jika sudah, maka kamu bebas memodifikasi Kode Program Dart untuk Project Flutter Sederhana.

Kemudian, pilihlah Perangkat (Device) yang Anda punya, misalnya Chrome, Edge, atau Ponsel Anda yang terhubung. Tapi saya akan memilih Chrome agar bisa dijalankan. Setelah itu, klik Tombol "Run (▶)" di sebelah "Debug".

Kemudian, tunggulah beberapa saat untuk menjalankan (Run) Program Dart untuk Project Flutter.

Jika sudah, maka akan seperti ini hasilnya :

Inilah Kode Program Sederhana untuk Tutorial di atas (Dengan Nama File sebagai main.dart) :

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({super.key});
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}
class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title})
  final String title;
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

B. VS Code

Sumber : Docs.Flutter.dev dan Docs.Flutter.dev (Assets and Images)

Pertama, bukalah Visual Studio Code terlebih dahulu, kemudian bukalah Terminal di VS Code.

Kemudian, ketilah Perintah berikut ini :

flutter create [NamaProject]
cd [NamaProject]

Misalnya :

flutter create my_app
cd my_app

Kemudian, marilah kita buka Program Dart yang beralamatkan "lib/main.dart". Kemudan, ubahlah sedikit demi sedikit agar menjadi seperti ini :

Kode Program (main.dart) :

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.blue),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}
class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.primary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'Hello World!\n'
              'You have pushed the button this many times:',
              textAlign: TextAlign.center,
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline6,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

Untuk Kode Program-nya, sedikit hampir sama seperti pada Contoh di atas yang menggunakan Android Studio, hanya saja sedikit diubah.

Jika ingin melakukan Analisis Project Flutter, ketiklah perintah ini :

flutter analyze

Dan jika ingin menguji (Testing) Project Flutter, ketiklah perintah ini :

flutter test

Jika ingin menjalankan Program Flutter sederhana, ketiklah Perintah berikut ini jika tidak memasukkan Method ke dalam Program Dart :

flutter run lib/main.dart

Sebenarnya, cukup menuliskan Perintah ini saja :

flutter run

Lalu Pilih Perangkat/Device yang Anda miliki. Misalnya saya pilih "Chrome", maka ketiklah "2".

Tunggulah beberapa saat sampai programnya jalan, jika sudah maka akan seperti ini hasilnya :

STRUKTUR FOLDER DALAM FLUTTER

Sumber : Geeksforgeeks.org (Flutter File Structure) dan Codewithandrea.com (Struktur Folder dalam Flutter)

Ketika membangun aplikasi Flutter yang besar, salah satu hal pertama yang harus kita putuskan adalah bagaimana struktur proyek kita.

Hal ini memastikan bahwa seluruh tim dapat mengikuti konvensi yang jelas dan menambahkan fitur dengan cara yang konsisten. Jadi, dalam artikel ini, kita akan menjelajahi dua pendekatan umum untuk struktur proyek kita: feature-first dan layer-first.

Kita akan mempelajari tentang kompromi yang perlu dilakukan dan mengidentifikasi masalah umum ketika mencoba mengimplementasikannya pada aplikasi dunia nyata. Dan kita akan mengakhiri dengan panduan langkah-demi-langkah yang jelas tentang bagaimana Anda dapat menyusun proyek Anda, menghindari kesalahan yang mahal sepanjang jalan.

A. Struktur Proyek dalam Arsitektur Aplikasi Flutter

Dalam praktiknya, kita hanya dapat memilih struktur proyek setelah kita memutuskan arsitektur aplikasi apa yang akan digunakan.

Hal ini karena arsitektur aplikasi memaksa kita untuk menentukan lapisan terpisah dengan batas yang jelas. Dan lapisan-lapisan itu akan muncul sebagai folder-folde pada proyek kita.

Jadi, untuk sisa artikel ini, kita akan menggunakan Arsitektur Aplikasi Riverpod saya sebagai referensi :

Arsitektur ini terdiri dari empat lapisan yang berbeda, masing-masing berisi komponen-komponen yang dibutuhkan oleh aplikasi kita :

• Presentation : widget, state, dan controller
• Application : layanan (services)
• Domain : model
• Data : repositori, sumber data, dan DTOs (objek transfer data)

Tentu saja, jika kita hanya membuat aplikasi satu halaman, kita bisa meletakkan semua file dalam satu folder dan selesai.

Tetapi segera setelah kita mulai menambahkan lebih banyak halaman dan memiliki berbagai model data untuk ditangani, bagaimana kita dapat mengorganisir semua file kita secara konsisten?

Dalam praktiknya, seringkali digunakan pendekatan feature-first atau layer-first. Jadi mari kita jelajahi kedua konvensi ini lebih detail dan pelajari tentang pertimbangannya.

B. Struktur Proyek Flutter

Untuk mengatasi semua masalah ini, kita perlu memiliki struktur file yang baik dalam aplikasi Flutter kita, dan itulah yang akan kita bahas dalam artikel ini. Meskipun Flutter tidak memberikan rekomendasi dalam struktur aplikasi, kita tetap harus melakukannya dengan cara terbaik. Untuk mencapai struktur file yang terbaik dari aplikasi Flutter umum, kita akan membaginya menjadi tujuh bagian. Tetapi sebelum itu, satu hal penting yang perlu selalu diingat adalah penamaan file dan direktori harus selalu dalam format yang benar. Misalnya, jika seseorang membuat aplikasi media sosial dan ingin membuat file untuk menyimpan data pengguna, maka ini adalah cara penamaannya.

Naming for files and directories
//this is the right method
user_data.dart (lower case for both words separated by underscore)
//these methods should be avoided
userData.dart (camel case)
UserData.dart (upper case for both words)
Loginview.dart (upper case for first word)
Login_View.dart (upper case for both words separated by underscore)

Setiap kali kita membuat proyek baru di Flutter, ini adalah file dan direktori yang disediakan. Tetapi ini hanya dasar-dasar, kita akan menambahkan beberapa folder dan file lain di proyek yang tercantum di bawah.

📁 nama_project_aplikasi
├── 📁 .dart_tool
├── 📁 .idea
├── 📁 android
├── 📁 assets
   ├── 📁 images
   ├── 📁 fonts
   ├── 📁 logos
   ├── 📁 icons
   ├── 📁 videos
├── 📁 build
├── 📁 cloud_functions
├── 📁 ios
├── 📁 lib
   ├── 📁 file_project_dart
   ├── 📁 models
   ├── 📁 providers
   ├── 📁 screens
   ├── 📁 ultilities
   ├── 📁 widgets
   ├── main.dart
├── 📁 linux
├── 📁 macos
├── 📁 test
   ├── widget_test.dart
├── 📁 web
├── 📁 windows
├── .gitignore
├── .metadata
├── analysis_options.yaml
├── nama_project_aplikasi.iml
├── pubspec.lock
├── pubspec.yaml
├── README.md

1. Assets (Aset Statis untuk Aplikasi)

Direktori ini berada pada tingkat akar dan akan berisi semua aset statis yang digunakan dalam aplikasi, seperti font, ikon, logo, gambar latar belakang, video demo, dll. Sangat direkomendasikan untuk memiliki direktori yang berbeda untuk jenis data yang berbeda, misalnya gambar, video, dan logo, seharusnya memiliki folder sendiri agar lebih mudah untuk memelihara dan mengaksesnya.

📁 nama_project_aplikasi
├── 📁 cloud_functions

2. Fungsi Cloud (Fungsi Cloud yang digunakan dalam Aplikasi)

Fungsi cloud adalah kode back-end yang disimpan pada beberapa server seperti Google Cloud, fungsi ini berjalan ketika suatu peristiwa tertentu terjadi. Contoh fungsi cloud dalam media sosial dapat berupa fungsi yang pada klik tombol membuka URL yang menerima data teks, audio, atau video dan menyimpannya di server untuk penggunaan di masa depan. Ini menjadi sangat nyaman ketika semua fungsi cloud berada pada tingkat akar aplikasi.

📁 nama_project_aplikasi
├── 📁 assets
   ├── 📁 images
   ├── 📁 fonts
   ├── 📁 logos
   ├── 📁 icons
   ├── 📁 videos

3. Layar/Screens (Tampilan UI Aplikasi)

Direktori ini akan berisi tata letak aktual dari UI untuk seluruh aplikasi. Ini dapat dibagi lagi menjadi dua atau tiga folder. Satu yang menyimpan layar awal dan halaman onboarding seperti layar login/pendaftaran, folder kedua dapat menyimpan layar utama dan layar umum lainnya, dan folder ketiga dapat berisi layar yang tidak terlalu penting.

📁 nama_project_aplikasi
├── 📁 lib
   ├── 📁 screens
   ├── main.dart

4. Provider (Interaksi di luar Aplikasi)

Direktori ini seharusnya berisi semua interaksi yang mentransaksikan data dari luar aplikasi. Ini berbeda dari fungsi cloud, karena tidak ada kode dalam direktori ini yang akan berinteraksi dengan penyimpanan cloud atau server. Jika kita mempertimbangkan aplikasi cuaca, contoh bagusnya adalah data cuaca dan lokasi yang diterima dari API dalam bentuk JSON yang perlu diterjemahkan untuk digunakan.

📁 nama_project_aplikasi
├── 📁 lib
   ├── 📁 providers
   ├── 📁 screens
   ├── main.dart

5. Utilitas (Fungsi atau Logika yang digunakan dalam Aplikasi)

Direktori ini akan menyimpan semua logika aplikasi atau logika bisnis dari seluruh aplikasi kami. Sekali lagi, contoh bagus dalam aplikasi cuaca akan ketika pengguna memilih lokasi yang berbeda, data cuaca juga harus berubah sesuai. Atau dalam kasus aplikasi media sosial ketika masuk ke aplikasi, data aplikasi juga harus berubah sesuai.

📁 nama_project_aplikasi
├── 📁 lib
   ├── 📁 file_project_dart
   ├── 📁 ultilities
      ├── logic.dart
   ├── main.dart

6. Widget (Widget / Tata Letak yang digunakan dalam Aplikasi)

Dari namanya saja sudah jelas bahwa folder ini akan menyimpan semua widget statis atau widget yang digunakan beberapa kali dalam aplikasi. Sebagai contoh, jika ini adalah aplikasi media sosial seperti Instagram, daftar semua teman yang disarankan selalu sama, satu-satunya yang berubah adalah data. Atau jika ini adalah aplikasi cuaca, tile yang menunjukkan lokasi tertentu sama untuk semua lokasi, satu-satunya yang berubah adalah nama tempat.

📁 nama_project_aplikasi
├── 📁 lib
   ├── 📁 file_project_dart
   ├── 📁 ultilities
   ├── 📁 widgets
      ├── appbar.dart
   ├── main.dart

7. Model (Kumpulan Data)

Model adalah kumpulan data yang biasanya berasal dari server, pengguna, atau API eksternal, ini digunakan bersama dengan widget untuk melengkapi antarmuka pengguna aplikasi. Sekali lagi, mengambil contoh aplikasi cuaca, model atau set data bisa berupa nama lokasi, Suhu dalam Celsius dan Fahrenheit. Jika kita mempertimbangkan aplikasi media sosial yang menampilkan halaman profil pengguna, maka dapat berisi nama pengguna, usia, foto profil, deskripsi, dll.

📁 nama_project_aplikasi
├── 📁 lib
   ├── 📁 file_project_dart
   ├── 📁 models
      ├── appbar.dart
   ├── main.dart

STATE MANAGEMENT DALAM FLUTTER

Sumber : Javatpoint.com, Medium.com (@analytics-vidhya), dan Geeksforgeeks.org

Dalam bagian ini, kita akan membahas manajemen status dan bagaimana kita dapat mengelolanya di Flutter. Kita tahu bahwa di Flutter, segalanya adalah widget. Widget dapat diklasifikasikan menjadi dua kategori, satu adalah widget Stateless, dan yang lain adalah widget Stateful. Widget Stateless tidak memiliki status internal. Ini berarti setelah dibuat, kita tidak dapat mengubah atau memodifikasinya sampai mereka diinisialisasi kembali. Di sisi lain, widget Stateful bersifat dinamis dan memiliki status. Ini berarti kita dapat memodifikasinya dengan mudah sepanjang siklus hidupnya tanpa harus menginisialisasikannya lagi.

A. Apa itu State dalam Flutter?

Sebuah status adalah informasi yang dapat dibaca ketika widget dibangun dan mungkin berubah atau dimodifikasi sepanjang masa aplikasi. Jika Anda ingin mengubah widget Anda, Anda perlu memperbarui objek status, yang dapat dilakukan dengan menggunakan fungsi setState() yang tersedia untuk widget Stateful. Fungsi setState() memungkinkan kita untuk mengatur properti dari objek status yang memicu penggambaran ulang UI.

Manajemen status adalah salah satu proses yang paling populer dan penting dalam siklus hidup aplikasi. Menurut dokumentasi resmi, Flutter bersifat deklaratif. Ini berarti Flutter membangun UI-nya dengan merefleksikan status saat ini dari aplikasi Anda. Gambar di bawah menjelaskan lebih jelas di mana Anda dapat membangun UI dari status aplikasi.

Mari ambil contoh sederhana untuk memahami konsep manajemen status. Misalkan Anda telah membuat daftar pelanggan atau produk di aplikasi Anda. Sekarang, asumsikan Anda telah menambahkan pelanggan atau produk baru secara dinamis dalam daftar tersebut. Kemudian, perlu diperbarui daftar untuk melihat item yang baru ditambahkan ke dalam rekaman. Oleh karena itu, setiap kali Anda menambahkan item baru, Anda perlu memperbarui daftar. Jenis pemrograman seperti ini membutuhkan manajemen status untuk menangani situasi tersebut dan meningkatkan kinerja. Hal ini karena setiap kali Anda membuat perubahan atau memperbarui, status diperbarui.

Di Flutter, pengelolaan status dikategorikan menjadi dua tipe konseptual, yang diberikan di bawah ini :

• Keadaan Singkat (Ephemeral State)
• Status Aplikasi (App State)

B. Stateful dan Stateless Widget

State (Widget) adalah informasi yang dapat dibaca secara sinkron ketika widget dibangun dan mungkin berubah selama masa hidup widget tersebut.

Dengan kata lain, state dari widget adalah data dari objek yang propertinya (parameter) mendukung pada saat pembuatannya (ketika widget tersebut digambar di layar). State juga dapat berubah ketika digunakan, misalnya ketika widget CheckBox diklik, tanda centang muncul pada kotak.

1. Stateful Widget

Widget yang dapat mengubah state mereka setelah dibangun disebut Stateful Widgets. State ini bersifat mutable dan dapat berubah beberapa kali selama masa hidupnya. Ini hanya berarti bahwa state dari suatu aplikasi dapat berubah beberapa kali dengan set berbagai variabel, input, dan data. Berikut adalah struktur dasar dari stateful widget. Stateful widget mengganti metode createState() dan mengembalikan objek State. Ini digunakan ketika UI dapat berubah secara dinamis. Contoh-contoh dapat berupa CheckBox, RadioButton, Form, TextField.

Kelas yang mewarisi "Stateful Widget" bersifat immutable. Namun, State bersifat mutable yang berubah pada waktu runtime ketika pengguna berinteraksi dengannya.

Contoh :

import 'package:flutter/material.dart';
 
void main() => runApp(const MyApp());
 
class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);
 
  @override
  // ignore: library_private_types_in_public_api
  _MyAppState createState() => _MyAppState();
}
 
class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

Mari kita lihat apa yang ada dalam potongan kode ini. Nama dari Stateful Widget adalah MyApp yang dipanggil dari runApp() dan memperluas widget yang berkeadaan. Dalam kelas MyApp, kita mengganti fungsi createState(). Fungsi createState() ini digunakan untuk membuat state yang dapat berubah untuk widget ini pada lokasi tertentu dalam pohon. Metode ini mengembalikan sebuah instance untuk subclass state yang sesuai. Kelas lain yang disebut _MyAppState memperluas state, yang mengelola semua perubahan dalam widget. Di dalam kelas ini, fungsi build digantikan yang mengambil BuildContext sebagai parameter. Fungsi build ini mengembalikan sebuah widget di mana kita merancang UI dari aplikasi. Karena ini adalah stateful widget, fungsi build dipanggil banyak kali yang membuat seluruh UI sekali lagi dengan semua perubahan.

Contoh Stateful Widget :

import 'package:flutter/material.dart';
 
//This function triggers the build process
void main() => runApp(const MyApp());
 
// StatefulWidget
class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);
 
  @override
  // ignore: library_private_types_in_public_api
  _MyAppState createState() => _MyAppState();
}
 
class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Color.fromARGB(255, 241, 204, 167),
        appBar: AppBar(
          leading: const Icon(Icons.menu),
          backgroundColor: Colors.orange,
          title: const Text(
            "Inzaghi's Blog",
            textAlign: TextAlign.start,
          ),
        ), // AppBar
        body: const Center(
          child: Text(
            "Stateful Widget",
            style: TextStyle(color: Colors.black, fontSize: 30),
          ),
        ), // Container
      ), // Scaffold
    ); // MaterialApp
  }
}

Output :

Stateless Widget berguna ketika bagian dari antarmuka pengguna yang Anda deskripsikan tidak bergantung pada apa pun selain informasi konfigurasi dan BuildContext, sementara widget Stateful berguna ketika bagian dari antarmuka pengguna yang Anda deskripsikan dapat berubah secara dinamis.

Untuk melihat Proyek ini, silakan klik di sini (Zapp.run).

2. Stateless Widget

Widget yang statusnya tidak dapat diubah setelah dibangun disebut Stateless Widget. Widget-widget ini tidak dapat diubah setelah dibangun, yaitu setiap perubahan dalam variabel, ikon, tombol, atau pengambilan data tidak dapat mengubah status aplikasi. Di bawah ini adalah struktur dasar dari widget Stateless. Widget Stateless menggantikan metode build() dan mengembalikan widget. Sebagai contoh, kita menggunakan Text atau Icon dalam aplikasi flutter kita di mana status widget tidak berubah selama runtime. Ini digunakan ketika antarmuka pengguna bergantung pada informasi dalam objek itu sendiri. Contoh lain dapat berupa Text, RaisedButton, IconButton.

Contoh :

import 'package:flutter/material.dart';
 
void main() => runApp(const MyApp());
 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

Mari kita lihat apa yang diinformasikan oleh potongan kode kecil ini. Nama dari widget stateless ini adalah MyApp yang dipanggil dari runApp() dan mengextend widget stateless. Di dalam MyApp, fungsi build di-override dan mengambil BuildContext sebagai parameter. BuildContext ini unik untuk setiap widget karena digunakan untuk menemukan widget di dalam pohon widget.

Fungsi build berisi container yang merupakan widget Flutter di dalamnya kita akan mendesain antarmuka pengguna aplikasi. Pada widget stateless, fungsi build hanya dipanggil sekali yang membuat antarmuka pengguna dari layar.

Contoh Stateless Widget :

import 'package:flutter/material.dart';
 
//This function triggers the build process
void main() => runApp(const MyApp());
 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: const Color.fromARGB(255, 241, 204, 167),
        appBar: AppBar(
          leading: const Icon(Icons.menu),
          backgroundColor: Colors.orange,
          title: const Text(
            "Inzaghi's Blog",
            textAlign: TextAlign.start,
          ),
        ), // AppBar
        body: const Center(
          child: Text(
            "Stateless Widget",
            style: TextStyle(color: Colors.black, fontSize: 30),
          ),
        ), // Container
      ), // Scaffold
    ); // MaterialApp
  }
}

Output :

Untuk melihat Proyek ini, silakan klik di sini (Zapp.run).

Untuk melihat Compiler Flutter dan Dart, silakan lihat di sini (Zapp.run).

Mohon maaf apabila ada kesalahan sedikitpun pada Tutorial ini. Dan nantikan Pembahasan selanjutnya mengenai Flutter Mobile Apps seperti penggunaan Widget dan Layout di Flutter. Dan juga, nantikan Pembahasan Utama kami tentang Modul Pemrograman Dart.

Terima Kasih 😄😘👌👍 :)

Wassalamu‘alaikum wr. wb.