如何在堆栈中将文本放置在图像上？

Posted 2023-02-23

【中文标题】如何在堆栈中将文本放置在图像上？

【英文标题】：How can I position text over image each other in a stack?

【发布时间】：2020-10-18 14:58:09

【问题描述】：

我一直在尝试在颤动中创建一张小卡片，并且我一直在尝试掌握堆栈的窍门以及如何将物品放在一起。我已经在代码中相互移动了很多项目，但我似乎无法弄清楚如何将文本放置在图像上，如图所示。任何有关如何做到这一点的帮助都会很棒！

image of problem

 body: Column(
              children: <Widget>[
                Padding(
                    padding: EdgeInsets.only(top: 20),
                    child: Stack(children: <Widget>[
                      Center(
                        child: InkWell(
                            onTap: null,
                            child: Container(
                              padding: EdgeInsets.all(5),
                              height: 200,
                              width: 300,
                              decoration: BoxDecoration(
                                  gradient: LinearGradient(
                                    begin: Alignment.bottomLeft,
                                    end: Alignment.topRight,
                                    colors: [Colors.red, Colors.redAccent],
                                  ),
                                  borderRadius: BorderRadius.circular(25)),
                              child: Column(),
                            )),
                      ),
                      Center(
                          child: Align(
                              alignment: Alignment.bottomCenter,
                              child: Image.asset(
                                'assets/running.png',
                                height: 180,
                                width: 300,
                              ))),
                      Center(
                          child: Text(
                        "Events",
                        style: GoogleFonts.poppins(
                            color: Colors.white,
                            fontWeight: FontWeight.w600,
                            fontSize: 30),
                      )),
                    ]))
              ],
            ),

【参考方案1】：

在下面的代码中使用Stack Widget

 Stack(
        children: <Widget>[
          Card(
            child: Container(
              height: 200,
              decoration: BoxDecoration(
                  image: DecorationImage(
                fit: BoxFit.cover,
                alignment: FractionalOffset.center,
                image: AssetImage('assets/images/jitesh.jpg'),
              )),
            ),
          ),
          Align(
            alignment: Alignment.topCenter,
              child: Text(
            'jitesh',
            style: TextStyle(fontSize: 20, color: Colors.white),
          )),
        ],
      ),