【Flutter】Baselineの使い方｜子要素のベースラインを調整する

2023年1月14日

こんにちは、フラメルです。

今回は子要素のベースラインを調整できるBaselineの使い方を紹介します。

Baselineの使い方

親要素に対して子要素のベースラインを調整したいウィジェットをBaselineでラップします。

次にbaselineTypeをTextBaseline.alphabeticにし、baselineでベースラインを調整します。

baselineが「0」の場合は親要素の上部に接する位置、「マイナス」の場合は親要素の上部より上側、「プラス」の場合は親要素の上部より下側に子要素が配置されます。

Container(
  width: 300,
  height: 300,
  color: Colors.blue,
  child: Baseline(
    baselineType: TextBaseline.alphabetic,
    baseline: 100,
    child: Container(
      width: 100,
      height: 100,
      color: Colors.amber,
    ),
  ),
),

サンプルコード

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter')),
        body: Center(
          child: Container(
            width: 300,
            height: 300,
            color: Colors.blue,
            child: Baseline(
              baselineType: TextBaseline.alphabetic,
              baseline: 100,
              child: Container(
                width: 100,
                height: 100,
                color: Colors.amber,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

以上です。

合わせて読みたい

参考サイト

https://api.flutter.dev/flutter/widgets/Baseline-class.html