flutter - center overflowing text and clip

user_6920438 0
Viewed 1245

to implement a layout-design I'm trying to center and overflow (clip) a text outside the screen (see picture). The clip within the red rectangles is out of the screen and should be clipped.

desired behavious

I've been able to let the Text overflow the screen:

Widget build(BuildContext context) {
    return Padding(
            padding: EdgeInsets.fromLTRB(0, 50, 0, 30),
                child: Text(
                  "DASHBOARDasdasdasdasdasdasdas",
                  overflow: TextOverflow.clip,
                  softWrap: false,
                  maxLines: 1,
                  textAlign: TextAlign.center,),

          );
}

but I've not been able to center the text:

The Text is clipped at the end, but not centered

Does someone have an idea of how to realize this?

Thanks

Update:

Thanks to @pungjunghyeon answer the text is now overflowing on the left and on the right. Now I would like to clip the UnconstrainedBox to prevent the overflow warning, but I'm not able to avoid them. Any further hint on this point?

@override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width,
      child: ClipRect(
        child: UnconstrainedBox(

          child: Text(

                "DASHBOARD",
                overflow: TextOverflow.visible,
                textAlign: TextAlign.center,

                style: TextStyle(
                  fontFamily: 'Segoe UI',
                  fontWeight: FontWeight.bold,
                  fontSize: 60,
                  letterSpacing: 20,
                  color: Colors.orange
                ),
            ),
        ),
      ),
    );
  }
clip flutter overflow widget
3 Answers

Use OverflowBox widget, Compared to UnconstrainedBox, this does not generate a warning.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: appBar,
      body: OverflowBox(
        maxWidth: double.infinity,
        alignment: Alignment.center,
        child: Text(
          'DASHBOARD',
          style: TextStyle(fontSize: 80.0),
          overflow: TextOverflow.visible,
          textAlign: TextAlign.center,
        ),
      ),
    ); // Scaffold
  }
user_53546710

Please use the UnconstrainedBox widget.

For example :

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: appBar,
    body: Container(
      width: MediaQuery.of(context).size.width,
      child: UnconstrainedBox(
        child: Text(
          'DASHBOARD',
          style: TextStyle(fontSize: 80.0),
          overflow: TextOverflow.visible,
          textAlign: TextAlign.center
        ),
      )
    ), //Container
  ); // Scaffold
}
user_127963280 
Padding(
            padding: EdgeInsets.fromLTRB(0, 50, 0, 30),
                child: FittedBox(
                  fit:BoxFit.contain,
                  child: Text(
                    "DASHBOARDasdasdasdasdasdasdas DASHBOARDasdasdasdasdasdasdas DASHBOARDasdasdasdasdasdasdas DASHBOARDasdasdasdasdasdasdas DASHBOARDasdasdasdasdasdasdas DASHBOARDasdasdasdasdasdasdas",
                    overflow: TextOverflow.clip,
                    softWrap: false,
                    maxLines: 1,
                    textAlign: TextAlign.center,),
                ),
      );
user_55574790
Related