Dubey sai vithal teja
Dubey sai vithal teja

Reputation: 43

How to achieve this in flutter?

I want this result:

click this to view image

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:

But it looks like 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

Answers (1)

Igor Kharakhordin
Igor Kharakhordin

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))
      ),
    ],
  ),
)

what it looks like

Upvotes: 2

Related Questions