FlutterFlowを使ってAppBarを設定する方法を詳しく解説します。
ページ上部に表示されるAppBarの基本設定から、アイコンの追加、テキストスタイルの変更、奥行き調整まで一つ一つ実演。さらに、複数ページへ同じAppBarを適用し、NewsPicksのような統一感あるデザインを作るポイントも紹介します。
まずはアップバーをONにしよう
FlutterFlowの「Settings（設定）」からAppBarをONにします。
選べるデザインは4種類あるので、その中から好きなスタイルを選べばOKです。
あとで色やフォントサイズも変えられるので、まずはざっくり決めましょう。
アイコンを設定してみる
まずは左上に出てる「三本線」のメニューアイコンから。
ここはよく見る「ハンバーガーメニュー」ですね。テキストのフォントの種類や太さ・色も指定できます。
文字が背景と被って読みづらかったら、ちゃんと調整しましょう。
エレベーションって何？
設定項目に「Elevation（エレベーション）」ってのがあります。
これは簡単に言うと、“影の深さ”みたいなもの。
初期値は5.0になってますが、今回は3.0にして、ちょっとだけ浮き出て見える感じにしてみました。
アイコンを右側にも追加！
左だけじゃなくて、右側にもアイコンを入れてみます。
よくある「🔍虫メガネ（検索）」と「🔔ベル（通知）」の2つ。
FlutterFlowだと、これもけっこう簡単に追加できるので、それぞれサイズを30にして、パディング（余白）も調整して…って感じですね。いい感じになったらOKです。
アップバーの高さも変えられる
意外と知られてないんですが、アップバーの高さも設定できます。
今回は「50」にしてみました。ページに合わせてバランスを見て調整するのがいいと思います。
他のページにもコピペして貼っていく
今作ったアップバーを他のページにも貼っていきます。
元から入ってるAppBarは削除して、新しく作ったやつをコピペでOK。
次はDrawerに挑戦！
はい、そんな感じで今回のAppBar設定はここまで。
次回は「ドロワー（Drawer）」、いわゆるサイドメニューの設定にチャレンジしていきます。お楽しみに！
