🦋
タブの文字サイズをデバイスに合わせる
Tabのtitleが見切れてます
例によって、横位置iPadをのSimulatorばかり見ながら開発していて、
androidのスマホで見ると、Tabの文字が見切れてますよ、と指摘された。
確かに、Tab4つも並べているのにthemeで指定していたFontは30、大きすぎる。
とりあえず表示する文字数を少し減らして、
で、Fontを20にしたら、・・・入ったけど・・・
こんどは横位置iPadがすかすかで悲しい。
ということで、MediaQuery再登場
前回は1Pageまるまる2種類つくったけど、今回は文字サイズだけ。
Widget build(BuildContext context) {
final screenWidth = MediaQuery.of(context).size.width; <=まず、これ
return DefaultTabController(
length: 4,
child: Scaffold(
appBar: AppBar(
flexibleSpace: Container(
decoration: const BoxDecoration(
image: DecorationImage(image: AssetImage('assets/images/sea.png'),
fit: BoxFit.cover)
),
),
leading: const NavigationButton(
destinationPage: IndexPage(),
buttonText: 'INDEX'),
leadingWidth: 100,
title: Text(
'Result View',
style: MaritimeTheme.textTheme.headlineMedium,
),
bottom: TabBar(
labelStyle: MaritimeTheme.textTheme.headlineMedium?.copyWith(
fontSize: screenWidth < 600 ? 20 : 30), <= で、このlabelStyle
indicatorColor: Colors.yellow,
tabs: const [
Tab(text: "CLASSIC"),
Tab(text: "Atlantic"),
Tab(text: "Pacific"),
Tab(text: "Globe"),
],
),
),
body: TabBarView(
physics: const NeverScrollableScrollPhysics(),
children: [
中略
],
),
),
);
}
}
細身の時は20、横位置なら30。
色や字体はtheme指定のまま、サイズだけ適応。
ほかにも見切れてるとこ、あるかもねえ
リリースまでに確認します。
Discussion