В Flutter виджет «Текст» — это мощный инструмент для отображения текста в пользовательском интерфейсе вашего приложения. Если вы хотите включить ценовые скидки в свой текст Flutter, вы можете использовать несколько методов. В этой статье мы рассмотрим различные методы и приведем примеры кода, которые помогут вам добиться этого эффекта.

Метод 1: использование виджета RichText

Виджет RichText позволяет по-разному оформлять разные части текста. Чтобы применить скидку, вы можете использовать виджет RichText вместе с классами TextSpan и TextStyle. Вот пример:

RichText(
  text: TextSpan(
    text: 'Original Price: ',
    style: TextStyle(color: Colors.black),
    children: <TextSpan>[
      TextSpan(
        text: '\$100',
        style: TextStyle(
          color: Colors.red,
          decoration: TextDecoration.lineThrough,
        ),
      ),
      TextSpan(
        text: ' \$80',
        style: TextStyle(
          color: Colors.green,
          fontWeight: FontWeight.bold,
        ),
      ),
    ],
  ),
)

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

Метод 2: использование встроенного интервала

Другой подход — использовать встроенные интервалы в тексте. Встроенные интервалы позволяют применять разные стили к определенным частям текста. Вот пример:

Text.rich(
  TextSpan(
    text: 'Original Price: ',
    children: [
      TextSpan(
        text: '\$100',
        style: TextStyle(
          color: Colors.red,
          decoration: TextDecoration.lineThrough,
        ),
      ),
      WidgetSpan(
        child: Padding(
          padding: EdgeInsets.symmetric(horizontal: 4.0),
          child: Text(
            '\$80',
            style: TextStyle(
              color: Colors.green,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ),
    ],
  ),
)

В этом примере мы используем конструктор Text.richи включаем исходную цену и цену со скидкой как отдельные промежутки.

Метод 3: использование строковой интерполяции

Если у вас простой текстовый макет и вы хотите отобразить скидку, вы можете использовать строковую интерполяцию для динамической вставки цены со скидкой в ​​текст. Вот пример:

String originalPrice = '\$100';
double discountPercentage = 20;
double discountedPrice = 0.8 * double.parse(originalPrice.substring(1));
Text('Original Price: $originalPrice\nDiscounted Price: \$$discountedPrice');

В этом примере мы рассчитываем цену со скидкой на основе процента скидки и отображаем ее рядом с исходной ценой.

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

Не забывайте экспериментировать с различными стилями и цветами, чтобы они соответствовали рекомендациям по дизайну вашего приложения. Приятного кодирования!