Reputation: 43
I want this result:
I am unable to get the background text to look how I want.
I have tried overflow.clip and other overflows. I am getting overflow error if I try to do that.
My current code produces this:
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
decoration: BoxDecoration(
color: Color(0xFF86C232),
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(15.0)),
height: 130,
width: 250,
//color: Color(0xFF86c232),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Students',
style: TextStyle(fontSize: 28)),
Text('256',
style: TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold)),
Text(
'256',
style: TextStyle(
fontSize: 154, fontWeight: FontWeight.bold),
overflow: TextOverflow.clip,
softWrap: false,
maxLines: 1,
)
],
),
),
),
Upvotes: 1
Views: 145
Reputation: 9873
I'd rather use CustomPainter, but as a quick solution this works:
Container(
height: 200,
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.red,
),
child: Stack(
overflow: Overflow.clip,
fit: StackFit.expand,
alignment: Alignment.center,
children: <Widget>[
Positioned(
child: Text(
'test',
style: TextStyle(fontSize: 120, color: Colors.black.withOpacity(0.2)),
),
bottom: -60,
),
Center(
child: Text('test', style: TextStyle(fontSize: 40))
),
],
),
)
Upvotes: 2