Search code examples
flutterwidgetoverflowclip

flutter - center overflowing text and clip


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
                ),
            ),
        ),
      ),
    );
  }

Solution

  • 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
    }