[Flutter]Widgetをハイライトするshowcaseviewを試してみた

showcaseviewとは

下のサンプル画像のように、Widgetをハイライトしてくれるパッケージです。

showcaseview | Flutter package

A Flutter package to Showcase/Highlight widgets step by step.

pub.dev

使い方

まずは、ハイライトしたいWidget全てを囲むようにShowCaseWidgetを作成します。

// READMEから引用

ShowCaseWidget(
  builder: Builder(
    // ポイント: SomeWidgetのWidgetツリーの中にハイライトしたいWidgetが全て含まれるようにする
    builder : (context) ( => Somewidget()
  ),
),

次に、ハイライトしたいWidget、ここではIconButtonをShowcaseで囲みます。

startShowCaseメソッドの引数にハイライトしたいWidgetのKeyを渡してあげると、対象のWidgetがハイライトされるようになります。IconButtonをタップしたときにアイコンがハイライトされるように設定してみます。

Globalkey _key1 = GlobalKey();

Showcase(
  key: _key1,
  description: 'description',
  child: IconButton(
    onPressed: () {
      // ポイント: ハイライトしたいWidgetのKeyを引数に渡す
      ShowCaseWidget.of(context)?.startShowCase([_key1]);
    },
    icon: const Icon(Icons.settings),
  ),
),

IconButtonをタップしてみるとハイライトされるようになりました。

ここまでがshowcaseviewの基本的な使い方になります。

他にもハイライト時に一緒に表示されるツールチップをカスタマイズするにはShowcase.withWidgetを使います。

// READMEから引用

Showcase.withWidget(
  key: _three,
  height: 80,
  width: 140,
  shapeBorder: CircleBorder(),
  container: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      ...
    ],
  ),
  child: ...,
),

また、あるページが構築されたときにハイライトを表示させるには以下のようにinitStateで設定しておきます。

@override
void initState() {
  WidgetsBinding.instance!.addPostFrameCallback((_) {
    ShowCaseWidget.of(context)?.startShowCase([_key1, _key2]);
  });

  super.initState();
}

その他の機能についてより詳しく知りたい方はREDMEをご覧ください。

showcaseview | Flutter package

A Flutter package to Showcase/Highlight widgets step by step.

pub.dev

その他気になったこと

ShowCaseWidgetにはハイライトが開始したときや終わったときに走らせることができるコールバックを設定できます。

そのコールバックの使い分けがAPIドキュメントで明記されていなかったので戸惑いました。

詳しくは以下のような使い分けるようです。

onStart, onComplete

一つのハイライトの開始と終了時に実行されます。

例えば、startShowCase([_key1, _key2, _key3])でハイライトが始まったとすると、_key1のWidgetのハイライトの開始と終了時に実行され、_key2や_key3のときにも毎回実行されます。

onFinish

一連のハイライトが終了したときに一度だけ実行される。

例えば、startShowCase([_key1, _key2, _key3])でハイライトが始まったとすると、最後の_key3のWidgetのハイライトが終了したときにだけ実行されます。

遊んでみたサンプルコード

今回showcaseviewを遊んでみたサンプルコードは以下に置いておきますので興味があれば見てみてください。

GitHub - okaryo/flutter_showcaseview_sample: showcaseview sample in Flutter

showcaseview sample in Flutter. Contribute to okaryo/flutter_showcaseview_sample development by creating an account on GitHub.

github.com

おわり

ある要素のハイライトはアプリを使い始めたばかりのユーザーに対するオンボーディングによく使われかと思います。

showcaseviewはそういった場面でかなり重宝するんじゃないでしょうか。

また、一度オンボーディングをしたら2回目はハイライトを表示しない、というのが一般的な機能要件だと思います。

そのときに僕が作ったパッケージであるlong_time_no_notificationがあれば表示・非表示の制御が簡単にできるのではないかと個人的に思いました。

long_time_no_notificationに関する記事はこちらになります。よければ使ってみてください。

Widgetなどを指定した期間非表示にするlong_time_no_notificationというFlutterパッケージを作った

pub.devはこちらです。

long_time_no_notification | Flutter package

A package for easy management of showing and hiding notifications once closed!

pub.dev