はじめに
先日、自作の Flutter アプリ「月謝袋アプリ」をフランス語対応した時に、TabBar まわりで思った以上に学びがありました。
「タブなんて 4 つ並べるだけでしょ?」と思っていた過去の自分に教えたい、3つのポイントを書き残しておきます。
同じように多言語対応に挑戦している個人開発者さんの参考になれば嬉しいです ✨
きっかけ:フランス語対応で発覚した「タブの見切れ」
7言語目としてフランス語対応を完了し、iPhone SE シミュレータで確認していた時のこと。
タブがこんな状態になっていました 👇
Tampon[s切れ] Jours de [cours切れ] Récur. Réglage[s切れ]日本語や英語では問題なかったのに、フランス語にした途端、ほとんどのタブが見切れている…!
文字数を比べてみました:
| 日本語 | 英語 | フランス語 |
|---|---|---|
| 月謝スタンプ(6) | Fee Stamps(10) | Tampons(7) |
| レッスン日(5) | Lesson Days(11) | Jours de cours(14) |
| 定期一括(4) | Recurring(9) | Récurrents(10) |
| 設定(2) | Settings(8) | Réglages(8) |
フランス語は名詞や前置詞が多くて、思った以上に長くなりがちなんですね。
学び1:TabBar のデフォルトは「画面幅で均等割り」
Flutter のデフォルト TabBar は、4つのタブがあれば画面幅を4等分します。
iPhone SE は画面幅が 375px しかないので、1タブあたり約 90px。フランス語の Jours de cours(14文字)は到底入りません。
これに気づくまで、私は「フランス語が長いから略語にするしかないかな…」と妥協しかけていました。
でも、Flutter にはちゃんと答えが用意されていました 👇
学び2:isScrollable: true でスクロール可能に
たった 2 行追加するだけで、タブがスクロール可能になります。
TabBar(
controller: _model.tabBarController,
isScrollable: true, // ← 追加
tabAlignment: TabAlignment.start, // ← 追加
tabs: [...],
)これで、各タブは「自然な幅」で表示され、画面幅を超えた分は横スクロールで見られるようになります。
スクロールタブのメリット
- ✅ どの言語でも対応可能(略語にしなくていい)
- ✅ タブ名の意味がそのまま伝わる
- ✅ 多言語アプリの定番パターン(Twitter、Spotify、Google Play なども同じ)
- ✅ 5番目以降のタブを追加する将来の拡張にも強い
スクロールタブのデメリット
- ⚠️ 一度に全タブが見えない(横スクロールで確認)
- ⚠️ 初見のユーザーは「これスクロールできるの?」と気づきにくい
- ⚠️ 左端 or 右端のタブが見切れて見えることがある
メリット・デメリット両方ありますが、多言語アプリには圧倒的にメリットの方が大きいと感じました。
学び3:padding で左右の見切れを緩和
isScrollable: true を有効にした後、選択中のタブは中央に来るようにスクロールするのですが…左端のタブだけがちょっと切れて見えることがありました。
例えば「Réglages」タブを選んだ時、左端の「Tampons」が「mpons」のように見えてしまう。
機能的には問題ないけど、見た目が気になる…。
そこで padding を追加しました 👇
TabBar(
controller: _model.tabBarController,
isScrollable: true,
tabAlignment: TabAlignment.start,
padding: EdgeInsets.symmetric(horizontal: 8.0), // ← この1行
tabs: [...],
)これで左右に 8px の余白ができて、見切れがかなり緩和されました。
「全部見える」わけではないですが、「壊れて見えない」効果は大きいです ✨
ビフォーアフター
Before:isScrollable なし(デフォルト)
Tampon[切] Jours de[切] Récur. Réglage[切]すべてのタブが画面幅で均等割りされ、長いフランス語が見切れる。
After:isScrollable: true + padding
| Tampons | Jours de cours | Récur. | Réglages |
← 横スクロール可能 →各タブが自然な幅で表示され、必要に応じて横スクロール。左右の余白で見切れも緩和。
まとめ:多言語対応で TabBar を扱う3つのコツ
- デフォルトの均等割りは多言語で破綻しやすい
→ 言語によって文字数が大きく違うので、注意 isScrollable: trueで柔軟に
→ メリット・デメリットを理解した上で採用paddingで見た目を整える
→ 機能だけでなく、印象も大切
たった数行の追加で、すべての言語で美しく表示されるタブが作れます。
おわりに
「タブなんて簡単でしょ」と思っていた自分を反省しつつ、多言語対応の奥深さを改めて感じた一日でした。
Flutter の TabBar は、シンプルに見えて実は柔軟な設定がたくさん用意されているんですね。多言語対応に悩んでいる方は、ぜひ isScrollable: true と padding を試してみてください ✨
月謝袋アプリ(Monthly Fee Stamp)は、現在 7 言語(日本語・英語・スペイン語・韓国語・繁体字・簡体字・フランス語)に対応しています。ピアノ、ギター、ヨガなど、月謝制の教室を運営している先生方、ぜひ使ってみてくださいね 🎵
- App Store: Monthly Fee Stamp
- Google Play: 月謝袋アプリ
最後まで読んでいただきありがとうございました!
Flutter の TabBar、奥が深かった話 〜多言語対応で気づいた3つのこと〜
はじめに
こんにちは、SINQWELL の Hisayo です 🎸
先日、自作の Flutter アプリ「月謝袋アプリ」をフランス語対応した時に、TabBar まわりで思った以上に学びがありました。
「タブなんて 4 つ並べるだけでしょ?」と思っていた過去の自分に教えたい、3つのポイントを書き残しておきます。
きっかけ:フランス語対応で発覚した「タブの見切れ」
7言語目としてフランス語対応を完了し、iPhone SE シミュレータで確認していた時のこと。
タブがこんな状態になっていました 👇
Tampon[s切れ] Jours de [cours切れ] Récur. Réglage[s切れ]日本語や英語では問題なかったのに、フランス語にした途端、ほとんどのタブが見切れている…!
文字数を比べてみました:
| 日本語 | 英語 | フランス語 |
|---|---|---|
| 月謝スタンプ(6) | Fee Stamps(10) | Tampons(7) |
| レッスン日(5) | Lesson Days(11) | Jours de cours(14) |
| 定期一括(4) | Recurring(9) | Récurrents(10) |
| 設定(2) | Settings(8) | Réglages(8) |
フランス語は名詞や前置詞が多くて、思った以上に長くなりがちなんですね。
学び1:TabBar のデフォルトは「画面幅で均等割り」
Flutter のデフォルト TabBar は、4つのタブがあれば画面幅を4等分します。
iPhone SE は画面幅が 375px しかないので、1タブあたり約 90px。フランス語の Jours de cours(14文字)は到底入りません。
これに気づくまで、私は「フランス語が長いから略語にするしかないかな…」と妥協しかけていました。
でも、Flutter にはちゃんと答えが用意されていました 👇
学び2:isScrollable: true でスクロール可能に
たった 2 行追加するだけで、タブがスクロール可能になります。
TabBar(
controller: _model.tabBarController,
isScrollable: true, // ← 追加
tabAlignment: TabAlignment.start, // ← 追加
tabs: [...],
)これで、各タブは「自然な幅」で表示され、画面幅を超えた分は横スクロールで見られるようになります。
スクロールタブのメリット
- ✅ どの言語でも対応可能(略語にしなくていい)
- ✅ タブ名の意味がそのまま伝わる
- ✅ 多言語アプリの定番パターン(Twitter、Spotify、Google Play なども同じ)
- ✅ 5番目以降のタブを追加する将来の拡張にも強い
スクロールタブのデメリット
- ⚠️ 一度に全タブが見えない(横スクロールで確認)
- ⚠️ 初見のユーザーは「これスクロールできるの?」と気づきにくい
- ⚠️ 左端 or 右端のタブが見切れて見えることがある
メリット・デメリット両方ありますが、多言語アプリには圧倒的にメリットの方が大きいと感じました。
学び3:padding で左右の見切れを緩和
isScrollable: true を有効にした後、選択中のタブは中央に来るようにスクロールするのですが…左端のタブだけがちょっと切れて見えることがありました。
例えば「Réglages」タブを選んだ時、左端の「Tampons」が「mpons」のように見えてしまう。
機能的には問題ないけど、見た目が気になる…。
そこで padding を追加しました 👇
TabBar(
controller: _model.tabBarController,
isScrollable: true,
tabAlignment: TabAlignment.start,
padding: EdgeInsets.symmetric(horizontal: 8.0), // ← この1行
tabs: [...],
)これで左右に 8px の余白ができて、見切れがかなり緩和されました。
「全部見える」わけではないですが、「壊れて見えない」効果は大きいです ✨
ビフォーアフター
Before:isScrollable なし(デフォルト)
Tampon[切] Jours de[切] Récur. Réglage[切]すべてのタブが画面幅で均等割りされ、長いフランス語が見切れる。
After:isScrollable: true + padding
| Tampons | Jours de cours | Récur. | Réglages |
← 横スクロール可能 →各タブが自然な幅で表示され、必要に応じて横スクロール。左右の余白で見切れも緩和。
まとめ:多言語対応で TabBar を扱う3つのコツ
- デフォルトの均等割りは多言語で破綻しやすい
→ 言語によって文字数が大きく違うので、注意 isScrollable: trueで柔軟に
→ メリット・デメリットを理解した上で採用paddingで見た目を整える
→ 機能だけでなく、印象も大切
たった数行の追加で、すべての言語で美しく表示されるタブが作れます。
おわりに
「タブなんて簡単でしょ」と思っていた自分を反省しつつ、多言語対応の奥深さを改めて感じた一日でした。
Flutter の TabBar は、シンプルに見えて実は柔軟な設定がたくさん用意されているんですね。多言語対応に悩んでいる方は、ぜひ isScrollable: true と padding を試してみてください ✨
月謝袋アプリ(Monthly Fee Stamp)は、現在 7 言語(日本語・英語・スペイン語・韓国語・繁体字・簡体字・フランス語)に対応しています。ピアノ、ギター、ヨガなど、月謝制の教室を運営している先生方、ぜひ使ってみてくださいね 🎵
最後まで読んでいただきありがとうございました!
