【FlutterFlow】最初に選択されるタブはこうやれば指定できる

前回記事からの続きです。タブバーの設定を習得しよう！ということで記事を連続で書いています。

前回は、選択中のタブバーの外観を変える設定についてご紹介しました。選択されているタブを際立たせることができれば、ユーザーさんも使いやすいですね。

そして、今回は、デフォルトで選択されるタブを指定します。なんだ、簡単そうだな…と思うかもしれません。でも、ちょっとだけ小難しいのです。知らないと分からなくなりますよ！

気になりますね！よし行ってみよ～♪。

最初に選択されるタブを設定

タブバーを使ったアプリで、最初に選択されるタブはどれでしょう？そうですね、一つ目のタブです。下の例ですと「Flight」というタブです（ちょうど隠れてすみません）。

これを2つ目のタブ、Trainに変更したいとします。ではどうしましょう？

まずは、TabBarを選択します。

プロパティパネルに移動して、General Propertiesを見つけましょう。そのうちのInitial Indexを設定します。アプリが走ったとき、最初に表示されるページはここで設定できます。ちょっと分かりにくいですね。

デフォルトで「０」となっています。なんでゼロなのよ！？と思うかもしれません。実は、「０」が最初のタブ、2つ目が「１」、3つ目が「２」なんです。配列の添字みたいですね。ここらへんは、プログラミングっぽいです。

1に変更してみました。これでTrainが最初に選択されるタブになるはず。

プレビューを表示させると、、、はい、Trainが選択された状態で画面表示されました～。なるほど！

ちなみに、Initial Indexの値は、「タブの数-1」を超えてはいけません。この例ですと、タブの数は3ですから、２を超えてはいけません。まあ、そうなりますよね。また、Initial Indexを空白にすると、やはり最初のタブが指定されます。頭のすみっこにでもいれておきますか。

タブをスクロールOKにするには

もうちょっと進めましょう。タブの数を増やしたいとしますね。よくあることでしょう。例えば、６つとか。次のようになります。

目白押しですがな。というか、表示が壊れていますがなｗ。

こういうときどうすればいいのでしょう。そう、横スクロールできればいいですよね。やってみましょう！

タブバーを選択して、再びGeneral Propertiesを見つけます。今度は、Scrollableにご注目ください。このトグルをONにします。それだけ。デフォルトではOFFになっていますよ。

プレビューしてみましょう！イェイ、タブが横スクロールするようになりました。

簡単ですね～。こういう設定を自分でコードを書いたら大変なんでしょうね…。クリック一つで実装できるなんて、ありがたい！

はい、本日はここまで～。デフォルトで選択されるタブを指定すること、それに加えて、タブをスクロールＯＫにすることができるようになりました～。やったね。

これでタブバーのシリーズはおしまいです。

次回は、スワイプできるページを作る！をテーマにしたいと思います。

ではまた～。