Flutter 容器在背景图像上写文本

Question

我想做如下设计

我用背景图片构建基本布局。以下是实现该目标的代码。现在我想把“杂货店”文本放在这张图片和其他小部件的顶部。我该怎么做？

Widget build(BuildContext context) {
return Container(
  height: 190.0,
  width: size.width,
  margin: const EdgeInsets.symmetric(
    horizontal: 16.0,
  ),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: <Widget>[
      Expanded(
        child: Row(
          children: <Widget>[
            Expanded(
              child: Container(
                width: size.width,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(11.0),
                  image: DecorationImage(
                    image: NetworkImage(https://www.exampledomain.com/images/background.jpg),
                    fit: BoxFit.cover,
                  ),
                ),
                // child: ????
                
              ),
            ),
          ],
        ),
      ),
    ],
  ),
);}

Answer 1

Stack/Align是你的朋友。

看这里https://api.flutter.dev/flutter/widgets/Stack-class.html

这是一个基本示例（基于您的代码）：

  Widget build(BuildContext context) {
    return Stack(
      children: [
        Align(
          alignment: Alignment.center,
          child: Container(
            alignment: Alignment.center,
            color: Colors.red,
            height: 190.0,
            width: size.width,
            margin: const EdgeInsets.symmetric(
              horizontal: 16.0,
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                Expanded(
                  child: Row(
                    children: <Widget>[
                      Expanded(
                        child: Container(
                          width: size.width,
                          decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(11.0),
                            image: DecorationImage(
                              image: NetworkImage(
                                  "http://www.exampledomain.com/images/background.jpg"),
                              //fit: BoxFit.cover,
                            ),
                          ),

                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
        Align(
          alignment: Alignment.center,
            child: Text("Grocery store"))
      ]
    );
  }

Answer 2

child: Container(
                width: size.width,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(11.0),
                  image: DecorationImage(
                    image: NetworkImage(https://www.exampledomain.com/images/background.jpg),
                    fit: BoxFit.cover,
                  ),
                ),
                child: Text('Grocery store'),
                //padding: <-- Using to shift text position a little bit for your requirement
              ),

Flutter 容器在背景图像上写文本

Flutter container write text over background image

flutter

flutter-layout

flutter-animation