Using extension-methods in Flutter

This article will help you to understand what are extension methods and what is the use of extension methods.

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.

Leave a Reply Cancel reply