Flutterでのextension(拡張関数)の便利な使い方

image

はじめに

今回は、Flutterの拡張関数(extension)のについて説明していきたいと思います。
拡張関数を使いこなすことができれば、コードの書き方の幅がかなり広がりますよ!

拡張関数extensionとは

拡張関数とは・・・あるクラスにメソッドを追加できるものです。
メソッドを追加できるということは、プロジェクト内でよく使うメソッドなどをあらかじめextensionで作っておくことで、あらゆる処理を書くのが楽になります。

以下で、実際に僕がよく使っているextensionの具体例を紹介したいと思います。

extensionを使ってcontextにメソッドを追加する

contextを使って、〇〇する。というケースはかなり多いと思います。
例えば以下のような、

  • Theme.of(context)...

  • MediaQuery.of(context)...
    などです。

  • contextから情報を引っ張ってくる。

  • contextを使って処理をする。
    などcontextを使うものはextensionを使うことで、かなりシンプルなコードにできます。

contextを拡張する具体例

以下のようにcontextを拡張すれば、コードがスッキリすると思います。

import 'package:flutter/material.dart';

extension ContextEx on BuildContext {
  TextTheme get textTheme => Theme.of(this).textTheme;

  ColorScheme get colorTheme => Theme.of(this).colorScheme;

  Size get screenSize => MediaQuery.of(this).size;

  double get screenHeight => MediaQuery.of(this).size.height;

  double get screenWidth => MediaQuery.of(this).size.width;

  ScaffoldFeatureController<SnackBar, SnackBarClosedReason> showSnack(
      SnackBar snackBar) {
    return ScaffoldMessenger.of(this).showSnackBar(snackBar);
  }
}

スクリーンの横幅を取得する部分は、

final screenWidth = MediaQuery.of(context).size.width;

でなく、

final screenWidth = context.screenWidth;

というようにスッキリ書けるようになります。

extensionを使ってenumにメソッドを追加する

enumは条件分岐の際によく使われると思います。
extensionを使ってやることで、こちらもスッキリしたコードになると思います。

enumを拡張する具体例

enumに条件分岐用のメソッド追加する方法は以下の通りです。
この説明では、TestTypeというenumを仮に使用します。

enum TestType { one, two, three }

extension TestTypeEx on TestType {
  bool get isOne => this == TestType.one;

  bool get isTwo => this == TestType.two;

  bool get isThree => this == TestType.three;
}

ここでよくあるケースとして、

void testFunction(TestType testType) {
  if (testType == TestType.one) {
    //...
  } else if (testType == TestType.two) {
    //...
  } else {
    //...
  }
}

上記のような条件分岐がよくあると思います。
enumの名前(ここではTestType)が長いと、コードも冗長となってしまいがちです。
しかし、extensionを使うことで、testTypeの条件式スッキリします。

void testFunction(TestType testType) {
  if (testType.isOne) {
    //...
  } else if (testType.isTwo) {
    //...
  } else {
    //...
  }
}

プロジェクト内に、特定のenumを使った条件式が多いほど効果があると思います。

Flutterでextensionを使う際の注意点

1つだけ注意点があります。
それはimport漏れです。
extensionで拡張したメソッドは、現状コード補完が効いてくれないです。
「拡張したメソッドが候補に出てこない...」ということがあるかもしれないので、拡張関数を書いたファイルをimportできているか確認しましょう。

最後に

いかがでしたか。
Flutterでextensionを使いこなせるようになれば、従来のコードよりもかなりスッキリしたコードが書けるようになると思います。 参考になれば幸いです。

参考

https://dart.dev/guides/language/extension-methods https://qiita.com/YusukeIwaki/items/b866c6ebbbab8859e262

お知らせ

5月28日開催のアプリ開発講座の参加者募集中!!

5月28日開催のアプリ開発講座の参加者募集中!!

5月28日にアプリ開発講座を開催します!会場は岐阜県美濃加茂市のコワーキングスペース「こやぁね」です。興味のある方は是非ご参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More

お知らせ

5月28日開催のアプリ開発講座の参加者募集中!!

5月28日開催のアプリ開発講座の参加者募集中!!

5月28日にアプリ開発講座を開催します!会場は岐阜県美濃加茂市のコワーキングスペース「こやぁね」です。興味のある方は是非ご参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More