🍆

headline6 は非推奨

2024/10/05に公開

🚨Tips

Flutter の最新バージョンでは、TextTheme の命名規則が変更されました。headline6 は非推奨となり、代わりに titleLarge を使用することが推奨されています。

あれよくあるサンプルコードのあれは非推奨なのか...

import 'package:flutter/material.dart';

class OptimizedMediaQueryExample extends StatelessWidget {
  const OptimizedMediaQueryExample({super.key});

  
  Widget build(BuildContext context) {
    // サイズに関する最適化された使用
    final size = MediaQuery.sizeOf(context);
    final isLargeScreen = size.width > 600;

    // アクセシビリティに関する最適化された使用
    final isAccessibleNavigation = MediaQuery.accessibleNavigationOf(context);

    // キーボードに関する最適化された使用
    final bottomInset = MediaQuery.viewInsetsOf(context).bottom;
    final isKeyboardVisible = bottomInset > 0;

    // アニメーションに関する最適化された使用
    final disableAnimations = MediaQuery.disableAnimationsOf(context);

    return Scaffold(
      appBar: AppBar(
        title: const Text('最適化されたMediaQuery使用例'),
      ),
      body: Column(
        children: [
          Text(
            isLargeScreen ? '大画面デバイス' : '小画面デバイス',
            style: Theme.of(context).textTheme.titleLarge, // headline6 から titleLarge に変更
          ),
          Text(
            'アクセシブルナビゲーション: ${isAccessibleNavigation ? '有効' : '無効'}',
          ),
          Text(
            'キーボード: ${isKeyboardVisible ? '表示中' : '非表示'}',
          ),
          if (!disableAnimations)
            AnimatedContainer(
              duration: const Duration(seconds: 1),
              height: isKeyboardVisible ? 100 : 200,
              color: Colors.blue,
              child: const Center(child: Text('アニメーション対応コンテナ')),
            )
          else
            Container(
              height: 150,
              color: Colors.blue,
              child: const Center(child: Text('静的コンテナ')),
            ),
        ],
      ),
    );
  }
}

この更新されたコードでは、以下の変更を行いました:

Theme.of(context).textTheme.headline6 を Theme.of(context).textTheme.titleLarge に変更しました。

これにより、最新の Flutter バージョンとの互換性が保たれ、警告が解消されます。
TextTheme の主な変更点は以下の通りです:

headline1 → displayLarge
headline2 → displayMedium
headline3 → displaySmall
headline4 → headlineMedium
headline5 → headlineSmall
headline6 → titleLarge
subtitle1 → titleMedium
subtitle2 → titleSmall
bodyText1 → bodyLarge
bodyText2 → bodyMedium

これらの新しい命名規則を使用することで、コードの可読性が向上し、将来的な互換性も確保できます。また、MediaQuery の最適化された使用方法はそのまま維持されているため、アプリのパフォーマンスも引き続き考慮されています。


これらの変更に関する情報と、変更が行われた時期についての証拠となる情報は以下のリンクで確認できます:

Flutter公式ドキュメント - TextTheme クラス:
https://api.flutter.dev/flutter/material/TextTheme-class.html
このページでは、新しい命名規則が使用されており、古い名称は非推奨(deprecated)としてマークされています。
Flutter GitHub リポジトリ - TextTheme の変更に関する PR:
https://github.com/flutter/flutter/pull/91605
この Pull Request は 2021年10月27日にマージされました。これが、TextTheme の新しい命名規則が導入された時期の証拠となります。
Flutter 2.10 リリースノート:
https://medium.com/flutter/whats-new-in-flutter-2-10-5aafb0314b12
この記事では、Flutter 2.10(2022年2月にリリース)で Material 3 のサポートが追加されたことが言及されています。新しい TextTheme の命名規則はこの Material 3 デザインシステムの一部として導入されました。

これらの情報源から、TextTheme の新しい命名規則は 2021年後半から 2022年初頭にかけて段階的に導入され、Flutter 2.10 で正式にサポートされたことがわかります。ただし、古い命名規則も互換性のために一定期間維持されており、徐々に非推奨となっていきました。

Discussion