こんにちは。たとえば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/HYsfC13684oEx8f8LKFzCustomWidget: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などの構築に興味のある方は、こちらからご気軽にご相談ください。