Flutter フォントサイズが figma と違うかったので調べてみた。

Figma でデザインされたUIを Flutter で開発する時に
padding や margin が微妙に違うなぁみたいに思ってました。

だいたい原因は分かってはいましたが
フォントサイズでしたね。

Figma で設定するフォントサイズでの高さと
Flutter で設定するフォントサイズの高さが違う

ここです。

ということで、
・Figma に合わせるか
・Flutter に合わせるか
なんですが

今回は一旦Flutterの方に合わせるために調べてみました。

dart

ListView(
    children: [
        for (final i in [2,4,6,8,10,12,14,16,18,20,24,28,32,40,48,64,72,])
            Text(
                'item $i',
                style: TextStyle(
                    fontSize: i.toDouble(),
                ),
            ),
    ],
),

fontSize: 2
height: 3

fontSize: 4
height: 6

fontSize: 6
height: 9

fontSize: 8
height: 11

fontSize: 10
height: 14

fontSize: 12
height: 17

fontSize: 14
height: 20

fontSize: 16
height: 23

fontSize: 18
height: 26

fontSize: 20
height: 29

fontSize: 24
height: 34

fontSize: 28
height: 40

fontSize: 32
height: 46

fontSize: 40
height: 57

fontSize: 48
height: 69

fontSize: 64
height: 92

fontSize: 72
height: 103

こうみるとマジでバラバラ。
もっと前段階で勉強してたら色々とやりようあったなぁと思った。

多分、フォントによって違うから
先にどっちに合わせるかで設定しておいた方が良いかも