Flutter Flavorizr adalah package praktis yang dirancang untuk membantu developer mengatur berbagai konfigurasi aplikasi (flavors) dalam Flutter. Dengan package ini, Kita dapat dengan mudah membuat dan mengelola beberapa varian aplikasi tanpa ribet.
Apa itu Flavors?
Flavors, atau yang sering disebut product flavors adalah cara untuk membuat versi aplikasi yang berbeda dengan beberapa konfigurasi khusus, seperti:
Development, staging, dan productionenvironments
Ikon, warna, dan nama aplikasi yang berbeda
Base URL API yang berbeda
Fitur-fitur yang disesuaikan
Instalasi
Tambahkan flutter_flavorizr ke file pubspec.yaml proyek Flutter Anda
dev_dependencies:
flutter_flavorizr: ^2.2.3
Atau dengan menggunakan command berikut pada terminal Anda:
flutter pub add -d flutter_flavorizr
Konfigurasi Sederhana
Buat file flavorizr.yaml dan tambahkan konfigurasi seperti contoh di bawah ini:
File flavorizr.yaml adalah file konfigurasi untuk mengatur berbagai flavor dalam aplikasi Flutter menggunakan Flutter Flavorizr. Setiap bagian file ini memiliki fungsinya masing-masing.
1. ide
ide: "vscode"
Deskripsi: Menentukan editor yang digunakan untuk mengembangkan proyek.
Value: Diatur menjadi "vscode" untuk menunjuk bahwa proyek ini dikembangkan di Visual Studio Code.
Pilihan Lain: Anda juga bisa menggunakan "idea" jika menggunakan IntelliJ IDEA atau Android Studio.
Value ini akan memberikan configuration launch yang akan digunakan untuk menjalankan program
Berikut adalah contoh yang dihasilkan ketika kita mengisi value dari ide menjadi vscode:
Kemudian, tambahkan methodconstructor yang digunakan untuk mendapatkan flavor yang sedang aktif menggunakan library dari flutter services.
import 'package:flutter/services.dart' show appFlavor;
class F {
static Flavor selectedFlavor = Flavor.apple; static String get name => selectedFlavor.name; F() {
String? flavor = appFlavor;
if (flavor != null) {
selectedFlavor = getFlavor(flavor);
}
} static String get title {
switch (selectedFlavor) {
case Flavor.apple:
return 'Apple App';
case Flavor.banana:
return 'Banana App';
case Flavor.cherry:
return 'Cherry App';
default:
return 'title';
}
}
}
Sehingga file flavors.dart berubah menjadi seperti di bawah ini.
import 'package:flutter/services.dart' show appFlavor;
enum Flavor {
apple,
banana,
cherry,
}Flavor getFlavor(String name) {
switch (name) {
case 'apple':
return Flavor.apple;
case 'banana':
return Flavor.banana;
case 'cherry':
return Flavor.cherry;
default:
return Flavor.apple;
}
}class F {
static Flavor selectedFlavor = Flavor.apple; static String get name => selectedFlavor.name; F() {
String? flavor = appFlavor;
if (flavor != null) {
selectedFlavor = getFlavor(flavor);
}
} static String get title {
switch (selectedFlavor) {
case Flavor.apple:
return 'Apple App';
case Flavor.banana:
return 'Banana App';
case Flavor.cherry:
return 'Cherry App';
default:
return 'title';
}
}
}
2. Hapus main file yang tidak diperlukan
Setelah selesai memodifikasi file flavors.dart, langkah selanjutnya adalah menghapus file main_apple.dart, main_banana.dart, main_cherry.dart. Sehingga hanya akan ada satu file main.dart seperti gambar di bawah.
3. Modifikasi file main.dart
Kemudian, modifikasi file main.dart menjadi seperti di bawah ini
Bagian yang penting dan perlu diperhatikan adalah pada pemanggilan dari method constructor dari class F untuk menjalankan method yang sudah kita buat sebelumnya.
4. Modifikasi file launch.json
Kemudian, langkah selanjutnya adalah mengkonfigurasi file `.vscode/launch.json` yang telah ter- generate sebelumnya. Ubah seluruh config yang menunjukkan ke main file yang telah kita hapus sebelumnya sehingga menjadi seperti di bawah ini.
Kemudian, ubah beberapa konfigurasi untuk iOS yang masih mengarah ke main file sebelumnya. Untuk cara mudahnya, kita tinggal menggunakan fitur search dari vscode.
Ubah keseluruhan, mulai dari main_apple, main_banana, dan main_cherry menjadi main.dart. Sehingga akan menjadi seperti contoh di bawah.
File .vscode/launch.json sebelumnya akan memberikan kita konfigurasi yang akan digunakan untuk menjalankan aplikasi sesuai dengan command yang tertera pada file. Jika kita mengarah pada section Run and Debug pada VS Code. Kita akan mendapati sebuah konfigurasi seperti berikut:
Jika kita ingin menjalankan flavor cherry, maka kita tinggal memilih konfigurasi cherry, baik itu Debug, Profile, maupun Release version.
Berikut adalah hasil-hasil dari semua flavor yang telah dijalankan.
Menambahkan Base Url Sesuai dengan Flavor
Untuk menambahkan base url berdasarkan flavor, kita perlu mengubah file flavors.dart
static String get baseUrl {
switch (selectedFlavor) {
case Flavor.apple:
return 'https://apple.com';
case Flavor.banana:
return 'https://banana.com';
case Flavor.cherry:
return 'https://cherry.com';
default:
return 'https://default.com';
}
}
Code di atas digunakan untuk menentukan base url sesuai dengan flavor yang sedang digunakan. Sehingga file flavors.dart akan menjadi seperti di bawah ini:
import 'package:flutter/services.dart' show appFlavor;
enum Flavor {
apple,
banana,
cherry,
}
Flavor getFlavor(String name) {
switch (name) {
case 'apple':
return Flavor.apple;
case 'banana':
return Flavor.banana;
case 'cherry':
return Flavor.cherry;
default:
return Flavor.apple;
}
}
class F {
static Flavor selectedFlavor = Flavor.apple;
static String get name => selectedFlavor.name;
F() {
String? flavor = appFlavor;
if (flavor != null) {
selectedFlavor = getFlavor(flavor);
}
}
static String get title {
switch (selectedFlavor) {
case Flavor.apple:
return 'Apple App';
case Flavor.banana:
return 'Banana App';
case Flavor.cherry:
return 'Cherry App';
default:
return 'title';
}
}
static String get baseUrl {
switch (selectedFlavor) {
case Flavor.apple:
return 'https://apple.com';
case Flavor.banana:
return 'https://banana.com';
case Flavor.cherry:
return 'https://cherry.com';
default:
return 'https://default.com';
}
}
}
Untuk mengetahui hasilnya, maka akan kita ubah file my_home_page.dart menjadi seperti ini
