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