Question

我在尝试使用flutter对齐文本小部件在列中心时遇到问题。这是到目前为止我的UI的屏幕截图，我想在容器中心对齐“ porAnúncio”下方的文本。我尝试使用Align Widget，另一列，一个Center，但到目前为止没有任何作用。

以下是我所拥有的屏幕截图：

这是我到目前为止的代码：

Container(
  width: MediaQuery.of(context).size.width,
  height: MediaQuery.of(context).size.height - 80,
  decoration: new BoxDecoration(
    gradient: LinearGradient(colors: [
      index == 0
          ? Colors.lightGreen
          : index == 1
              ? Colors.lightBlue
              : index == 2 ? Colors.orangeAccent : Color(0xff2F4858),
      index == 0
          ? Colors.green
          : index == 1
              ? Colors.blueAccent
              : index == 2 ? Colors.deepOrange : Color(0xff04030F)
    ], begin: Alignment.topLeft, end: Alignment.bottomRight),
    borderRadius: BorderRadius.circular(15.0),
  ),
  child: Column(
    children: <Widget>[
      Align(
        alignment: Alignment.topRight,
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: GestureDetector(
              onTap: () {
                Navigator.of(context).pop();
              },
              child: Icon(
                Icons.clear,
                color: Colors.white,
              )),
        ),
      ),
      Text(
        index == 0
            ? "Plano Pré Pago"
            : index == 1
                ? "Plano Básico"
                : index == 2 ? "Plano Intermediário" : "Plano Premium",
        textAlign: TextAlign.center,
        style: TextStyle(
            color: Colors.white,
            fontSize: 26,
            fontWeight: FontWeight.bold,
            decoration: TextDecoration.none),
      ),
      Padding(
        padding: const EdgeInsets.fromLTRB(5, 5, 5, 0),
        child: Text(
          index == 0
              ? "R\$ 19,90"
              : index == 1
                  ? "R\$ 19,90"
                  : index == 2 ? "R\$ 37,90" : "R\$ 99,00",
          textAlign: TextAlign.center,
          style: GoogleFonts.nanumGothic(
              color: Colors.white,
              fontSize: 60,
              fontWeight: FontWeight.bold,
              decoration: TextDecoration.none),
        ),
      ),
      Padding(
        padding: const EdgeInsets.fromLTRB(0, 5, 5, 0),
        child: Text(
          index == 0 ? "por Anúncio" : "Mensais",
          textAlign: TextAlign.center,
          style: GoogleFonts.nanumGothic(
              color: Colors.white,
              fontSize: 20,
              fontWeight: FontWeight.bold,
              decoration: TextDecoration.none),
        ),
      ),
      Container(
        child: Center(
          child: Padding(
            padding: const EdgeInsets.all(5.0),
            child: Text(
              "- 1 Anúncio Ativo\n- 1 Usuário\n- Notificação de interesses de compra\n- Válido para 30 dias",
              textAlign: TextAlign.center,
              style: GoogleFonts.nanumGothic(
                  color: Colors.white,
                  fontSize: 18,
                  fontWeight: FontWeight.w300,
                  decoration: TextDecoration.none),
            ),
          ),
        ),
      ),
    ],
  ),
);

Answer 1

您只需要在该小部件上方和下方添加扩展小部件。展开的小部件将覆盖所有可能的高度，因此在两侧您将获得相同的空间。

Expanded(
  child : Container()
),
Container(
        child: Center(
          child: Padding(
            padding: const EdgeInsets.all(5.0),
            child: Text(
              "- 1 Anúncio Ativo\n- 1 Usuário\n- Notificação de interesses de compra\n- Válido para 30 dias",
              textAlign: TextAlign.center,
              style: GoogleFonts.nanumGothic(
                  color: Colors.white,
                  fontSize: 18,
                  fontWeight: FontWeight.w300,
                  decoration: TextDecoration.none),
            ),
          ),
        ),
      ),

Expanded(
  child : Container()
),

在窗口小部件内居中

1 个答案: