AppBarのテキストの１行目が２行目と被ってしまう

Question

AppBarのテキストをちゃんと表示させたい

Dartで英語話者向けの辞書アプリを作成中です。
AppBarに「ふりがな」「単語」「ローマ字」を縦並びで表示させたいのですが、ふりがなの下の部分が切れてしまいます。

発生している問題のスクリーンショット

該当のソースコード

import 'package:dictionary/Models/singleton.dart';
import 'package:dictionary/Models/verbs_data.dart';
import 'package:flutter/material.dart';

class FlexHeaderFurigana extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Verb verb = Verb.getInstance();
    VerbsData verbsData = verb.verb;
    // TODO: implement build
    return SafeArea(
      bottom: false,
      child: Text(verbsData.furigana ?? 'no data yet',
          style: TextStyle(fontSize: 10.0)),
    );
  }
}

class FlexHeaderMain extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Verb verb = Verb.getInstance();
    VerbsData verbsData = verb.verb;
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        IconForWord(),
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 15.0),
          child: Text(
            verbsData.main_word,
            style: TextStyle(fontSize: 20.0),
          ),
        ),
        IconForWord(),
      ],
    );
  }
}

class FlexHeaderRomaji extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Verb verb = Verb.getInstance();
    VerbsData verbsData = verb.verb;
    return SafeArea(
      top: false,
      child: Text(verbsData.romaji ?? 'no data yet',
          style: TextStyle(fontSize: 12.0)),
    );
  }
}

class IconForWord extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Icon(
      Icons.fastfood,
      color: Colors.black26,
      size:27.0,
    );
  }
}

VerbDataは、単語の情報をFirestore databaseから取り出してくるものです。

試したこと

SafeAreaで　bottom:false　にしてるのに２行目と被ってしまうのが、なぜかわかりません。
FlexHeaderMain（メインの単語を表示する部分、２行目）のPaddingで vertical : 0.1 で幅を細くしても、変化はありませんでした。

補足情報（FW/ツールのバージョンなど）

MacOS, Android Studioです。

Answer 1

SafeAreaは、OS固有のUI（上であればバッテリー残量や時間などが表示されている部分）に被らないようにするためのもので、ウィジェット同士が被らないようにするためのものではありません。

少し窮屈そうなので、もう少し高さに猶予を持たせるか、フォントサイズを小さくしてみてはどうでしょうか？

Comments

[SuperJulior]

そうなのですね！フォントのサイズを見直しました。毎度ありがとうございます。