Центрировать виджет внутри колонны - PullRequest
1 голос
/ 09 марта 2020

У меня проблема при попытке выровнять текстовый виджет в центре столбца с помощью флаттера. Вот скриншот моего пользовательского интерфейса, и я хочу выровнять тексты под "por Anúncio" по центру контейнера. Я пытался использовать Align Widget, другой столбец, центр, но пока ничего не получалось.

Вот скриншот того, что у меня есть:

enter image description here

А это мой код:

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

1 Ответ

2 голосов
/ 09 марта 2020

Вы должны просто добавить Расширенный виджет выше и ниже Вас, этот Виджет. Расширенный виджет покроет все возможные высоты, поэтому с обеих сторон вы получите одинаковое пространство.

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()
),
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...