CODEWITHSUNDEEP
flutterdartflutter-web
dafep
dafep

Reputation: 229

flutter for web: text cut off at bottom

With web flutter my text is cut at the bottom when I display text I tried to put padding but it doesn't work.

this problem this product everywhere even on the TextField

enter image description here

    new Container(
      width: menuRightWidthDesktop,
      height: getSize == 0 ? heightHeaderDesktop : getSize == 1 ? heightHeaderTablette : heightHeaderMobile,
      color: Colors.red,
      child: new Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          new GestureDetector(
            child: new Container(
              color: Colors.indigoAccent,
              child: new Text("Surfeur >"),
            ),
            onTap: () {},
          ),
          new GestureDetector(
            child: new Text("Photographe >", ),
            onTap: () {},
          ),
        ],
      ),
    ),

Upvotes: 4

Views: 4746

Answers (5)

MindStudio
MindStudio

Reputation: 786

I had the same Problem in FireFox so I tried a few workarounds but none seemed to work so I checked wich version of flutter I was using with flutter doctor. I was already using the beta channel (Version 1.25.0...). Since there were newer beta versions available I ran flutter upgrade and upgraded to version 1.26.0....pre.

The issue just disappeared so I guess it got fixed in a newer version.

So... just upgrade flutter to the newest beta version.

Upvotes: 0

hayashi-ay
hayashi-ay

Reputation: 299

@madebyAyan's answer works for me. Moreover, I added this as a theme to avoid repeating parts in multiple places.

  TextTheme _buildTextTheme(TextTheme base) {
    return base.copyWith(
      bodyText2: base.bodyText2?.copyWith(
        height: 1.1,
      ),
    );
  }

Upvotes: 2

HenockM
HenockM

Reputation: 1

use text property TextBaseline.ideographic :

Text("Surfeur >",
  style: TextStyle(
     textBaseline: TextBaseline.ideographic,
  ),
),

Upvotes: 0

madebyAyan
madebyAyan

Reputation: 101

I've been having the same issue and solved it by increasing the height property of the text by a small value

Text("Surfeur >",
  style: TextStyle(
    height: 1.1,
  ),
),

Upvotes: 9

chunhunghan
chunhunghan

Reputation: 54367

There is a new pull request https://github.com/flutter/engine/pull/13929
experimental implementation of text measurement that's based on Canvas2d

You can use the following command

flutter run -d web-server --release --dart-define=FLUTTER_WEB_USE_EXPERIMENTAL_CANVAS_TEXT=true

Upvotes: 2

Related Questions