Текст между пробелами на флаттер

Question

В настоящее время у меня есть код для цены продукта, названия и старой цены, и когда я кодирую его, это дает мне очень неудовлетворительный стиль:

Как мне кодировать таким образом, чтобы я получал название продукта сверху, цену в середине и старую цену в самом низу по вертикали? Например:

Куриная коробка для завтрака

Старая цена: 55 000

Новая цена: 45 000

В этом формате? Буду признателен за помощь.

Вот мой код, отвечающий за это изображение:

@override
  Widget build(BuildContext context) {
    return Card(
      child: Hero(
          tag: prod_name,
          child: Material(
            child: InkWell(
              onTap: () {},
              child: GridTile(
                  footer: Container(
                    color: Colors.white70,
                    child: ListTile(
                      leading: Text(
                        prod_name,
                        style: TextStyle(fontWeight: FontWeight.bold, fontSize: 12.0, ),
                      ),
                      title: Text(
                          "\$$prod_price",
                      style: TextStyle(
                          color: Colors.blue, fontWeight: FontWeight.w800,fontSize: 12.0,),
                      ),
                    subtitle: Text(
                      "\$$prod_old_price",
                      style: TextStyle(
                        color: Colors.blue,
                          fontWeight: FontWeight.w800,
                          fontSize: 12.0,
                          decoration
                              :TextDecoration.lineThrough),
                      ),
                    )
                    ),
                    child: Image.asset(
                    prod_picture,
                    fit: BoxFit.cover,
                  )),
            ),
          )),
    );
  }
}

Answer 1

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

Column(
  children: [
    Text('title'),
    Text('price'),
    Text('prev_price'),
  ],
)

Для получения более подробной информации: https://api.flutter.dev/flutter/widgets/Column-class.html

Answer 2

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

Попробуйте следующий код:

ListTile(
          title: Text("Checken LunchBox"),
          subtitle: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text("Oldprice :55,000"),
              Text("NewPrice :55,000"),
            ],
          ),
        ),