So, let’s say you’re writing an app using Flutter and you need to develop a widget that takes up 40% of the total screen width. What solution comes to mind? If you thought immediately about using MediaQuery, bravo; go get yourself a soda!

So now you use the MediaQuery class to fetch the size of the screen.

Size size = MediaQuery.of(context).size;
double screenWidth = size.width;

Now, if you’re a dev who’s been working with Flutter for a while, you’ll know that this is a quite frequent operation. I have seen projects where almost every widget file has these two lines in the build method, in one way or another.

But it gets tedious to copy and paste these lines in every single dart file, right? What if there was a way to do this in a simpler way; a way that’s more readable and easier to use along with that sick autocomplete you got going in your VSCode (Android Studio users don’t hate me).

Turns out, there actually is! After all, you read the title before clicking on this blog, didn’t you? 😉

How To: Use Extensions optimally

Let’s refer to the example snippet we saw earlier above. The same can be achieved using an extension on the class BuildContext like this:

extension ContextExtensions on BuildContext {
  Size get screenSize => MediaQuery.of(this).size;
}

So next time you want to get the screen size using MediaQuery, you can just do this:

@override
Widget build(BuildContext context) {
  Size screenSize = context.screenSize;

  return Container(
    height: screenSize.height * 0.9,
    width: screenSize.width,
  );
}

Easy, right? Now, to conclude, I would like to offer a bit of friendly advice. Just because extensions methods exist, doesn’t mean you have to spam and use it every time every where. What do I mean? Let me elaborate.

Here’s another example of when you SHOULD use extensions.

// Without Extension
String capitalize(String input) {
  return input.isEmpty ? '' : input[0].toUpperCase() + input.substring(1);
}

// With Extension
extension StringCapitalization on String {
  String capitalize() {
    return isEmpty ? '' : this[0].toUpperCase() + substring(1);
  }
}

And here’s an example of when you SHOULD NOT be using extensions.

// Without Extension
class Circle {
  double radius;

  Circle(this.radius);

  double calculateArea() {
    return 3.14 * radius * radius;
  }
}

// With Extension (unnecessary in this case)
extension CircleAreaCalculation on Circle {
  double calculateArea() {
    return 3.14 * radius * radius;
  }
}

Dart extensions are a powerful feature, but they are not always necessary, and using them when simpler alternatives are available might lead to code complexity, which will be ironical (LOL) because the very reason you turned to extensions was to save precious time and avoid tedious effort.

And… that’s it. You now bear the power of Dart extensions! Go build great apps!

Until next time.