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