Flavoring Flutter

Se avete letto il mio ultimo articolo su Flutter saprete cha abbiamo avuto dei problemi con la configurazione dei flavor.

Perchè usare i flavor

Lavorando per hobby come sviluppatore Android non ho mai dato importanza ai flavors/build-config. Non ne avevo bisogno, ero l’unica persona del mio team e l’unico cliente ¯\(ツ)/¯

Qui in Iakta il team è più grande e abbiamo molti clienti, quindi se qualcosa va storto non basta urlarti allo specchio.

I flavors sono semplicemente comodi. Ti permettono di definire delle configurazioni di build e switcharle a piacimento. Ad esempio potresti avere un flavor per lo sviluppo, e uno per la produzione. Potresti impostare un URL diverso per le chiamate API o icone e nomi diversi. Con un clic sei pronto per sviluppare o rilasciare la tua fantastica applicazione.

Utilizziamo molte configurazioni di flavor, non solo per la comodità, ma anche per essere sicuri di implementare la versione corretta dell’app. Solitamente impostiamo icone diverse e, a volte, persino il tema dell’app per essere sicuri di non rilasciare un’app con un URL API che punta a macchine locali o di gestione temporanea. Sarebbe molto pericoloso e vergognoso.

Di solito utilizziamo da 3 a 5 flavor diversi per app (sviluppo, produzione, staging, demo ..)

Flavors in Flutter

Quando si parla di Flutter, i flavors sono facili da implementare, ma se non conosci i flavor in Android e gli schema in iOS puoi avere qualche problema. Ho spesso usato i buildConfigs in Android e i target in iOS e quindi non è stato così semplice.

Flutter da linea di comando ha un’opzione per i flavor, quindi puoi eseguire/compilare la tua app utilizzando i flavor:

flutter build --flavor development

These are mapped to android productFlavors and iOS schema.
Questi sono mappati sui productflavors in android e gli schema in ios.

Android productFlavors

Per quanto riguarda Android, i productflavors sono definiti nel modulo gradle dell’app.

Come potete vedere, è piuttosto semplice e puoi impostare diversi application id suffix.

Nota che i nomi dei flavor devono essere gli stessi del comando cli di flutter.

Adesso ad esempio è possibile aggiungere icone basate sul tipo di sapore.

iOS schema

In iOS è un po ‘più complicato.

Dopo un po ‘di tempo penso che questo sia il modo più semplice per farlo.

Crea nella cartella ios/Flutter un file di configurazione per ogni flavor, includi il file Generated.xcconfig e setta FLUTTER_TARGET sul file principale richiesto dalla destinazione.

//
//  development.xcconfig
//  Runner
//
//  Created by Salvatore on 26/04/18.
//  Copyright © 2018 The Chromium Authors. All rights reserved.
//

#include "Generated.xcconfig"

FLUTTER_TARGET=lib/main-dev.dart

server_url = www.iatka.it/api/dev
server_port = 8080
protocol = http

Qui puoi anche definire alcune variabili d’ambiente di cui puoi avere bisogno nel tuo codice iOS. Ad esempio qualche url.

Quindi crea un nuovo schema per ogni flavor.

Ricordati di spuntare la casella di controllo shared nella finestra di dialogo.

Ora seleziona il progetto Runner e aggiungi le configurazioni di cui hai bisogno.

Si noti che è necessario disporre di due configurazioni per ciascun flavor denominato con Release-[flavorName] e Debug-[flavorName]. I nomi sono molto importanti per motivi di abbinamento.

È anche necessario un file plist per ogni flavor per impostare cose come bundleId o la variabile definita nel file xcconfig.

Per collegare i file Plist alle configurazioni, andate sul target Runner

Per quanto riguarda le icone, possono essere impostate nella destinazione Runner nell’opzione Asset Catalog App Icon Set Name.

Fatto!

Flavors in dart

Come usare i flavor in dart? Non c’è modo di ottenere il flavor nel codice flutter.

Abbiamo trovato che l’unico modo per risolvere questo problema è usare i target Flutter.

Quando esegui la tua app, puoi scegliere il file main usando l’opzione cli -t (o -target):

flutter build --flavor development -t lib/main-dev.dart

In questo modo il punto di ingresso dell’app è impostato su main-dev.dart.

Come sfruttare questo comando? La cosa più semplice è creare un file config.dart con una classe Config e un enum di Flavor.

enum Flavor {
  DEVELOPMENT,
  RELEASE,
}

class Config {

  static Flavor appFlavor;
}

Utilizzando il campo statico appFlavor siamo in grado di impostare diversi flavor in diversi file main.

main-dev.dart

import 'package:flutter/material.dart';
import 'package:flutter_flavors/appEntry.dart';
import 'package:flutter_flavors/config.dart';

void main() {
  Config.appFlavor = Flavor.DEVELOPMENT;
  runApp(new MyApp());
}

In questo modo è facile sapere se siamo nella versione di sviluppo o di produzione.

import 'package:flutter/material.dart';

enum Flavor {
  DEVELOPMENT,
  RELEASE,
}

class Config {

  static Flavor appFlavor;

  static String get helloMessage {
    switch (appFlavor) {
      case Flavor.RELEASE:
        return 'RELEASE';
      case Flavor.DEVELOPMENT:
      default:
        return 'DEVELOPMENT';
    }
  }

  static Icon get helloIcon {
    switch (appFlavor) {
      case Flavor.RELEASE:
        return new Icon(Icons.new_releases);
      case Flavor.DEVELOPMENT:
      default:
        return new Icon(Icons.developer_mode);
    }
  }
}

Ad esempio qui possiamo mostrare diversi messaggi e icone in base al tipo di flavor!

Quindi questa sarebbe la nostra configurazione finale: due file principali e un file di configurazione.

Considerazioni finali

Si, lo so. È un casino, ma è una cosa “una tantum” che può farti risparmiare tempo e fatica.

È possibile trovare il repository di esempio all’indirizzo https://github.com/iakta/flutter_flavors.
Se ho fatto qualcosa di sbagliato o mi sono perso qualcosa, scrivimi. Commenti e considerazioni sono più che benvenuti!