こんにちは。
たとえばX（Twitter）のようにメッセージ中のハッシュタグ（例 #hello）やURL（例 https://citrusapp.jp）やメンション（@user）や、メールアドレス（例 test01@example.com）のような文字を検出して、リンクできるようにしたいときってありますよね？
以下のようなイメージです。
FlutterFlowのデフォルトの機能だとできないがCustomWidgetを書けばできる。
普通にFlutterFlowでテキストを表示しようとしてもできません。
ですが、FlutterFlowはCustomWidget（カスタムウィジェット）でコードをすることが可能です。
カスタマイズすることでハッシュタグやメールアドレス、URLやメンションを検出することができるようになります。
ですが、1から作るのは結構大変ですよね。プログラミングが苦手な人だと尚更です。
マーケットプレイスにCustomWidgetが無料である！
なんとマーケットプレイス上にドンピシャのCustomActionが掲載されてありました。しかも無料です。「LinkTextWidget」という名前です。
製作者は日本人のFlutterFlowエンジニアのようですね。
こちらからWidgetを追加してみましょう。
https://marketplace.flutterflow.io/item/HYsfC13684oEx8f8LKFz
CustomWidget：LinkTextWidgetの使い方
使い方は細かく以下の資料に記載されています。とても丁寧で分かりやすいですね。
https://linen-grass-a40.notion.site/LinkTextWidget-Documentation-f58ffba365c44062845bbf3d6126d550
マーケットプレイスからWidgetを追加したら、使いたい画面から以下のようにコンポーネントからLinkTextWidgetを検索して追加します。
ポイントは、以下のようにApp StateにlinkTextというフィールドを追加する点。これを忘れないようにしましょう。
あとは以下のようにLinkTextWidgetの右メニューのところを見るとonUrlTap、onEmailTap、onHashtagTap、onMentionTapなどの設定するところがあり、これらからアクションを設定すれば完了です。
たとえばクリックした時にそのurlをアラート画面で表示するシンプルなサンプルを作るなら、以下のようにValueにAppStateのlinkTextを取ってきてあげれば完了です。
完成イメージ
以下のような挙動になります。ハッシュタグもメンションもメールアドレスもURLも検出できてることがわかりますね。
FlutterFlowでハッシュタグなどをテキストから検出するカスタムWidget「linkTextWidget」：まとめ
今回はFlutterFlowでハッシュタグ、メールアドレス、URL、メンションなどを検出するlinkTextWidgetを紹介しました。
これはとても便利ですね。色々な場面で活用できそうです。
FlutterFlowはこのような「ちょっとノーコードでは無理そうな機能」もカスタムコードを書くことで実現できちゃうところが嬉しいですよね。
さらに最近はChatGPTをはじめとしたAIがあるので、コーディングのハードルもかなり下がっています。
また、今回のlinkTextWidgetはマーケットプレイスに無料で乗っているのでこれも嬉しい点ですよね。今後も拡充されていくといいですね。
アプリ・Webサービスの開発の無料相談はこちら
FlutterFlow、Adalo、bubble、STUDIOなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。
この機会に、温めていたビジネスアイデアを今すぐ形にしてみませんか？
弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。
また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。
アプリ／Webサービスの開発、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。