What are Extension Methods and it’s use in Flutter?

This article will help you to understand what are extension methods and what is it’s use.

Extension functions can be added to classes which are already compiled.

So if you want to extend a library which is already added in your app, you can make use of Extension methods.

Watch Video Tutorial

Let’s take a scenario where we want to capitalize the first letter of a String, we usually does this with the help of some Utility functions. The utility function will look like this

class Utils {
  static String firstLetterToUpperCase(String string) {
    if (null != string) {
      return string[0].toUpperCase() + string.substring(1);
    }
    return null;
  }
}

Now let’s see how the above functionality can be achieved with the help of Extension Functions.

Here we will write an extension of the String class.

extension ExtendedString on String {
  // int
  get firstLetterToUpperCase {
    if (null != this) {
      return this[0].toUpperCase() + this.substring(1);
    }
    return null;
  }
}

Here ‘this’ represents the string which is calling this method.

For example

Text('hello world'.firstLetterToUpperCase()),

Extend Widgets

We have extended the ‘String’ class, now let’s see how we can extend widgets.

Let’s create a Text Widget with a code below

Container(
    padding: const EdgeInsets.all(16),
    margin: const EdgeInsets.all(16),
    color: Colors.green,
    child: Text(
        'Hello World',
        style: TextStyle(
        fontSize: 50.0,
        color: Colors.white,
        ),
    ),
),

With the help of extended functions we can rewrite the above code like this…

extension ExtendedText on Text {
  //
  Container addBox() {
    return Container(
      padding: const EdgeInsets.all(16),
      margin: const EdgeInsets.all(16),
      color: Colors.green,
      child: this,
    );
  }
  Text setBigWhiteText() {
    if (this is Text) {
      Text t = this;
      return Text(
        t.data,
        style: TextStyle(
          fontSize: 50.0,
          color: Colors.white,
        ),
      );
    }
    return null;
  }
}

And we will use the above function like this below

Text('Hello World').setBigWhiteText().addBox(),

Remember that since we have extended on Text, this function cannot be applied on other widgets.

To make it applicable on other widgets, we have to modify code like this

extension ExtendedText on Widget

ExtendedText name can be used to import extensions on other classes like this

import 'your_class.dart' show ExtendedText;

If you want not to import the extension, then use

import 'your_class.dart' hide ExtendedText;

One more thing, If you prefix a “_” in front of ExtendedText, then this extension will be private to the class where it is declared.

You can watch my video tutorial to see everything above in action.

Visit my blog for more tutorials.

Please clap if you find this article useful.

Thanks for reading.