![見出し画像](https://assets.st-note.com/production/uploads/images/100774758/rectangle_large_type_2_36bf570cdbd3a7f123d443c847ef4755.png?width=1200)
【FlutterFlow】最初に選択されるタブはこうやれば指定できる
前回記事からの続きです。タブバーの設定を習得しよう!ということで記事を連続で書いています。
前回は、選択中のタブバーの外観を変える設定についてご紹介しました。選択されているタブを際立たせることができれば、ユーザーさんも使いやすいですね。
そして、今回は、デフォルトで選択されるタブを指定します。なんだ、簡単そうだな…と思うかもしれません。でも、ちょっとだけ小難しいのです。知らないと分からなくなりますよ!
気になりますね!よし行ってみよ~♪。
最初に選択されるタブを設定
タブバーを使ったアプリで、最初に選択されるタブはどれでしょう?そうですね、一つ目のタブです。下の例ですと「Flight」というタブです(ちょうど隠れてすみません)。
![](https://assets.st-note.com/img/1679343158603-DYwQ0JlsDe.png?width=1200)
これを2つ目のタブ、Trainに変更したいとします。ではどうしましょう?
まずは、TabBarを選択します。
![](https://assets.st-note.com/img/1679343381367-EKSpOFxAMB.png)
プロパティパネルに移動して、General Propertiesを見つけましょう。そのうちのInitial Indexを設定します。アプリが走ったとき、最初に表示されるページはここで設定できます。ちょっと分かりにくいですね。
![](https://assets.st-note.com/img/1679343494146-3UUFbCvNjl.png)
デフォルトで「0」となっています。なんでゼロなのよ!?と思うかもしれません。実は、「0」が最初のタブ、2つ目が「1」、3つ目が「2」なんです。配列の添字みたいですね。ここらへんは、プログラミングっぽいです。
1に変更してみました。これでTrainが最初に選択されるタブになるはず。
![](https://assets.st-note.com/img/1679343746966-fdGI6M9Gbu.png)
プレビューを表示させると、、、はい、Trainが選択された状態で画面表示されました~。なるほど!
![](https://assets.st-note.com/img/1679343787489-cy5uIYNv8D.png?width=1200)
ちなみに、Initial Indexの値は、「タブの数-1」を超えてはいけません。この例ですと、タブの数は3ですから、2を超えてはいけません。まあ、そうなりますよね。また、Initial Indexを空白にすると、やはり最初のタブが指定されます。頭のすみっこにでもいれておきますか。
タブをスクロールOKにするには
もうちょっと進めましょう。タブの数を増やしたいとしますね。よくあることでしょう。例えば、6つとか。次のようになります。
目白押しですがな。というか、表示が壊れていますがなw。
![](https://assets.st-note.com/img/1679344258522-DUSAzdDjDD.png?width=1200)
こういうときどうすればいいのでしょう。そう、横スクロールできればいいですよね。やってみましょう!
タブバーを選択して、再びGeneral Propertiesを見つけます。今度は、Scrollableにご注目ください。このトグルをONにします。それだけ。デフォルトではOFFになっていますよ。
![](https://assets.st-note.com/img/1679344438198-NfvNJXDx76.png)
プレビューしてみましょう!イェイ、タブが横スクロールするようになりました。
![](https://assets.st-note.com/img/1679344578242-Bg8gpIwfvu.png?width=1200)
簡単ですね~。こういう設定を自分でコードを書いたら大変なんでしょうね…。クリック一つで実装できるなんて、ありがたい!
はい、本日はここまで~。デフォルトで選択されるタブを指定すること、それに加えて、タブをスクロールOKにすることができるようになりました~。やったね。
これでタブバーのシリーズはおしまいです。
次回は、スワイプできるページを作る!をテーマにしたいと思います。
ではまた~。
この記事が気に入ったらサポートをしてみませんか?