DEV Community

Cover image for Dicas de performance para o Flutter
Henrique Pomatti dos Santos
Henrique Pomatti dos Santos

Posted on

1 1

Dicas de performance para o Flutter

Em minhas pesquisas sobre o Flutter, me deparei com algumas informações sobre performance que achei muito interessantes e que vou estar descrevendo aqui pra ajudar vocês, então bora lá!

1. Use Widgets em vez de Funções

Isso serve para você salvar o processamento da sua aplicação, para não se tornar algo complexo.
Você também pode aplicar um construtor constante para ele apenas fazer o rebuild quando for necessário.

Widgets over Functions

Um artigo do code magic

Stack overflow (salvando vidas)

2. Use Const sempre que possível!

Eu tenho um artigo aqui falando sobre final e const e o CONST é super importante quando falamos de performance, pois é ele quem irá ditar quais informações serão necessárias rebuildar sempre ou não.

Exemplo:

x = Container();
y = Container();
x == y // false
x = const Container();
y = const Container();
x == y // true
Enter fullscreen mode Exit fullscreen mode

Você consegue salvar muita memória ram usando o mesmo Widget.

3. Construtores constantes

Conforme eu disse acima, é sempre importante criar construtores que sejam constantes, vai ai um exemplo!

class CustomWidget extends StatelessWidget {
  const CustomWidget();
  @override
  Widget build(BuildContext context) {
    ...
  }
}
Enter fullscreen mode Exit fullscreen mode

É importante sempre usar pois o Flutter consegue entender apenas quais os Widgets que serão necessários serem rebuildados, assim otimizando a performance.

4. Use nil em vez de const Container()

Tudo bem que é bom utilizar constantes e blablabla, porém, tem algo que é muito interessante também de ser usado e é o NIL.

// good
text != null ? Text(text) : const Container()
// Better
text != null ? Text(text) : const SizedBox()
// BEST
text != null ? Text(text) : nil
or
if (text != null) Text(text)
Enter fullscreen mode Exit fullscreen mode

Mas o que é o nil?
É um elemento que não faz nada e não custa nada de processamento, bom né?

Aqui vai uma explicação mais aprofundada

5. Use gerenciamento de estado SEMPRE

Isso é algo que não pode faltar de jeito nenhum, hoje existem diversos pacotes que fazem isso pra nós e todos são melhores que aquele create state nativo do Flutter, então USE!

Aqui vai um doc legalzão falando disso

6. Acelere a performance do Flutter com Chaves(Keys)

Exemplo:

// FROM
return value
  ? const SizedBox()
  : const Placeholder(),
// TO
return value
  ? const SizedBox(key: ValueKey('SizedBox'))
  : const Placeholder(key: ValueKey('Placeholder')),
----------------------------------------------
// FROM
final inner = SizedBox();
return value ? SizedBox(child: inner) : inner,
// TO
final global = GlobalKey();
final inner = SizedBox(key: global);
return value ? SizedBox(child: inner) : inner,
Enter fullscreen mode Exit fullscreen mode

O Flutter consegue reconhecer melhor os Widgets quando se usa Chaves, isso pode incrementar a performance em até 4x mais.

ValueKey pode fazer seu código parecer um pouco feio.
GlobalKey é um pouco complicado mas é muito bom.

Aqui vai uma explicação BALA

Conclusão

E eras isso pessoal, até a próxima!

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)