Flutter Tip#2

Melhore seus debugs com debugFillProperties

Quando estamos depurando uma tela no Flutter, é comum inspecionar a árvore de widgets no DevTools para entender o estado da interface. O problema é que, por padrão, o Flutter exibe poucas informações sobre os widgets personalizados.

Felizmente, existe um recurso pouco conhecido que resolve isso: debugFillProperties().

O que ele faz?

Ao sobrescrever o método debugFillProperties, você informa ao Flutter quais propriedades do seu widget devem aparecer no Widget Details Tree do DevTools.

Isso torna muito mais fácil descobrir rapidamente quais dados um widget recebeu, sem precisar colocar print(), breakpoints ou navegar pelo código.

Exemplo

Imagine um widget que recebe um extrato:

class StatementCard extends StatelessWidget {
  final Statement statement;

  const StatementCard({required this.statement, super.key});

  @override
  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
    super.debugFillProperties(properties);
    /// registramos as propriedades para que fiquem visíveis no DevTools
    properties.add(DiagnosticsProperty<Statement>('statement', statement));
  }

  @override
  Widget build(BuildContext context) {
    return const SizedBox();
  }
}

Agora, ao selecionar esse widget no Flutter DevTools, você verá algo parecido com:

Em vez de apenas enxergar o nome do widget, você passa a visualizar exatamente os dados que ele recebeu.

Existem vários tipos de propriedades

O Flutter já fornece diversas implementações prontas para representar valores corretamente:

  • StringProperty
  • IntProperty
  • DoubleProperty
  • FlagProperty
  • EnumProperty
  • ColorProperty
  • IconDataProperty
  • IterableProperty
  • ObjectFlagProperty
  • DiagnosticsProperty<T>

Escolher a propriedade correta deixa a visualização muito mais organizada e legível no DevTools.

Isso afeta a performance?

Não.

Essas informações existem apenas em modo de debug. Durante uma build de release, todo esse código é removido pelo Flutter, então não há impacto de performance nem aumento no tamanho da aplicação.

Vale a pena usar?

Se você cria widgets reutilizáveis ou componentes mais complexos, definitivamente sim.

É um pequeno detalhe que melhora bastante a experiência de depuração e facilita encontrar problemas sem precisar espalhar logs pelo projeto.

💡 Dica: sempre que criar um widget com propriedades importantes para entender seu comportamento, considere implementar debugFillProperties(). Seu “eu do futuro” agradecerá.

2 Curtidas