Flutter Benchmark Tuesday: Material vs Cupertino
Greetings to all Flutter enthusiasts and tech junkies! In our relentless quest to figure out what runs faster, we have already compared various staff. But what about UI frameworks? Which one provides better performance: Material or Cupertino?
C’mon, let’s go
On one hand, we have Material, a framework developed by Google. On the other hand, we have Cupertino, a framework that imitates the look and feel of iOS applications (guys, I hope you’ve never come across this in real life 💪).
For our benchmarking, we will be using a simple test: building the same interface using both frameworks. We will measure the time it takes to build each interface and compare the results.
import 'package:flutter_test/flutter_test.dart';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/rendering.dart';
import 'package:benchmarking/benchmarking.dart';
void main() {
testWidgets('Material vs Cupertino UI Benchmark', (WidgetTester tester) async {
final materialStopwatch = Stopwatch();
final cupertinoStopwatch = Stopwatch();
materialStopwatch.start();
for (int i = 0; i < 1000; i++) {
await tester.pumpWidget(
MaterialApp(
home: Scaffold(
body: MaterialText(),
),
),
);
}
materialStopwatch.stop();
cupertinoStopwatch.start();
for (int i = 0; i < 1000; i++) {
await tester.pumpWidget(
CupertinoApp(
home: CupertinoPageScaffold(
child: CupertinoText(),
),
),
);
}
cupertinoStopwatch.stop();
print('Material UI build took ${materialStopwatch.elapsedMilliseconds} milliseconds.');
print('Cupertino UI build took ${cupertinoStopwatch.elapsedMilliseconds} milliseconds.');
});
}
class MaterialText extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: Text('Material Text'),
);
}
}
class CupertinoText extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: Text('Cupertino Text'),
);
}
}That’s the result:
Well, ladies and gentlemen, the results of our benchmarks will astonish you! If you thought that Material UI was a slow and heavyweight framework, think again!
It’s only twice as slow, let’s not be too hard on it, okay?
But let’s not be too quick to judge. After all, a few extra milliseconds won’t make or break your app (unless you’re developing for high-frequency trading systems, in which case, what are you doing using Flutter?). The real takeaway here is that different UI frameworks can have vastly different performance profiles, and it’s up to us as developers to make informed decisions about which one to use.
So next time you’re about to blindly throw a Material widget into your app, take a moment to consider the humble Cupertino. It might not have the same flashy appeal, but it could just give your app the speed boost it needs. And if you’re a die-hard Material fan, don’t despair. Just remember, slow and steady wins the race… or at least, that’s what the tortoise would have you believe.
Subscribe so you don’t miss any new groundbreaking posts.
You might also be interested in my other benchmarks:
Investing stuff:
Tech stuff:
Or a whole series of articles about working with REST API (it’s a real shit like Santa Barbara):
