DEV Community

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

Posted on

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!

Discussion (0)