タブの文字サイズをデバイスに合わせる

Tabのtitleが見切れてます

例によって、横位置iPadをのSimulatorばかり見ながら開発していて、
androidのスマホで見ると、Tabの文字が見切れてますよ、と指摘された。
確かに、Tab４つも並べているのにthemeで指定していたFontは30、大きすぎる。
とりあえず表示する文字数を少し減らして、
で、Fontを20にしたら、･･･入ったけど･･･
こんどは横位置iPadがすかすかで悲しい。

ということで、MediaQuery再登場

前回は１Pageまるまる２種類つくったけど、今回は文字サイズだけ。

  @override
  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指定のまま、サイズだけ適応。

ほかにも見切れてるとこ、あるかもねえ

リリースまでに確認します。