# Guia Passo a Passo: Configurando Flavors no Flutter para Android, IOS e Web Fala devs blz? Hoje nós vamos ver como configurar Flavors em nossas aplicações Flutter, algo extremamente importante e útil quando se está trabalhando com desenvolvimento mobile etc. Eu sempre uso flavors em meus aplicativos que vão para produção, pois eles facilitam bastante quando se tem que trabalhar com múltiplos ambientes (**development, staging, production**) para um mesmo app. Depois de várias e várias tentativas e erros para fazer os flavors funcionarem, especialmente no iOS, decidi escrever este artigo com meus aprendizados. A ideia que ele seja um guia definitivo passo a passo sobre o assunto, pois pesquisando na internet não vi muitos materiais estruturados sobre o assunto. Toda vez que eu ia configurar flavors acabava passando algumas horas na construção pois tinha que consultar vários materiais da internet, especificamente para IOS onde dava bastante problema. ### O que são Flavors e **por que você precisa usar** Flavors, também chamados de sabores em português é quando você tem ambientes separados para seu aplicativo usando a mesma base de código. Normalmente, os tipos mais usados ​​são **dev**, **stag** e **prod**. Por exemplo você pode ter um flavor para seu aplicativo de produção que aponta para uma API de produção com o endereço [meuapp.com.br/api](http://meuapp.com.br/api) e outra versão de desenvolvimento do app apontando para o host de API em [dev.meuapp.com.br/api](http://dev.meuapp.com.br/api) ou até mesmo ter ícones de aplicativos diferentes para cada configuração. A maioria das empresas e projetos normalmente têm um ciclo de vida no processo de construção de software bem definido, onde as novas funcionalidades passam pelas mais diferentes etapas, como desenvolvimento, teste, e, finalmente, vão para a produção. Abaixo dou uma breve explicação sobre esses ambientes/configurações. * **development (dev)** : usado apenas durante a criação do aplicativo onde os desenvolvedores usam a vontade sem medo de comprometer os dados. * **staging (stg)** : usado para distribuir versões de teste para a equipe QA e outras partes interessadas no teste do aplicativo. O back-end vai configurado para dados de desenvolvimento, mas não pronto para fins de produção. * **production (prod)** : usado por todos os usuários que baixaram o aplicativo nas lojas onde os dados do backend já são os reais. A grande sacada dos **flavors** é nos possibilitar termos vários ambientes para mexer antes de enviar pra produção nos dando uma garantia que os dados no ambiente de produção não sejam alterados por engano durante o desenvolvimento. 😄 Sem flavors teríamos que mudar os hosts das APIS manualmente em variáveis a cada build o que seria bem chato, sem falar que se quisermos mudar logo, o nome do app seria mais complicado ainda. Mas se nosso aplicativo Flutter usar um back-end do Firebase, configurá-lo para cada ambiente (dev, stg, prod) sem flavors é também extremamente chato, trabalhoso e custoso ter que toda vez na build fazer isso. Com a nova versão do Flutter configurar o firebase para os flavors ficou bem mais simples do que no passado, então sem mais delongas vamos lá. 💛 ### **A abordagem para este tutorial** Vou construir um aplicativo de exemplo com duas opções: **dev** e **prod** . ### **Configurando Flavors no Dart para múltiplos ambientes de API.** Vamor criar um arquivo de flavors no dart e com isso poderemos disponibilizá-los em qualquer lugar do nosso código, começaremos criando o arquivo `flavors.dart` na pasta `lib` do nosso projeto. ```dart enum FlavorTypes { dev, prod } class Flavor { Flavor._instance(); static late FlavorTypes flavorType; static String get flavorMessage { switch (flavorType) { case FlavorTypes.dev: return 'Dev'; case FlavorTypes.prod: return 'Production'; default: return 'Dev'; } } static String get apiBaseUrl { switch (flavorType) { case FlavorTypes.dev: return 'apiUrlBaseDev'; case FlavorTypes.prod: return 'apiUrlBaseProd'; default: return 'apiUrlBaseDev'; } } static bool isProduction() => flavorType == FlavorTypes.prod; static bool isDevelopment() => flavorType == FlavorTypes.dev; } ``` Nesse arquivo configurei-o para ser um singleton, pois com isso ele será facilmente acessível em qualquer lugar já que vamos precisar. No `FlavorTypes` enum declaramos os tipos de ambientes que utilizaremos, e o `getApiBaseUrl` será responsáveil ​​por selecionar a URL correta para a nossa API conforme o flavor setado quando a aplicação estiver rodando. Agora para cada ambiente flavor, criamos um arquivo main+flavor onde sera o ponto de entrada usado para iniciar o aplicativo setando o flavor correto * `main_dev.dart`: Nosso flavor para o ambiente de **desenvolvimento** . ```dart import 'flavors.dart'; import 'main.dart' as main_common; Future main() async { Flavor.flavorType = FlavorTypes.dev; main_common.main(); } ``` * `main_prod.dart`: Do nosso flavor para o lançamento em **produção** . ```dart import 'flavors.dart'; import 'main.dart' as main_common; Future main() async { Flavor.flavorType = FlavorTypes.prod; main_common.main(); } ``` O ***main\_common*** é apenas um alias para o main padrão que ja existia antes de configuramos os flavor no projeto, apenas estamos encapsulando-o para ser chamado conforme o **flavor** (sabor) setado. Veja abaixo o código do `main_common`: ```dart import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo Flavor', theme: ThemeData( primarySwatch: Colors.blue, ), home: const MyHomePage(), ); } } ``` Para rodar nosso aplicativo devemos escolher o flavor desejado e em seguida digitar o seguinte comando no terminal: * **flutter run -t lib/main\_dev.dart** * **flutter run -t lib/main\_prod.dart** O comando acima irá executar nosso aplicativo em modo de depuração, com `-t` ou `--target` definimos o ponto inicial, ou seja o arquivo principal. Veja abaixo o aplicativo rodando no emulador Android com o ambiente de **development** configurado parcialmente pois ainda precisamos fazer alguns ajustes. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1714223799112/74bd3e58-0107-474a-867c-a8180237a87f.png align="center") ### **Adicionando flavors para Android** Com o nosso aplicativo inicial de exemplo rodando precisamos finalizar a configuração dos nossos flavors para o android, é bem simples e rápido de configurar. Na pasta android navegue até o arquivo em app/build.gradle e adicione o seguinte código. ![app/build.gradle](https://cdn.hashnode.com/res/hashnode/image/upload/v1714224576766/7896f3f7-09c7-42df-8d79-db9f8c2acb6c.png align="center") O flavor **dev** usará o `applicationId` como `org.cajuinaapps.br.dev` com o final indicando ambiente de desenvolvimento e o flavor **prod** usará o `applicationId` padrão `org.cajuinaapps.br` sem prefixo no final indicando ambiente de **produção**. Também definimos um recurso de string chamado `app_name` no **resValue** que estamos usando em `AndroidManifest.xml` isso serve para configurar o nome do aplicativo em tempo de execução conforme o flavor usado. ***NOTA: Não se esqueça de adicionar*** `android:label="@string/app_name"` ***a*** `application`***tag no*** `AndroidManifest.` ### **Vamor testar 🧪** Agora podemos executar o aplicativo usando os seguintes comandos um de cada vez e rodar os ambientes. ```dart flutter run --flavor dev --target lib/main_dev.dart flutter run --flavor prod --target lib/main_prod.dart ``` ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1714226234835/36fa6fc2-156e-40c4-a30e-2877748b4169.png align="center") ## Definindo configurações de inicialização para Vs code e Android Studio Para rodar o nosso app não queremos toda vez ter que digitar o comando no terminal não é mesmo, por isso vamos configurar o nosso editor de código para fazer isso para a gente. No **Vs code**, adicione um arquivo **launch.json**, isso permite que você execute o comando `flutter run --flavor [environment name]`. Defina as configurações de inicialização da seguinte forma: ![Vs code](https://cdn.hashnode.com/res/hashnode/image/upload/v1714226375031/e4674159-0eb3-46bd-ba6c-43a6cf1fbc57.png align="center") 1. No diretório raiz do seu projeto, adicione uma pasta chamada **.vscode** . 2. Dentro da pasta **.vscode** , crie um arquivo chamado **launch.json** . 3. No arquivo **launch.json** , adicione uma configuração para cada variação do flavor. Cada configuração possui uma chave **name** , **request** , **type** , **program** e **args.** Veja o exemplo abaixo. ```json { "version": "0.2.0", "configurations": [ { "name": "Development", "request": "launch", "type": "dart", "program": "lib/main_dev.dart", "args": [ "--flavor", "dev", ] }, { "name": "Production", "request": "launch", "type": "dart", "program": "lib/main_prod.dart", "args": [ "--flavor", "prod", ] }, ] } ``` Agora podemos executar com sucesso o nosso app com o ambiente escolhido. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1714226705034/65d9a546-2264-45e2-90f7-565c1d6532e3.png align="center") Configurando no **Android Studio 🛠️** ![Android studio](https://cdn.hashnode.com/res/hashnode/image/upload/v1714227765328/ff84c75e-81f4-48bb-8fab-8e8e6b3320e4.gif align="center") Agora, temos a capacidade de executar nosso aplicativo tanto no VS code quanto no Android Studio. Se o seu aplicativo utilizar uma API, você pode simplesmente utilizar o `Flavor.apiBaseUrl` para obter a URL Base correspondente ao ambiente, seja ele de desenvolvimento ou produção. Fácil, não é mesmo 😅 ? Mas Ian, e se estivermos usando o Firebase? Bem, vamos explorar como configurar flavors para múltiplos projetos do Firebase mais adiante nesse artigo. ### Configurando Flavors para IOS Abra a pasta ios do seu projeto no *Xcode* . Sem configurar nada vamos rodar o comando `flutter run --flavor dev` no terminal direcionando a um simulador do IOS e veja o que acontece. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1714306847911/77cf4a17-d8bf-4310-8f5b-cffb96906c9b.png align="center") Primeiro, precisamos criar novos **Schemes** de produtos no XCode. Em nosso exemplo, é `prod` e `dev`.  Um Scheme descreve como o Xcode executa diferentes ações. Já temos um scheme `Runner`, que é o scheme padrão. Iremos renomeá-lo para `prod`e criar mais um novo esquema `dev`. Vamos lá? veja o passo a passo abaixo. ![Xcode](https://cdn.hashnode.com/res/hashnode/image/upload/v1714308766130/f2723a2c-696d-48cf-85c9-4ff84cc842ec.gif align="center") Agora novamente rodando o comando `flutter run --flavor dev` no terminal direcionando a um simulador do IOS e veja o que acontece. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1714307486081/7ff454c5-835c-4bc2-b072-e8ea31ff9c64.png align="center") Esse erro nos diz que o Flutter espera uma *configuração de build* chamada **Debug-dev** ou similar. Vamos criar essas configurações agora. Depois que os schemes são criados, temos que duplicar as configurações de compilação: **Debug**, **Release**, and **Profile** de acordo com o scheme, com o nome da configuração de compilação copiado + prefixo como nome. Duplique as configurações de build para diferenciar entre as configurações padrão que já estão disponíveis e as novas configurações do scheme `dev`. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1714308981086/f075f346-8ebf-4b77-a6fd-061ef0589c23.gif align="center") Feito isso, teremos 6 configurações, 3 para cada flavor (sabor). ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1714309145483/5e1e6e41-f20a-4385-8a24-ebebec1a9330.png align="center") Agora rode `flutter run --flavor dev` novamente… ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1714309425265/feefd6b9-6006-49bc-adac-f38c6ae4efdc.png align="center") Ainda estamos com erro pois no momento não personalizamos nada no esquema de construção/configuração de compilação, então o aplicativo ainda não irá ser executado com sucesso. Vamos configurar isso agora. ✍🏻 Renomeie o esquema de construção padrão e as configurações de construção para **prod**. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1714309818437/17ae302f-4174-4ccc-a732-015a97541ce4.gif align="center") Como duplicamos as configurações de build, as configurações de dev ainda estão conectadas ao scheme original (que agora se chama **prod**). Vamos consertar isso também… ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1714310513511/3237c5e4-b6d9-4a0c-819c-f741265fb2fc.gif align="center") Esse é o resultado final abaixo. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1714310462239/b83a3fa8-92b4-4e59-987e-0bfee9a2635f.png align="center") ### **Personalizando configurações para cada scheme** Vamos primeiro alterar o identificador do pacote de aplicativos para ser diferente em ambos os esquemas. O ***applicationId*** no Android era `org.cajuinaapps.br` o identificador do pacote no iOS é paralelo ao applicationId do Android. Então, vamos alterar nosso identificador de pacote de produtos para `org.cajuinaapps.br` conforme o flavor. Agora, vamos adicionar o identificador do pacote para cada configuração. Em `Target`\-> `Runner`, clique `Build Settings`e pesquise `Product Bundle Identifier` e altere o identificador do pacote de aplicativos para diferenciar os esquemas. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1714312239691/4d79d4d5-35b3-41f0-a659-397086810141.gif align="center") Quando terminar, você terá algo assim. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1714312425131/8633fdc5-0a45-45e1-a302-8906e2c31714.png align="center") **Configurando nomes diferentes para o aplicativo conforme o flavor.** No mesmo `Target`\-> `Runner`\-> `Build Settings`, clique no botão `+`**Add User Defined Settings** e crie uma nova variável definida pelo usuário. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1714313084379/51fa59c8-0c4b-416a-9873-a59f74c47d60.gif align="center") Quando terminar, você terá algo assim. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1714313022256/2b4caee3-29f8-4391-aa43-55b5054e6c17.png align="center") Depois de concluir a variável definida pelo usuário, você precisa alterar `Info.plist` para usar esta variável. ```json CFBundleDisplayName $(APP_DISPLAY_NAME) ``` ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1714329034137/2243238a-a9b0-40d4-9cc8-7d3a94999ac8.png align="center") ## **Vamos testar 🧪** Semelhante ao Android, podemos testar o iOS executando o comando para os ambientes **prod** e **dev**. ```yaml flutter run --flavor dev --target lib/main_dev.dart flutter run --flavor prod --target lib/main_prod.dart ``` ![aplicativos de produção e desenvolvimento](https://cdn.hashnode.com/res/hashnode/image/upload/v1714329960283/6761ac0e-7e11-4f10-a385-12386a2f57ba.png align="center") ### **Ícones diferentes no aplicativo para Android e iOS** Agora, vamos ter ícones diferentes baseados nos flavors. Teremos 2 ícones diferentes um para cada ambiente. O ícone verdinho vai ser o de ambiente de desenvolvimento e o outro será o do aplicativo de produção. ![Logos para os apps](https://cdn.hashnode.com/res/hashnode/image/upload/v1714330579010/4961e6d2-0493-47bf-8685-c2a879bdb692.png align="center") Vamos utilizar o package `flutter_launcher_icons` para nos ajudar a gerar os ícones para o aplicativo. Instale-o como uma dependência de desenvolvimento. ```json flutter pub add flutter_launcher_icons --dev ``` Após a instalação vamos criar um arquivo de configuração para ícones de cada ambiente flavor. Veja o exemplo abaixo. * `flutter_launcher_icons-dev.yaml` ```json flutter_launcher_icons: android: true ios: true remove_alpha_ios: true image_path: "assets/icon_dev.png" ``` * `flutter_launcher_icons-prod.yaml` ```json flutter_launcher_icons: android: true ios: true remove_alpha_ios: true image_path: "assets/prod-icon.png" ``` Agora vamos gerar os ícones com o comando: ```json flutter pub run flutter_launcher_icons:main -f flutter_launcher_icons-* ``` Rodando o comando nossos ícones foram gerados com sucesso. No Android dentro de `app/src/` foi gerado duas pastas chamadas de **prod** e **dev** e dentro delas teremos uma outra pasta chamada `res` com os nosso icones respectivos. ![ícones gerados com sucesso](https://cdn.hashnode.com/res/hashnode/image/upload/v1714331058176/574e81da-f0f0-4784-aa96-af88d22f3659.png align="center") ![Vs code](https://cdn.hashnode.com/res/hashnode/image/upload/v1714603368470/fc1688fe-1bf7-43ae-9911-9858e75b7810.png align="center") Para IOS vá em `Runner` -> `Assets.xcassets` podemos ver que temos todos os ícones necessários. Podemos remover o `AppIcon`, que não é utilizado. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1714338449919/83706866-9b9f-4a24-996f-e5728b800393.png align="center") Agora, em `Target`\-> `Runner`\-> `Build Settings,` procure por `Primary App Icon`. defina o sufixo correspondente para cada um. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1714338743810/9bd0d447-9d01-4fc9-bd6a-300f931e0c53.png align="center") Testando as duas compilações e o resultado final é esse abaixo: ![Aplicativos instalado com ícones diferentes](https://cdn.hashnode.com/res/hashnode/image/upload/v1714340362502/6d9748ee-1f87-4dfe-8dad-e4bf0c7b23a7.png align="center") ### Configurando Flavors para diferentes projetos do Firebase 🔥 ![Flavor mapping for dev and prod environments.](https://cdn.hashnode.com/res/hashnode/image/upload/v1714229772648/557cd777-b09c-464c-96c1-cb530bdda442.png align="center") Primeira coisa, você deve ter dois projetos do Firebase criados para cada ambiente flavor. Para o nosso exemplo nesse artigo teremos um de `dev` e outro de `prod`. A integração do Firebase em um projeto costumava ser mais complicada do que é hoje. Você tinha que integrá-lo em um nível nativo, baixar configurações separadas para Android, iOS e web e era bastante sujeito a erros mas hoje temos uma nova maneira mais prática e rápido de configurar isso graças as evoluções da integração entre times do Flutter e Firebase. Nesse artigo vou mostrar rapidamente como adicionar e configurar seu projeto ao Firebase mas se você quiser algo mais detalhado pode consultar isso em outro [artigo](https://ianoliveira.hashnode.dev/configurando-o-firebase-no-flutter) onde mostro todo o processo bem detalhado, você pode consultar [aqui](https://ianoliveira.hashnode.dev/configurando-o-firebase-no-flutter). ## **Integrando o Firebase** Abaixo no [Firebase console](https://console.firebase.google.com/u/0/?hl=pt-br) já deixei criado os dois projetos para o nosso aplicativo. ![Firebase console](https://cdn.hashnode.com/res/hashnode/image/upload/v1714242258193/68e4ee1f-4511-4b9f-abfa-a6489c456e5e.png align="center") Instale a [lib](https://pub.dev/packages/firebase_core) do Firebase core em seu app ```json flutter pub add firebase_core ``` Isso adicionará uma linha como esta ao `pubspec.yaml` do seu pacote (e executará um comando implícito `flutter pub get`): ```yaml dependencies: firebase_core: ^2.31.0 ``` Em seguida, como o novo processo de integração usa FlutterFire CLI, que depende do [Firebase CLI,](https://firebase.google.com/docs/cli?hl=pt-br) você precisa instalar o Firebase CLI em nível global e fazer login. Se você tiver dúvidas na instalação consulte o meu [artigo](https://ianoliveira.hashnode.dev/configurando-o-firebase-no-flutter) sobre isso ou a própria documentação [aqui](https://firebaseopensource.com/projects/firebase/firebase-tools/). Em seguida, faça login na sua conta do Firebase com o seguinte comando: ```json firebase login ``` Se você ainda não estiver logado, este comando abrirá um navegador para permitir que você faça login em sua conta. Em seguida, execute o seguinte comando no mesmo terminal para instalar o FlutterFire CLI: ```json dart pub global activate flutterfire_cli ``` Em seguida, de volta ao terminal, vamos executar o seguinte comando para criar os aplicativos para Android e IOS no console do Firebase para cada projeto. ```json flutterfire config \ --project=fir-flavor-example-dev \ --out=lib/firebase_options_dev.dart \ --ios-bundle-id=org.cajuinaapps.br.dev \ --android-app-id=org.cajuinaapps.br.dev ``` Este comando registrará um aplicativo iOS e terá `org.cajuinaapps.dev` como identificador de pacote. Ele também registrará um aplicativo Android com o nome do pacote sendo `org.cajuinaapps.dev`. Assim que o comando for concluído, ele irá gerar uma classe de configuração em `lib/firebase_options_dev.dart` contendo a uma classe chamada `DefaultFirebaseOptions`. ### **Gerando a configuração para o aplicativo de produção** Com o mesmo comando utlizado anteriormente vamos configurar nossos apps no firebase de prod apenas trocando alguns dados. Veja como ficou o novo comando abaixo: ```json flutterfire config \ --project=flavor-firebase-example \ --out=lib/firebase_options_prod.dart \ --ios-bundle-id=org.cajuinaapps.br \ --android-app-id=org.cajuinaapps.br ``` ![vs code](https://cdn.hashnode.com/res/hashnode/image/upload/v1716032728265/9c900002-14cb-44c6-9afe-b0d512866993.png align="center") De volta ao nosso editor de código, abra o arquivo `lib/flavors.dart` que nós criamos no início do artigo e adicione o seguinte trecho de código apartir dos comentários abaixo. ```dart import 'package:firebase_core/firebase_core.dart'; //Adicione esses novos imports import 'package:flavor_example_config/firebase_options_dev.dart' as dev; import 'package:flavor_example_config/firebase_options_prod.dart' as prod; enum FlavorTypes { dev, prod } class Flavor { Flavor._instance(); static late FlavorTypes flavorType; static String get flavorMessage { switch (flavorType) { case FlavorTypes.dev: return 'Development'; case FlavorTypes.prod: return 'Production'; default: return 'Development'; } } static String get apiBaseUrl { switch (flavorType) { case FlavorTypes.dev: return 'apiUrlBaseDev'; case FlavorTypes.prod: return 'apiUrlBaseProd'; default: return 'apiUrlBaseDev'; } } static bool isProduction() => flavorType == FlavorTypes.prod; static bool isDevelopment() => flavorType == FlavorTypes.dev; //Adicione esse novo trecho de código abaixo static FirebaseOptions get firebaseConfigOptions { switch (flavorType) { case FlavorTypes.dev: return dev.DefaultFirebaseOptions.currentPlatform; case FlavorTypes.prod: return prod.DefaultFirebaseOptions.currentPlatform; default: return dev.DefaultFirebaseOptions.currentPlatform; } } } ``` Isso nos fornecerá a configuração correta conforme o **flavor** que estiver rodando no aplicativo em tempo de execução. Para demonstrar o sucesso da integração eu ativei o banco de dados [Cloud Firestore](https://firebase.google.com/products/firestore?hl=pt-br) para cada aplicativo onde estará exibindo dados de seu respectivo ambiente no Firebase. Atenção!! Não irei mostrar nesse post como configurar e usar o [`Cloud Firestore`](https://pub.dev/packages/cloud_firestore) mas tenho esse outro [artigo](https://ianoliveira.hashnode.dev/crud-create-read-update-delete-com-firebase-cloud-firestore-no-flutter) onde explico tudo em detalhes como fazer um crud completo com ele. Adicionei alguns dados simples de filmes ao banco de dados para ilustrar melhor. Se você quiser aprender mais sobre o assunto, confira este outro [artigo](https://ianoliveira.hashnode.dev/crud-create-read-update-delete-com-firebase-cloud-firestore-no-flutter) onde explico todos os detalhes da integração. Executando a aplicação podemos ver que o Firebase foi configurado com sucesso! ![Aplicativo de prod a esquerda e aplicativo de dev a direita](https://cdn.hashnode.com/res/hashnode/image/upload/v1716067575143/d2b08c8d-e92a-460f-bda0-beed15f04426.png align="center") Nas imagens acima podemos ver nomes diferentes sobre filmes para cada aplicativo conforme cadastrado na base de dados 🎲 ! ### Rodando o aplicativo na web 👨🏻‍💻 ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1716067897084/9bdc427d-1e81-4b1d-b12d-3d01e5021a4f.png align="center") O uso do Flavors com Firebase funciona perfeitamente na web. Isso ocorre porque o arquivo de configuração do Firebase, na classe `DefaultFirebaseOptions`, já possui uma configuração específica para o ambiente web. Portanto, ao compilar nossa aplicação Flutter para a web, não é necessário realizar nenhuma configuração adicional. Isso é ótimo, não é mesmo? Link do projeto no [github aqui](https://github.com/iang12/flutter_flavor_example). 🔗 **Referências** [https://medium.com/@animeshjain/build-flavors-in-flutter-android-and-ios-with-different-firebase-projects-per-flavor-27c5c5dac10b](https://medium.com/@animeshjain/build-flavors-in-flutter-android-and-ios-with-different-firebase-projects-per-flavor-27c5c5dac10b) [https://codewithandrea.com/articles/flutter-flavors-for-firebase-apps/](https://codewithandrea.com/articles/flutter-flavors-for-firebase-apps/) [https://github.com/invertase/flutterfire\_cli/issues/14](https://github.com/invertase/flutterfire_cli/issues/14) ### [Conclusão](https://referenciabibliografica.net/) Bom é isso 😎. Autilização de Flavors no Flutter oferece uma solução elegante e eficiente para gerenciar múltiplos ambientes de desenvolvimento, teste e produção dentro de um único código-base. Com a configuração adequada, é possível personalizar comportamentos, variáveis e até mesmo integrações específicas para cada ambiente, facilitando o desenvolvimento e a manutenção do aplicativo. Além disso, a integração com serviços como o Firebase é simplificada, garantindo que cada Flavor possa operar com suas próprias configurações sem complicações adicionais. Em artigos futuros, veremos como usar outros recursos combinado com os flavors para configurar apps como [white-label](https://tecnoblog.net/responde/o-que-e-uma-plataforma-white-label/) por exemplo. Espero que você tenha gostado e obrigado por acompanhar até aqui! Compartilhe-o com seus amigos e colegas! Juntos, vamos construir apps incríveis que transformam o mundo! Se tiver alguma dúvida ou contribuição, deixe nos comentários! Me siga para estar sempre por dentro dos próximos artigos 📲 🚀 # **🌐 Minhas redes sociais 🌐** [**GitHub**](https://www.github.com/iang12) | [**LinkedIn**](https://www.linkedin.com/in/ianoliveirag12/) | [**Instagram**](https://www.instagram.com/ianoliveira.dev/) | [**Twitter**](https://twitter.com/ianoliveirag12)**(X)** | [**Medium**](https://medium.com/@ianoliveirag12)