ウィジットを追加することができるように、言語切替えのボックスのみ準備をしました。今回は、ウィジットを追加して検索結果を表示したいと思います。追加する(前編)ウィジットを追加する今回は、サイトの中でウィジットを利用することができるように、プロジェクトを変更していきます。この手順は以下のように提供されています。プロジェクトにインストールします。配置するパスを指定します。今回は以下のように作成しました。以下のコードを追加してください。},これで準備ができました。ファイルを作成します。create-widget実行すると以下のようにウィザード形式で質問と回答を繰り返していきます。今回は以下のように進めていきました。PreviewSearch以下が実行結果となります。ファイルがフォルダの下にできました。いうファイルを作成します。rfkId="rfkid_6"></PreviewSearch>}</div>;}これで作成したウィジットを呼び出すコンポーネントができました。ファイルを変更していきます。必要となる追加のインポートは以下の通りです。呼び出しはすでに入れてありますが、別の項目が必要となっているため注意してください。"@/components/HeaderInput";続いて、ウィジットを利用する際に必要となるコードを追加していきます。利用して言語に関して制御することができるようになっているため、以下のように書き換えます。setStorageLanguage]);これで準備ができました。先ほど作成したウィジットのためのコンポーネントを実装します。);これで準備が整いました。実行すると、以下のように動作することがわかります。ファイルに対してコンポーネントを並べている状況ですが、ヘッダーとして利用するコンポーネントをまとめていきます。して以下のファイルを作成します。ファイルのコンポーネントを並べているところを変更するために、以下の記述を追加してください。</WidgetsProvider>これでヘッダーで利用するコンポーネントをヘッダーコンポーネントに集めました。動作結果は全く同じです。まとめ前回の言語選択のドロップダウンボックスと、ウィジットが連携をして検索結果を表示しているのを確認することができました。ここまでのコードは、以下のリポジトリでブランチとして公開しています。