flutter 把一个透明的容器放在文本上面- Futter

yuvru6vn  于 2023-01-21  发布在  Flutter
关注(0)|答案(3)|浏览(137)

我具有类似于

特性
我搞不清楚如何在flutter上创建这个,如何使文本看起来像上面的图像,上面是否有一个容器,如果有,如果文本超过5行,我想显示容器,如何验证它

oyxsuwqo

oyxsuwqo1#

这将是有用的。

Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
          // shadow Container with text first data
            Container(
              decoration: BoxDecoration(
                border: Border(
                  bottom: BorderSide(width: 1.0, color: Colors.red),
                ),
                gradient: LinearGradient(
                  begin: const Alignment(0.0, -1),
                  end: const Alignment(0.0, 1),
                  colors: <Color>[
                    const Color(0xffFFFFFF),
                    const Color(0xff1A1717),
                  ],
                ),
              ),
              child: Center(
                  child: Text(
                      "i confuse how to create this on flutter, how do I make the text look like the image above, is there a container above it, if so, how do I validate it if I want to display the container if the text exceeds 5 lines",
                      style: TextStyle(fontSize: 20))),
            ),
            // secound Data
            const Text(
              '|| See more',
            ),
          ],
        ),

jdgnovmf

jdgnovmf2#

如果您不想使用容器,但您希望这样,您可以使用:

Text( style: TextStyle( overflow: TextOverFlow.fade)

试试这个

zbq4xfa0

zbq4xfa03#

尝试堆叠它与容器,并创建一个梯度与2种颜色(白色和透明。

Stack(
children : [
..your widget
if(!expand) // if not expand
   Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.top,
          end: Alignment.bottom,
          colors: [Colors.white, Colors.yellow],
        ),
      ),
    )
]

相关问题