如何实现这一点?

时间:2019-11-07 11:15:47

标签: flutter dart flutter-layout

我想要这个结果:

click this to view image

我无法获取背景文本以查看我想要的样子。

我尝试了overflow.clip和其他溢出。如果尝试这样做,则会收到溢出错误。

我当前的代码会产生以下结果:

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

1 个答案:

答案 0 :(得分:2)

我宁愿使用CustomPainter,但作为一种快速解决方案,它可以起作用:

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