🔥

Flutter 3.16 / Dart 3.2 の変更点に対する所感と、対応方法(書いてる途中)

2023/11/17に公開
2

参考リンク

https://medium.com/flutter/whats-new-in-flutter-3-16-dba6cb1015d1

https://medium.com/dartlang/dart-3-2-c8de8fe1b91f

Breaking Change
https://docs.flutter.dev/release/breaking-changes

Flutter

TextScaleFactor => TextScaler

https://docs.flutter.dev/release/breaking-changes/deprecate-textscalefactor

Android 14 の TextScale が「単なる線形型のスケール」ではなくなったための対応らしい。
(TextScale: 2.0 の場合でも、14 => 28 になるわけではない、ということ)

「単純な double ではない例外が生まれたから、クラスでラップしました」って感じっぽいですね。
仕方ない。
(結構使っているので、この対応が一番めんどくさかった)

「TextScale なし」が明示的に示せるように

textScalefactor: 1.0
// 👇
textScaler: TextScaler.noScaling

min/max を関数で指定できるように

import 'dart:math' as math;
textScalefactor: math.min(
  MediaQuery.textScaleFactorOf(context),
  1.3,
)
// 👇
textScaler: MediaQuery.textScalerOf(context).clamp(
  maxScaleFactor: 1.3,
)

掛け算も、演算子ではなく関数で

scale() の引数の double が、fontSize となっているので、「TextScale をフォント以外で使うことは、HACK である」みたいな意思表示なんですかね。

高さ調節やアイコンの大きさ(アイコンも RichText ではあるが)で使うのは禁止ってよりかは、「HACK 的だよ」って示せる感じなんでしょうか。

final height = 24 * MediaQuery.textScaleFactorOf(context);
// 👇
final height = MediaQuery.textScalerOf(context).scale(24);

MediaQuery に static 関数の追加

TextScaler に加えて、今までなかった便利な関数が追加されました。
ただ、これは関数で提供されただけなので、特にこれによってパフォーマンスが良くなったりはしないようです。

MediaQuery.withClampedTextScaling

import 'dart:math' as math;

return MaterialApp(
  builder: (context, child) {
  final mediaQuery = MediaQuery.of(context);

  return MediaQuery(
    data: mediaQuery.copyWith(
	textScalefactor: math.min(
	  mediaQuery.textScaleFactor,
	  1.3,
	)
   ),
);

// 👇

return MaterialApp(
  builder: (context, child) {
    return MediaQuery.withClampedTextScaling(
      maxScaleFactor: kMaxTextScale,
      child: child!,
   },
);

MediaQuery.withNoTextScaling

TextScale を固定したい場合も、関数で対応できるようになりました。

return MaterialApp(
      builder: (context, child) {
        return MediaQuery(
	  data: MediaQuery.of(context).copyWith(
	    textScaleFactor: 1.0,
	  ),
          child: child!,
        );
      },
      home: MyHomePage(),
    );
    
// 👇

return MaterialApp(
      builder: (context, child) {
        return MediaQuery.withNoTextScaling(
          child: child!,
        );
      },
      home: MyHomePage(),
    );

WillPopScope => PopScope

https://docs.flutter.dev/release/breaking-changes/android-predictive-back#migrating-a-back-confirmation-dialog
TODO

useMaterial3 パラメータの deprecated 化

TODO

Discussion

mashmash

文字サイズの固定で参考にさせていただきました!
「MediaQuery.withNoTextScaling」の部分で、「MediaQuery.noTextScaling」となっている箇所があり「with」が抜けてしまっているかもです!(お気づきでしたらすみません)

づだづだ

ご指摘ありがとうございます!!
修正しました!(同時に、この記事が書きかけであるのを思い出しました)