Toggle Features - Ativando e Desativando recursos em Produção
Tags: togglefeature, featureflags, flutter, dart
Published: 2024-04-21 14:46:06

Fala Devs blz?

Em certos momentos possa ser que precisemos ligar ou desligar algum recurso de nosso aplicativo já em produção. Uma das opções possíveis para desativar um recurso já em produção é fazer o rollback da aplicação, entretanto isso pode ser um pouco doloroso, pois fazer a publicação do aplicativo nas lojas é um pouco burocrático e demora algum tempo.

Uma outra opção possível é utilizar o conceito de Features Toggle, também conhecido como Features Flag. É uma técnica que te permite ativar ou desativar recursos ou funcionalidades do seu aplicativo em produção sem a necessidade de ter que fazer a publicação do seu aplicativo novamente, sendo possível até mesmo em tempo real. Podemos utilizar por diversos motivos como: desativar um recurso que foi encontrado um bug em produção e reativar quando for corrigido, liberação gradativa de alguma funcionalidade nova, teste A/B, etc.

Agora irei demonstrar uma implementação que fiz demonstrando a ideia do features toggle.

O aplicativo que iremos utilizar de exemplo é o abaixo

![](https://cdn-images-1.medium.com/max/800/1*Ld5VVVhiM9yk3PLRzJC8eA.png)

Iremos possibilitar a ativação ou desativação dos botões dessa tela de maneira remota.

Primeiramente vamos definir o modelo de retorno externo de como será definido se a feature estará habilitada ou desabilitada
{% gist https://gist.github.com/toshiossada/a33e32433d3df5220b7846631f826fa2 file=toggle_feature.json %}
Note que é uma lista de Objetos que tem o id, a feature, e se ela está habilitada ou desabilitada, então a entidade do nosso recurso ficará:
{% gist https://gist.github.com/toshiossada/48f77913e07226f31f671c736544e45e file=feature_toggle_entity.dart %}
e nossa model ficaria semelhante a entidade só que com métodos fromJson e toJson

A partir daí conseguimos construir nosso Datasource fazendo à requisição a nossa API das configurações dos recursos.

{% gist https://gist.github.com/toshiossada/a6c9bee8dec632964f263b1e88efa336 file=feature_toggle_model.dart %}

Agora precisamos criar um Store global que irá armazenar esses valores em memória e é necessário que fique de forma global, no caso utilizei o ValueNotifier, mas utilize qualquer gerenciador de estado de sua preferência.
{% gist https://gist.github.com/toshiossada/15d746d26ac047765d402a43ff2feca6 file=toggle_feature_store.dart %}
Daí precisaremos carregar esse valor no momento de inicialização do aplicativo, uma forma que gosto de fazer para garantir isso é construindo uma SplashScreen na rota principal do aplicativo e quando finalizar o carregamento ir para a página principal do aplicativo.
{% gist https://gist.github.com/toshiossada/690f32c7144464a001c4441bd3a2e131 file=splash_controller.dart %}
Após isso vamos criar um widget que receberá um Widget como parâmetro e o id da feature, com isso ele vai englobar o widget em um Visibility() mostrando ou escondendo o widget conforme a lista que está armazenada na nossa store.
{% gist https://gist.github.com/toshiossada/3f009887777039ec4c16400437e75426 file=toggle_feature_widget.dart %}

Desta forma na página do aplicativo podemos utilizar esse widget que criamos e este irá envolver os recursos que queremos aplicar o Feature Toggle.
{% gist https://gist.github.com/toshiossada/24d4b36baa25f51562eb6c7ebe696f43 file=business_page.dart %}
Desta forma quando um recurso é desabilitado remotamente
{% gist https://gist.github.com/toshiossada/ed7e351d51066ac6987ead511bd3ab34 file=response.dart %}
Irá refletir no aplicativo de forma quase que instantânea

![](https://cdn-images-1.medium.com/max/800/1*hjiw2oeKvAPC2EtFn-qljg.png)

Legal né? Lembrando que poderíamos ter usado este recurso com um Socket, como o Firebase para que a ativação e desativação seja de forma instantânea, caso seu negócio necessite

Confira o exemplo completo em
https://github.com/toshiossada/togglefeature

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/obcg0d2y00yddve9quky.png)


Entre em nosso discord para interagir com a comunidade: https://discord.com/invite/flutterbrasil
https://linktr.ee/flutterbrasil