Flutterの文字の大きさデフォルトについて

app barのtitleに文字だけを設定したtext widgetを入れた時、font sizeなどのtextstyleはどう決まっているのだろうか？

Text Widget

If the style's "inherit" property is true, the style will be merged with
the closest enclosing [DefaultTextStyle]. Otherwise, the style will
replace the closest enclosing [DefaultTextStyle].
final TextStyle? style;

inherit propertyがtrueなら、そのwidgetで設定したものと一番近い先祖のを統合して使う。そうじゃないなら、設定したので置き換えるよ。

意味は分かるけど、じゃあnullなら結局どのtext styleを使うんだ？

しょうゆ

MaterialApp()とかScaffoldの中で上手いこと定義されてるんだろうけど、どこだろうか？

しょうゆ

DefaultTextStyleはMaterialApp()でもScaffoldでも作られているっぽいな

MaterilApp()だけでText()を表示した際とScaffoldの下位でText()表示した時で見た目が全然違うものな

しょうゆ

app barのtitleに使われるDefault text styleはapp barで設定されてそう。Card widgetのchildに使われるDefault text widgetもCardで設定されているんだろうな

そうじゃないと大きさの調整とか出来なさそうだし

しょうゆ

これかも！

{@template flutter.material.appbar.titleTextStyle}
The default text style for the AppBar's [title] widget.

If this property is null, then [AppBarTheme.titleTextStyle] of
[ThemeData.appBarTheme] is used. If that is also null, the default
value is a copy of the overall theme's [TextTheme.titleLarge]
[TextStyle], with color set to the app bar's [foregroundColor].
{@endtemplate}

これをみる感じ、何も設定していなければ、appbarのtitleにテキストはtextTheme.titleLargeが使われてそう

しょうゆ

このtypographyのサイトを見ればtext styleの詳細が載ってるな

titleLargeは22px

しょうゆ

基本的に使われているフォントがRobotoだから、フォント自体の種類を変えると、大きさがあまり合わなくなったりするな

しょうゆ

google fontsのサイトurl

https://fonts.google.com/

しょうゆ

Text(
        'Flashcard',
        style: GoogleFonts.yellowtail(
            textStyle: Theme.of(context).textTheme.headlineMedium,
            color: Colors.black),
      ),

使いたいフォントでちょうど良い大きさだったheadlineMediumのstyleだけ流用してみた

しょうゆ

参考記事：