Flutter Performance Tips — Part 3: Lesser-Known Tips

Fast, Faster, Fastest!

Before getting started!

This is the third part of this series, you can check the first and the second one through the links.

Avoid using redundant async operators

Short Answer

Redundant async keyword will cause extra steps on dart lang and will lead slower execution on unnecessary usages.

void a() {} // does nothing
void b() async {} // does nothing

// 100k times
A(RunTime): 39.52732407718287 us.
B(RunTime): 2795.9715142428786 us. // has redundant async
// # more than 70 times faster without async

Long Answer

The hidden cost of async operations in Flutter/Dart

Use Opacity Wisely

Short Answer

Opacity widget is relatively expensive widget to render.

// BAD
Opacity(
  opacity: .5,
  child: Image.network('ehe.jpg'),
)

// GOOD
Image.network(
  'ehe.jpg'
  // 50% transparent white
  color: const Colors.white.withValues(alpha: .5),
  colorBlendMode: BlendMode.modulate,
)

Long Answer

Opacity class

Use MediaQuery Wisely

Short Answer

We can use MediaQuery as InheritedModel now (since v3.10), and that helps us to listen to the property of MediaQuery instead of the entire MediaQuery object.

// Before (listens all MediaQuery changes, cause lots of unnecessary builds)
MediaQuery.of(context).size;

// After (carefree/listens only size changes)
MediaQuery.sizeOf(context);

Long Answer