【Flutter】Baselineの使い方｜指定したベース位置にWidgetを設置

今回は「Baseline」の基本的な使い方について紹介します。

Baselineを使えば、child Widgetが設置されるベースとなる位置を指定できます！

下準備

今回は親ウィジェットとなるContainer(width: 200, height: 200,)に対し、ベースを指定してchild Container(width: 100, height: 100)を設置します。

//下準備
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            height: 200,
            width: 200,
            color: Colors.green,
            child: Container(
              width: 100,
              height: 100,
              color: Colors.blue,
            ),
          ),
        ),
      ),
    );
  }

Baselineの基本プロパティ

baseline

baselineプロパティでchildが設置されるベース位置をピクセル値で指定できます。childは指定したベースの上に表示されます。

親ウィジェットのトップが「baseline: 0」、ボトムが「baseline: 親ウィジェットの高さ」となります。

//ソース（左画像）
Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            height: 200,
            width: 200,
            color: Colors.green,
            child: Baseline(
              baseline: 0,
              baselineType: TextBaseline.alphabetic,
              child: Container(
                width: 100,
                height: 100,
                color: Colors.blue,
              ),
            ),
          ),
        ),
      ),
    );
  }

baselineのピクセル値をマイナス、ボトムより下に表示

baselineプロパティにマイナスのピクセル値も使用でき、親ウィジェットのボトムより下にベースを指定することも可能です。

Columnなどでボトムより下にベースを設置し別のWidgetと重なってしまう場合、はみ出した部分は表示されません。（画像では下に別のWidgetがないので表示される）

baselineType

baselineTypeプロパティでベース位置上におけるchildのポジションをTextBaselineで指定できます。

以上です。