Setup Flutter Project using FVM and Flavors

ผมได้มีโอกาสเริ่มต้น Project กับ Flutter เริ่มต้นก็มีการ Setup Tools ต่างๆตามปกติ Flutter sdk , Dart ก็ลงเวอร์ชั่นที่ล่าสุด ณ ตอนนั้น ทุกอย่างเป็นปกติดีครับ จนได้รับโปรเจคเก่ามาดูแล ผมก็ Clone ลงมาปกติ แต่ปัญหาคือ Run ไม่ได้เลยครับ Flutter version , Dart version ที่ใช้อยู่จู่ๆก็ใช้ไม่ได้ มีปัญหาเรื่อง Version ซึ่งการจะดาวน์เกรดเพื่อทำโปรเจคนี้แล้วอัพเกรดเพื่อมาดูโปรเจคปัจจุบัน ก็ดูเป็นการยุ่งยากซะเหลือเกิน แล้วเราจะทำยังไงได้บ้าง ? ทางทีมเลยได้ค้นคว้า Tools ที่มาจัดการแก้ปัญหาเรื่อง Version จนมาพบกับ FVM (Flutter Version Management) ที่ช่วยให้ปัญหาที่ผมพูดมาข้างบนกลายเป็นเรื่องง่ายๆนิดเดียว

FVM คืออะไร?

Flutter Version Management คือ ตัวช่วยในการจัดการ flutter version แล้วกรณีไหนเราจำเป็นจะต้องใช้ ?? หลายครั้งที่คุณอัพเดตเวอร์ชันใหม่ของ Flutter SDK แต่แล้ว Project ที่ทำอยู่ดันตู้มมมม ! รันไม่ได้มีปัญหาซะงั้นทำไงดีหล่ะ ของใหม่ก็อยากลองของเก่าก็ต้องใช้ …. FVM นี่แหละครับจะช่วยให้คุณสามารถมี Flutter SDK หลายเวอร์ชันในเครื่องคุณได้ ซึ่งสามารถ config ใน Project ได้เลยว่าจะอยากจะใช้ Flutter SDK เวอร์ชันไหน

fvm install <specific version> // install version ที่เราต้องการจะใช้
fvm use <specific version>     // เลือกใช้ flutter version ที่เราต้องการจะใช้
fvm flutter pub get            // install dependencies ใน project

หลังจากเราใช้ fvm use ใน Project ก็จะมี ไฟล์ Config ขึ้นมา

เราก็จะได้ Flutter SDK version ที่เราอยากใช้กับ Project ของเราแล้ว !!!

Flavors

โดยปกติการทำ Application ก็อาจจะต้องมีการต่อกับ API ทางฝั่งหลังบ้าน ซึ่งเราก็จำเป็นจะต้องแยก environment เพื่อใช้ทดสอบกับใช้จริง เพื่อไม่ให้ข้อมูลปนกันเสียหาย ซึ่งแต่ละทีมก็จะตกลงกันว่าจะใช้อะไรบ้างเช่น dev, stg, prd ซึ่งทางฝั่งของหน้าบ้านก็จะมีการกำหนดค่าที่แตกต่างกันในแต่ละ environment เพื่อให้สามารถทำงานได้ โดย Flavors จะช่วยให้คุณสามารถแยก config ต่างๆได้ทั้งในระหว่างการ Develop และ Deployment เช่น API Endpoints, Api key เป็นต้น

หลายท่านอาจจะเคยอ่านบทความขั้นตอนวิธีการต่างๆ ซึ่งดูมีความยุ่งยากในหลายส่วน​ ทั้ง ios และ android แต่วันนี้ผมมีสิ่งที่จะช่วยจัดการให้ทุกอย่างง่ายขึ้นมากกก เป็น package ที่ได้ถูกแนะนำจาก docs.flutter.dev ซึ่งก็คือ flutter_flavorizr หลังจากที่ทำการ install package ใน project เรียบร้อยให้ทำการเพิ่ม config ใน pubspec.yaml

ถ้าดูจากในรูปจะเห็นว่า ผมได้แบ่ง flavors เป็น 3 environment หลังจากนั้นก็ใช้ run command “ fvm flutter pub run flutter_flavorizr “

หลังจาก run fvm flutter pub run flutter_flavorizr ตัว package จะทำการ generate file ให้ตามในรูป

Luanch.json Configurations

ใน vscode เราจะ add luanch.json เพื่อความสะดวกในการใช้งานแต่ละ Environment

อันนี้เป็นตัวอย่าง dev env.

ต่อไปจะเป็นการสร้างไฟล์ เพื่อเก็บ Configuration ของเราโดยแยกตามแต่ละ enviroment ได้เลย

เริ่มจากสร้างไฟล์ไว้ใน assets เพื่อแยกเก็บ configuration ของแต่ละ environment ไว้

ตัวอย่างเก็บ url ของ dev environment

จากนั้นก็ให้เราสร้างไฟล์ app_config.dart เพื่อดึงค่า Configuration ที่เราเก็บไว้มาใช้

class AppConfig {
  static final AppConfig _instante = AppConfig._private();
  static AppConfig get instance => _instante;
  factory AppConfig() => _instante;
  AppConfig._private();

  late AppConfigEnv env;
  late final String _baseURL;
  late final dynamic _yamlMap;
  bool isInit = false;
  String get baseURL => _baseURL;
  dynamic get yamlMap => _yamlMap;
  Future<void> init(AppConfigEnv e) async {
    if (isInit) return;
    env = e;
    isInit = true;
    //file path
    String path = Assets.config.prdConfig;
    if (env == AppConfigEnv.stg) {
      path = Assets.config.stgConfig;
    } else if (env == AppConfigEnv.dev) {
      path = Assets.config.devConfig;
    }
    try {
      // get config from assets
      final data = await rootBundle.loadString(path);
      _yamlMap = loadYaml(data);
      _baseURL = _yamlMap['base_url'];
    } catch (e) {
      rethrow;
    }
  }
}

แล้วเราจะเรียกใช้ Appconfig นี่ตรงไหนกันหล่ะ ??

FutureOr<void> main() async {
  await Chain.capture(() async {
    WidgetsFlutterBinding.ensureInitialized();
    await AppConfig.instance.init(F.appConfigEnv);

    runApp(const App());
  });
}

ก่อนจะ RunApp ขึ้นมาก็จะเรียก Appconfig init() ก่อนเพื่อเตรียมค่าใน Configuration เพื่อใช้ภายใน Application ของเรา

หวังว่าบทความนี้จะเป็นประโยชน์ช่วยให้ แก้ปัญหาเรื่องการต้องทำงานหลาย Project ที่ใช้ Flutter Version ที่ต่างกัน ซึ่งใช้ FVM ในการแก้ปัญหา และการใช้ flutter_flavorizr เป็นตัวช่วยในการแบ่ง enivironment ของ Project และนำ Tools เหล่านี้ไปเป็นหนึ่งในตัวเลือกในการตัดสินใจใช้งานนะครับ