【Flutter】Baseline|Widgetを配置するベースラインを指定

今回はBaselineの基本的な使い方を紹介します。

Baselineを使えば、親Widgetのどのベースライン上にchildを配置するか指定できます。

\ 世界最大級のオンライン学習サービス /

目次

Baselineの使い方

Container(
  width: 200,
  height: 200,
  color: Colors.green,
  child: Baseline(
    baseline: 0,
    baselineType: TextBaseline.alphabetic,
    child: Container(
      width: 50,
      height: 50,
      color: Colors.red,
    ),
  ),
),

上記コードでは親Widget緑色のボックスに対し、子Widget赤色のボックスをどこのベースライン上に配置するかBaselineでラップして指定しています。

baselineで子Widgetが配置されるベースラインをピクセル値で指定します。下画像のように「正数で下側」、「負数で上側」、「0で親Widgetのすぐ上」に配置されます。

baselineTypeの引数にはTextBaseline.alphabeticを渡します。

baseline: 50

baseline: 0

baseline: -50

一緒に読みたい

参考

  • URLをコピーしました!
目次