あなたのUI/UXレベルを上げるニッチなPackageたち。

仕事や個人開発で作っているプロダクトのユーザー体験を1つ成長させるPackageを紹介します。
「こんなpackageあります」とデザイナーに提案してみても良いかもしれません。

今回紹介するpackageは個人開発で使ってみたり、ローカルで動かしてみただけのものも含みます。
使う際はパフォーマンスも考慮してお使いください。

Progressive blurでぼかしをうまく溶け込ませる soft_edge_blur

Progressive blurとはぼかし効果を段階的に変化させる技術です。
アプリライブラリなどで使われていますが、これによりアプリ一覧とApp barの境界線が溶け込んでいます。
そのためより画面が広く感じさせることができます。

https://pub.dev/packages/soft_edge_blur

こちらからDemoを体験できます。

progressive blurについてはこちらが参考になりました。

https://note.com/usagimaruma/n/nef24b2ec0090

Rich Text Editorで書き心地体験をあげる

Rich Text Editorとは太字や箇条書きを簡単に書けるエディターのことです。
例えばNotionやSlackなどは- と打つことで箇条書きになったりしますよね。
FlutterのTextFieldにそのような機能はありませんが、いくつかPackageが存在します。

有名どころのflutter_quill

Rich Text Editorで1番有名なのはflutter_quillではないでしょうか。
FlutterだけではなくJSなどもあります。
ドキュメントがしっかりしています。

https://pub.dev/packages/flutter_quill

Notionみたいなappflowy-editor

意外と知られて否かもしれないですが、appflowy-editorというエディタはNotionみたいな機能を実現できます。

例えば、/を打つことでNotionっぽいメニューバー的なのが出てきます。

また行をドラック&ドロップで移動することもできます。

https://pub.dev/packages/appflowy_editor

iOSに近づける

iOS標準のコンポーネントに近づけたWidgetとしてCupertino系があります。
PackageでもiOSに見た目を近づけるものがあります。

Pull Down Button pull_down_button

このような見た目のPull Downを実現できます。

https://pub.dev/packages/pull_down_button

見た目はかなり似ていて、iOS標準のアプリかなと思わせるくらいですが、インタラクションがもう一歩というところはあります。
例えば、このPull Downを開く時にiOS標準は画面から指を離さずにタップすることができます。
このPackageではそれができません。
とはいえユーザーに馴染みのある見た目を提供できるメリットはありますし、デザインのコストも抑えられます。

iOS標準のリマインダーアプリ

公式に採用されたモーダルシート modal_bottom_sheet

こちらはすでに知っている方もいるかと思います。
iOSのモーダル風の画面遷移ができます。

https://pub.dev/packages/modal_bottom_sheet

https://x.com/imasirooo/status/1886710608470663199

どうやら、Flutter公式がこちらを採用することになっていて、3.29くらいでpackageを使わなくても使えるようになっていそうです。(3.27にはなさそうでした)

https://main-api.flutter.dev/flutter/cupertino/showCupertinoSheet.html

滑らかな角丸で柔らかい印象を与える figma_squircle

Flutterの角丸はiOS標準の角丸と比べて柔らかさが足りません。
より滑らかな角丸をSquircle(スクワークル)と言います。
こちらを適応することでより柔らかい印象を与えることができます。
それを実現するためのPackageです。

https://pub.dev/packages/figma_squircle

この角丸は普通の角丸に比べて計算量が多いためパフォーマンス点で懸念があります。(個人開発で使ってみましたが目に見えるパフォーマンス劣化はありませんでした)
この点を解消すべくFlutter公式が開発中だそうです。
https://github.com/flutter/flutter/issues/139321#issuecomment-2547050922

最高の"待ち時間"(スケルトンUI) shimmer

スケルトンUI(グレーのローディング)を実装する時に使えるpackageです。
スケルトンUIには体感の読み込み時間を短くさせるだけではなく、うまくデザインできればレイアウトシフトを防ぐこともできます。
積極的に取り入れていくことを検討してみましょう。

https://pub.dev/packages/shimmer

楽しい印象を与えるHaptics haptic_feedback

個人的にはHaptics Feedback(押した時に振動するフィードバック)があるアプリは触っていて楽しいと感じます。
Flutter標準でもHapticFeedback.mediumImpact();のように使えますが、このpackageを使えば特殊な条件下でのHapticsや、Hapticsの鋭さを変えられます

// 特殊な条件下(失敗・警告・エラー)
await Haptics.vibrate(HapticsType.success);
await Haptics.vibrate(HapticsType.warning);
await Haptics.vibrate(HapticsType.error);

// 鋭さ
await Haptics.vibrate(HapticsType.rigid);
await Haptics.vibrate(HapticsType.soft);

https://pub.dev/packages/haptic_feedback

画面のどこでもスワイプバックできるようにする swipeable_page_route

本来、スワイプバックは画面の左端でしかできません。
端末の左端は意外と届きづらくストレスを感じることもあります。

swipeable_page_routeを使えば、X(Twitter)やSlackのアプリのように画面どこでもスワイプバックできるようにします。

https://pub.dev/packages/swipeable_page_route

リアル世界に近いアニメーション sprung

アニメーションをこだわり始めるとSpringアニメーションにたどり着きます。
これはバネのような動きを実現するもので、バネとは初速、バネ係数、質量などによって動きが変わってきます。
簡単にいうと、より現実的な世界に近いアニメーションを表現することでユーザーにとって自然なインタラクションを提供できます。

FlutterではSpringSimulationを使うことで実現できます。
しかしAnimationControllerを使わないといけなのでAnimatedContainerなどのImplicit系と相性が悪いのです。

sprungを使えばSpringアニメーションを手軽に使えます。

https://pub.dev/packages/sprung

実はこちらは実際の開発で使ったことはなく、いつか使いたいなと思っています。(Springアニメーション自体は取り入れていますが)
ぜひ使ったことある方がいれば使い心地を教えてください！

責任を持って使おう

今回紹介したPackageはもちろん、UI系のPackage全てに当てはまることは、パフォーマンスに注意することです。
dev toolで確認したり、内部の実装を読んだ上で使うことをお勧めしています。
内部実装を読むことで勉強にもなりますね！

みなさんはどんなpackageがお気に入りですか?

他にも良いPackageはたくさんあると思います。
ぜひコメントで教えてください！
自分の方で試して良いなと思ったら記事に追記させていただきます！

また、使ってみたいと思うPackageがあったらぜひいいね❤️をお願いします！
次の記事へのモチベーションにつながります。

ユーザー体験こだわりたい方、こちらもどうぞ。

最近、「技術視点で深掘るUI/UX入門」という本をZennで出版しました！
この記事で紹介しているPackageなども紹介しています。
ぜひ手を取っていただけると嬉しいです。

https://zenn.dev/imajoriri/books/2ab1be474e53c8

ユーザー体験をより良くする方法を技術視点で深ぼった記事を書いています。
またZennやX(Twitter)のフォローをお願いします。

https://x.com/imasirooo