[Flutter]Widgetをハイライトするshowcaseviewを試してみた
showcaseviewとは
下のサンプル画像のように、Widgetをハイライトしてくれるパッケージです。
使い方
まずは、ハイライトしたい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をご覧ください。
その他気になったこと
ShowCaseWidgetにはハイライトが開始したときや終わったときに走らせることができるコールバックを設定できます。
そのコールバックの使い分けがAPIドキュメントで明記されていなかったので戸惑いました。
詳しくは以下のような使い分けるようです。
onStart, onComplete
一つのハイライトの開始と終了時に実行されます。
例えば、startShowCase([_key1, _key2, _key3])でハイライトが始まったとすると、_key1のWidgetのハイライトの開始と終了時に実行され、_key2や_key3のときにも毎回実行されます。
onFinish
一連のハイライトが終了したときに一度だけ実行される。
例えば、startShowCase([_key1, _key2, _key3])でハイライトが始まったとすると、最後の_key3のWidgetのハイライトが終了したときにだけ実行されます。
遊んでみたサンプルコード
今回showcaseviewを遊んでみたサンプルコードは以下に置いておきますので興味があれば見てみてください。
おわり
ある要素のハイライトはアプリを使い始めたばかりのユーザーに対するオンボーディングによく使われかと思います。
showcaseviewはそういった場面でかなり重宝するんじゃないでしょうか。
また、一度オンボーディングをしたら2回目はハイライトを表示しない、というのが一般的な機能要件だと思います。
そのときに僕が作ったパッケージであるlong_time_no_notificationがあれば表示・非表示の制御が簡単にできるのではないかと個人的に思いました。
long_time_no_notificationに関する記事はこちらになります。よければ使ってみてください。
Widgetなどを指定した期間非表示にするlong_time_no_notificationというFlutterパッケージを作った
pub.devはこちらです。
