flutter - 如何在颤动的图像上添加文本？

Question

这是带有边框的图像的代码，

Container(
 child: Image.network(
        "https://drive.google.com/uc?export=view&id=139Wu8bbLz5ubRECzdEmZof8crfGhx0oA", height: 140,fit: BoxFit.cover),
 decoration: BoxDecoration(
   border: Border.all(color: Colors.black12, width: 1),
            ),
          ),

如何以这样的方式添加文本，以便获得给定图像中的输出？

标签： flutterflutter-layout

Answer 1

您可以使用Stack，这是一个示例：

Stack(
  children: [
    Container(
      child: Image.network(
        "https://drive.google.com/ucexport=view&id=1GgUaQNmNaY2h2oRqgBECQZzJ4I6MnV8G",
        height: 140,
        fit: BoxFit.cover,
      ),
      decoration: BoxDecoration(
        borderRadius: const BorderRadius.all(Radius.circular(7)),
        border: Border.all(color: Colors.black12, width: 1),
      ),
    ),
    Positioned(
      child: Text(
        'Vegetables',
        style: TextStyle(
          fontSize: 42,
          shadows: <Shadow>[
            Shadow(
              offset: Offset(1.0, 5.0),
              blurRadius: 2.0,
              color: Color.fromARGB(255, 0, 0, 0),
            ),
          ],
        ),
      ),
      top: 45,
      left: 20,
    )
  ],
)