Easily Understand Dart’s Extension Methods For Flutter

Unleash the power of Dart’s extension methods in Flutter to boost productivity

Pinkesh Darji
Jan 2 · 5 min read

We as a consumer use many products in our day to day life. Be it a headphone or a car. But before the consumer, we are human first. We all have got some personality within us. We always try to pour our personality into the products that we use. Sometimes the manufacturer gives this freedom and if not people find their own ways to do it. 😎

After all its all about…

Image source: Google Search

Yes, we all do it to make the product truly ours.

Most of us reading this article might be playing the role of developer and we all have been doing the same thing knowingly or unknowingly. Sometimes at some point, we do a lot of code customization rather than writing a new one.

Let’s take an example of it. What if we want to perform any specific/new operation on String class and we want it to be used from many places inside the app. We would be creating a Helper or Utility class like this.

void main() {
print(StringUtil.isValidName('Pizza'));
}
class StringUtil {
static bool isValidName(String str) {
return !str.contains(new RegExp(r'[0–9]'));
}
}

It's all good. No harm in doing this. 👍

But look at the problem here. 😦

But calling our extra needed method from another class is something that doesn't give a real essence Object-oriented programming. Because we are used to perform an operation on the actual instance of an object like this.

myStr.toLowerCase();
myStr.isEmpty;

So how about if we could do this with our own custom methods?

Unfortunately 😦

Fortunately 😃

Presenting Extension Methods

The feature named Extension methods, Introduced in Dart 2.7 allows us to add new functionality to already available libraries. Although it does not allow us to modify existing code directly, It gives us the ability to customize a class in a way so that we can read and use it with ease.

We can also write an extension for getters, setters, and operators as well which is called Extension members. It has been given the name of ‘Extension methods’ so that developers coming from Kotlin, C# can easily co-relate it.

⚫️ Look at the syntax first-

extension <extension name> on <type> {
(<member definition>)*
}

Now the example -

extension ExtendedString on String {
bool get isValidName {
return !this.contains(new RegExp(r'[0–9]'));
}
}
main() {
print('Pizza'.isValidName);
}
Output: True

Short explanation -

If you notice carefully we have actually written extended getter.

⚫️ Writing extended methods -

extension ExtendedString on String {
String prefixWith(String prefix) {
return '$prefix $this';
}
}
main() {
print('Pizza'.prefixWith('I love'));
}
Output: I love Pizza

⚫️ Can we do the same with just an operator?

extension ExtendedString on String {
String operator &(String prefix) => '$prefix $this';
}
main() {
print('Pizaa'&'I Love');
}
Output: I love Pizza

API conflicts

There are chances that the same extension methods are created in different Dart files and you may face API conflicts. For example

-------------------------------------------------------
File: extended_strings.dart
extension ExtendedString on String {
bool get isValidName {
return !this.contains(new RegExp(r'[0–9]'));
}
}
--------------------------------------------------------File: my_extended_strings.dartextension MyExtendedString on String {
bool get isValidName {
return !this.contains(new RegExp(r'[0–9]'));
}
}
-------------------------------------------------------main() {
print('Pizza'.isValidName);
}

The same extension method isValidName is created on String class in two different files which create ambiguity and we have invited conflict.

How do we resolve API conflicts

import 'extended_strings.dart'; //Has isValidName
import 'my_extended_strings.dart' //Has isValidName but now hide it.

Option 2: Write extension explicitly

import 'extended_strings.dart'; //Has isValidName
import 'my_extended_strings.dart' //Has isValidName
main() {
print(ExtendedString('Pizza').isValidName);
print(MyExtendedString('Pizza').isValidName);
}

Flutter advantage

Suppose you want different alignment of children in the column. Normally you would do something like this.

Before

Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Align(
alignment: AlignmentDirectional.centerStart,
child: Text('I am aligned at start'),
),
Align(
alignment: AlignmentDirectional.centerEnd,
child: Container(height: 20,width:50,color:Colors.amber),
),
],
)

After — now with extension methods,

extension ExtendedText on Widget {
alignAtStart() {
return Align(
alignment: AlignmentDirectional.centerStart,
child: this,
);
}

alignAtEnd() {
return Align(
alignment: AlignmentDirectional.centerEnd,
child: this,
);
}
}
------------------------------------------------------------Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('I am aligned at the start').alignAtStart(),
Container(height: 20,width:50,color:Colors.amber).alignAtEnd()
],
)

you clearly see the difference. Right?

And you get such nice Autocomplete for free.

Full code can be found here 👇

Some useful extensions can be found here 👇

Goodbye


For more about programming, follow me and Aubergine Solutions, so you’ll get notified when we write new posts.


Aubergine Solutions

Among the World’s Top 50 UX Agencies. We’re a team of UX Designers and IT Engineers. We balance our madness and method. To know more about us visit www.auberginesolutions.com

Pinkesh Darji

Written by

Passionate Flutter Dev | Google Certified Associate Android Developer | Cross-platform App Dev | Kotlin Android Dev https://twitter.com/PinkeshDarji

Aubergine Solutions

Among the World’s Top 50 UX Agencies. We’re a team of UX Designers and IT Engineers. We balance our madness and method. To know more about us visit www.auberginesolutions.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade