O desempenho é um fator crucial para qualquer aplicativo ou produto e vários fatores o afetam. Geralmente, quando você cria aplicativos no Flutter, os resultados de desempenho são bons o suficiente, mas você ainda pode enfrentar problemas com o desempenho de seu aplicativo.
É por isso que você precisa prestar atenção às melhores práticas e melhorias de desempenho para seu aplicativo Flutter durante o próprio desenvolvimento-para corrigir os problemas com antecedência e fornecer uma experiência perfeita para seus usuários finais.
O objetivo deste artigo é orientar você nas práticas recomendadas essenciais de melhorias de desempenho para aplicativos Flutter. Vou mostrar a você como:
Evitar reconstruir widgets Make uso de widgets constantes Carregar itens da lista com eficiência-e sob demanda Use async/await Use operadores com eficiência Faça uso de técnicas de interpolação Reduza o tamanho do seu aplicativo
1. Evite reconstruir widgets
Um dos antipadrões de desempenho mais comuns é usar setState para reconstruir StatefulWidgets . Cada vez que um usuário interage com o widget, toda a visualização é atualizada, afetando o andaime, o widget de fundo e o contêiner-o que aumenta significativamente o tempo de carregamento do aplicativo.
Apenas reconstruindo o que temos que atualizar é uma boa estratégia neste caso. Isso pode ser alcançado usando o padrão Bloc em Flutter. Pacotes como flutter_bloc, MobX e Provider são populares.
Mas, você sabia que isso também pode ser feito sem pacotes externos? Vamos dar uma olhada no exemplo abaixo:
class _CarsListingPageState extends State
A classe _CarsListingPageState descreve o comportamento de possíveis ações com base no estado, como _onPressed. O método de construção da estrutura é construir uma instância do Widget com base no contexto fornecido ao método. Ele cria uma instância de floatingActionButton e especifica as propriedades como cor, altura e largura.
Quando o usuário pressiona FloatingActionButton na tela, onPressed é chamado e invoca _onPressed de _CarsListingPageState. Uma cor aleatória é então atribuída a partir da paleta de cores primárias, que é então retornada por meio do construtor e a cor é preenchida no centro da tela.
Aqui, sempre, o método de construção no código acima não imprimir a saída criando CarsListingPage no console. Isso significa que essa lógica funciona corretamente-é apenas construir o widget de que precisamos.
2. Use widgets constantes
Qual é a diferença entre um widget normal e um constante? Assim como a definição sugere, aplicar const ao widget irá inicializá-lo no momento da compilação.
Isso significa que declarar o widget como uma constante inicializará o widget e todos os seus dependentes durante a compilação em vez de em tempo de execução. Isso também permitirá que você use widgets tanto quanto possível, evitando reconstruções desnecessárias.
Abaixo está um exemplo de como usar um widget constante:
class _CarListingPageState extends State
A classe _CarListingPageState especifica um estado: _onPressed, que invoca setState e aumenta o valor de _counter. O método de construção gera um FloatingActionButton e outros elementos na árvore. A primeira linha dentro de DemoWidget cria uma nova instância e a declara uma constante.
Cada vez que FloatingActionButton é pressionado, o contador aumenta e o valor do contador é escrito dentro do item filho na tela. Durante esta execução, DemoWidget é reutilizado e a regeneração de todo o widget é ignorada, uma vez que é declarado como um widget constante.
Conforme visível no GIF abaixo, a instrução “building DemoWidget” é impressa apenas uma vez quando o widget é construído pela primeira vez e, em seguida, é reutilizado.
No entanto, sempre que você recarregar ou reiniciar o aplicativo a quente, verá a declaração “building DemoWidget” impressa.
3. Carregue itens de lista com eficiência-e sob demanda
Ao trabalhar com itens de lista, os desenvolvedores geralmente usam uma combinação dos widgets SingleChildScrollView e Column.
Ao trabalhar com listas grandes, as coisas podem ficar bagunçado muito rapidamente se você continuar usando o mesmo conjunto de widgets. Isso ocorre porque cada item é anexado à lista e, em seguida, processado na tela, o que aumenta a carga geral no sistema.
É uma boa ideia usar o construtor ListView nesses casos. Isso melhora o desempenho em um nível muito alto. Vejamos um exemplo de um objeto construtor:
ListView.builder (itemCount: items.length, itemBuilder: (context, index) {return ListTile (title: Text (‘Row: $ {items [index]}’),);},);
4. Use async/await
Ao escrever seu fluxo de execução, é importante determinar se o código pode ser executado de forma síncrona ou assíncrona. O código assíncrono é mais difícil de depurar e melhorar, mas ainda existem algumas maneiras de escrever código assíncrono em Flutter , que inclui o uso de Future, async/await e outros.
Quando combinado com async, a legibilidade do código melhora porque a estrutura e o padrão de escrita do código são seguidos. Por outro lado, o desempenho geral da execução melhora devido à sua capacidade de entreter estratégias à prova de falhas quando necessário-neste caso, tente… pegar. Vejamos o exemplo abaixo:
//Futuro impróprio
5. Operadores de uso eficiente
Flutter vem com recursos específicos do idioma. Um deles são os operadores.
Operadores de verificação nula, operadores anuláveis e outros apropriados são recomendados se você deseja reduzir o tempo de desenvolvimento, escrever código robusto para evitar erros lógicos e também melhorar a legibilidade do código.
Vejamos alguns exemplos abaixo:
car=van==null? ônibus: audi;//Old pattern car=audi ?? ônibus;//Novo padrão car=van==null? nulo: audi.bus;//Padrão antigo car=audi?.Bus;//Novo padrão (item como carro).name=’Mustang’;//Padrão antigo if (item is Car) item.name=’Mustang’;//Novo padrão
6. Faça uso de técnicas de interpolação
É uma prática comum realizar operações de string e encadeamento usando o operador +. Em vez de fazer isso, usaremos a interpolação de strings, o que melhora a legibilidade do seu código e reduz as chances de erros.
//Inadequado var discountText=’Hello,’+ name +’! Você ganhou um novo voucher’+ brand.name +’! Por favor, digite seu e-mail para resgatar. A oferta expira em’+ timeRemaining.toString ()’minutos.’;//Var discountText apropriada=’Olá, $ name! Você ganhou um voucher $ {brand.name} totalmente novo! Por favor, digite seu e-mail para resgatar. A oferta expira dentro de $ {timeRemaining} minutos.’;
Conforme especificado, acessar variáveis embutidas melhora a legibilidade do texto especificado com valores, e o código se torna menos sujeito a erros porque a string é dividida em menos partes.
7. Reduza o tamanho do seu aplicativo
É realmente fácil adicionar uma tonelada de pacotes ao seu código durante o processo de desenvolvimento. Como você provavelmente deve saber, isso pode se transformar em um bloatware.
Vamos usar um aplicativo Android como exemplo. Você pode usar o Gradle , uma poderosa ferramenta de compilação de código aberto que vem com uma infinidade de opções de configuração, para reduzir o tamanho do aplicativo.
Você também pode gerar pacotes de aplicativos Android, que são um novo sistema de empacotamento introduzido pelo Google.
Os pacotes de aplicativos são eficientes de várias maneiras. Apenas o código necessário para um dispositivo de destino específico é baixado da Google Play Store. Isso é possível porque a Google Play Store reempacota e envia apenas os arquivos e recursos necessários para a densidade da tela do dispositivo de destino, arquitetura da plataforma, recursos de hardware de suporte e assim por diante.
Estatísticas do Google Play Console mostram que o tamanho do download do aplicativo é reduzido em 40 a 60 por cento na maioria dos casos quando você escolhe app bundles em vez de APKs.
O comando para gerar um app bundle é:
flutter build appbundle
Para ofuscar o código de linguagem Dart, você precisa para usar ofuscação e o sinalizador–split-debug-info com o comando build. O comando se parece com este:
flutter build apk–obfuscate–split-debug-info=/
O comando acima gera um arquivo de mapeamento de símbolo. Este arquivo é útil para desofuscar rastreamentos de pilha.
ProGuard e manter regras
Abaixo está um exemplo de arquivo build.gradle de nível de aplicativo com ProGuard e outras configurações aplicadas:
android {… def proguard_list=[“../buildsettings/proguard/proguard-flutter.pro”,”../buildsettings/proguard/proguard-firebase.pro”,”../buildsettings/proguard/proguard-google-play-services.pro”,…] buildTypes {release {debuggable false//torna o aplicativo não depurável crunchPngs true//reduz as imagens minifyEnabled true//ofusca o código e remove o código não utilizado shrinkResources true//reduz e remove o não usado resources useProguard true//aplique proguard proguard_list.each {pro_guard-> proguardFile pro_guard} assinaturaConfig assinaturaC onfigs.release}}Uma das melhores práticas para reduzir o tamanho do APK é aplicar as regras do ProGuard ao seu aplicativo Android. O ProGuard aplica regras que removem o código não utilizado do pacote final gerado. Durante o processo de geração de build, o código acima aplica várias configurações no código e nos recursos usando o ProGuard do local especificado.
Abaixo está um exemplo de regras do ProGuard especificadas para Firebase:
-keepattributes EnclosingMethod-keepattributes InnerClasses-dontwarn org.xmlpull.v1. **-dontnote org.xmlpull.v1. **-manter a classe org.xmlpull. ** {*; }-keepclassmembers class org.xmlpull. ** {*; }
As declarações acima são chamadas de regras de manutenção. As regras de manutenção são especificadas dentro de um arquivo de configuração do ProGuard. Essas regras definem o que fazer com os arquivos, atributos, classes, declarações de membros e outras anotações quando o padrão especificado da regra keep corresponde durante a fase de redução e ofuscação do código.
Você pode especificar o que manter e o que ignorar usando o traço e a palavra-chave da regra de declaração, como:
-keep class org.xmlpull. ** {*; }
A regra acima não removerá a classe ou qualquer conteúdo da classe durante a fase de redução do código quando o ProGuard for aplicado.
Você ainda precisa ter cuidado ao usar isso porque pode introduzir erros se não for feito corretamente. A razão para isso é que, se você especificar uma regra que remove um bloco de código, uma classe ou quaisquer membros que são declarados e usados para executar a execução do código, a regra pode introduzir erros de tempo de compilação, erros de tempo de execução ou até erros fatais como exceções de ponteiro nulo.
Você pode aprender mais sobre como implementar as regras do ProGuard da maneira certa da comunidade oficial de desenvolvedores Android.
Etapas de construção de.IPA para iOS
Da mesma forma para iOS, você precisa executar as etapas de construção de.IPA conforme abaixo:
Vá para XCode e clique em Distribuir aplicativo no painel direito sob a seção Arquivos . Depois de selecionar o método de distribuição, por exemplo Desenvolvimento , e clicar no botão Avançar para ir para a seção Diluição de aplicativo . 
Na seção App Thinning , escolha Todas as variantes de dispositivo compatíveis . 
Em seguida, selecione Reconstruir do código de bits e Remover símbolos Swift . Em seguida, assine e exporte o arquivo.IPA. Ele também irá gerar um arquivo de relatório de tamanho de diluição do aplicativo.
Conclusão
Neste artigo, discutimos as técnicas para melhorar o desempenho dos aplicativos feitos no Flutter. Embora Flutter como uma estrutura venha repleto de recursos e esteja em constante evolução com novas atualizações, o desempenho é sempre uma consideração importante.
O desempenho do aplicativo foi e será um grande fator de decisão ao conquistar o mercado global. Ao considerar os diferentes aspectos dos aplicativos móveis, como tamanho do aplicativo, resolução do dispositivo, velocidade de execução do código e recursos de hardware, melhorar o desempenho pode fazer uma grande diferença, especialmente quando se destina a grandes públicos.
