FlutterのText()で入れた文字の下が見切れてしまう

Question

Flutterで以下のようなコードでテキストを挿入したのですが、
添付画像のように、なぜか文字の下側が見切れてしまいます。

▼問題のコード

import 'package:flutter/material.dart';

class CastInterview extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      padding:
          EdgeInsets.only(top: 20.0, bottom: 25.0, right: 15.0, left: 15.0),
      margin: EdgeInsets.only(top: 10.0),
      child: Column(
        children: [
          Container(
            width: double.infinity,
            child: Text('アイウエオ',
                textAlign: TextAlign.left,
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 16,
                )),
            margin: EdgeInsets.only(top: 10.0),
          ),
          Container(
            child: Text(
              'アイウエオアイウエオアイウエオアイウエオアイウエオアイウエオアイウエオアイウエオ',
              textAlign: TextAlign.left,
            ),
            margin: EdgeInsets.only(top: 15.0, bottom: 15.0),
          ),
          Container(
            width: double.infinity,
            padding: EdgeInsets.all(8),
            decoration: BoxDecoration(
              border: Border.all(color: Colors.black, width: 1),
            ),
            child: Text('アイウエオ',
                textAlign: TextAlign.center,
                style: TextStyle(
                  color: Colors.black,
                )),
          ),
        ],
      ),
    );
  }
}

▼こちらで、上記ウィジェットを呼び出しています。

class CallCast extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(children: <Widget>[
      Container(
        child: CastInterview(),
      ),
    ]);
  }
}

文字サイズを変えても、文字のpaddingやmarginをいじっても同じでして、、

こちらの原因はなんでしょうか？
よろしくお願いします。

Comments

[nskhei]

おそらくですが、このコードには問題がないように思います。
これを呼び出している側で高さの制限などをしていませんか?

[Yariii]

ご回答ありがとうございます。
今、呼び出し先のコードを追記させていただいたのですが、おそらくそれが原因ではなさそうです。他にも変なコードがないか探しているのですが、心当たりがなく、、

[nskhei]

なるほど、もしかしてWeb版で実行してますか?

[Yariii]

はい、flutter webで、クロームで確認しています。(説明不足ですみません)

Answer 1

おそらくWeb版特有のバグだと思います。スマホ版では正常に表示されるはずです。
これに関してはFlutter側で修正されるまで待つしかないと思います。

とりあえずの対処療法ですが、以下のようにheightを指定すると直るかもしれません。

  child: Text(
    'アイウエオアイウエオアイウエオアイウエオアイウエオアイウエオアイウエオアイウエオ',
    textAlign: TextAlign.left,
    style: TextStyle(height: 2),
  ),

もしくは以下のコマンドで実行することでも直るかもしれません。

flutter run -d chrome --release --dart-define=FLUTTER_WEB_USE_EXPERIMENTAL_CANVAS_TEXT=true

Comments

[Yariii]

ご提案ありがとうございます、残念ながらどちらの方法でも、変わらず見切れたままでした。
Flutterのバグでしたか、、、他に打開策がなさそうでしたら、修正を待つことにします。
(回答はひとまず受付中にさせていただきます)

[nskhei]

なるほど、直らなかったですか...
せっかくなので関連しそうなissueだけ貼っておきますね
・https://github.com/flutter/flutter/issues/65174
・https://github.com/flutter/flutter/issues/64792
・https://github.com/flutter/flutter/issues/50817
・https://stackoverflow.com/questions/59672179/flutter-for-web-text-cut-off-at-bottom

[Yariii]

ご親切にありがとうございます。
ただいま、TextStyleのheightを1.5に小さくしてみたら、直りました！
フォントによって差もあるのでしょうか、どちらにせよ助かりました。ありがとうございました。m_ _m