Flutter Layout：-如何构建此布局

Question

我想使文本与图像内的中心对齐，如图所示。 我最近开始使用Flutter，请帮助我实现布局。

Container(
            width: MediaQuery.of(context).size.width,
            margin: EdgeInsets.fromLTRB(24, 20, 24, 0),
            child: Stack(
              children: <Widget>[
                ClipRRect(
                  borderRadius: BorderRadius.circular(16.0),
                  child: Image.asset(
                    'assets/images/car.jpg',
                    fit: BoxFit.cover,
                  ),
                ),
                Positioned.fill(
                  child: Align(
                    alignment: Alignment.center,
                    child: Text(
                      'Cars',
                      style: TextStyle(
                          fontFamily: 'Welcome',
                          fontSize: 30,
                          color: Colors.white),
                    ),
                  ),
                )
              ],
            ),
          )

在上述代码的帮助下，文本显示在底部中心而不是中心。

Answer 1

    return Container(
      width: MediaQuery
          .of(context)
          .size
          .width,
      margin: EdgeInsets.fromLTRB(24, 20, 24, 0),
      child: Stack(
        alignment: Alignment.center,
        children: <Widget>[
          ClipRRect(
            borderRadius: BorderRadius.circular(16.0),
            child: Image.asset(
              Images.image1,
              fit: BoxFit.cover,
            ),
          ),
          Text(
            'Cars',
            style: TextStyle(
                fontFamily: 'Welcome',
                fontSize: 30,
                color: Colors.white),
          )
        ],
      ),
    );