Как следует из названия, RichText предоставляет больше возможностей для отображения text на экране.

Свойство style виджета text используется для применения различных стилей к тексту, но его ограничение заключается в том, что стиль применяется ко всему тексту независимо от того, является ли текст однострочным или многострочным. Рассмотрим приведенный ниже фрагмент для отображения одной строки текста на экране:

Container(
    padding: EdgeInsets.all(10),
    child: Center(
        child: Text(
          'The future belongs to those who prepare for it today.')
    )
)

С приведенным выше кодом, если мы применим fontSize как 20, fontStyle как italic, стиль будет применен ко всему тексту, как показано ниже.

Но что, если мы хотим только подчеркнуть слово в тексте выше или показать определенные слова текста жирным/курсивом или другим цветом а остальной текст как обычный текст?

Виджет RichText помогает ответить и достичь вышеуказанных случаев.

Структура RichText

RichText использует TextSpan как родительский объект, который имеет собственное свойство style вместе с параметром text, в который мы можем вводить фактический текст. Затем родительский объект может иметь несколько объектов TextSpan в качестве дочерних, у которых есть собственное свойство style, которое можно применить к соответствующему тексту.

С приведенным выше базовым обзором виджета RichText давайте теперь посмотрим, как мы можем использовать этот виджет в реальном времени.

Сценарий 1:

Большинство приложений имеют экран входа в систему и возможность создать учетную запись. Раздел create account обычно представляет собой комбинацию обычного текста, за которым следует цветной текст, например экран входа StackOverflow, как показано ниже:

Текст Don't have an account? Sign up представляет собой однострочный текст, последняя часть которого является кликабельным словом, которое ведет пользователя к экрану регистрации.

Подход

Мы разделим текст на две части. В первой части мы будем использовать родительский объект TextSpan и введем обычный текст Don't have an account? со свойством цвета Colors.black.

child: Center(
  child: RichText(
    text: TextSpan(
      text: 'Don\'t have an account?', style: TextStyle(color: Colors.black, fontSize: 18),

Во второй части мы будем использовать дочерние объекты TextSpan для ввода текста Sign up и передавать свойство цвета как Colors.blue.

children: <TextSpan>[
  TextSpan(text: ' Sign up', style: TextStyle(color: Colors.blueAccent, fontSize: 18)
      )
]

Результат:

Еще одна замечательная особенность использования виджета RichText заключается в том, что TextSpan объект поставляется со своим собственным TapGestureRecognizer(), который помогает реализовать действие onTap() в определенных частях текста по мере необходимости. В нашем примере, поскольку пользователь может нажать на текст Sign up, чтобы перейти к нужному экрану, мы будем использовать свойство recognizer, которое делает текст доступным для нажатия, как показано во всем фрагменте кода ниже:

Примечание. Перед использованием TapGestureRecognizer() нам потребуется import ‘package:flutter/gestures.dart’;

Container(
    padding: EdgeInsets.all(10),
    child: Center(
      child: RichText(
        text: TextSpan(
            text: 'Don\'t have an account?',
            style: TextStyle(
                color: Colors.black, fontSize: 18),
            children: <TextSpan>[
              TextSpan(text: ' Sign up',
                  style: TextStyle(
                      color: Colors.blueAccent, fontSize: 18),
                  recognizer: TapGestureRecognizer()
                    ..onTap = () {
                      // navigate to desired screen
                    }
              )
            ]
        ),
      ),
    )
)

Используя свойство recognizer, нам не нужно будет оборачивать виджет RichText другим виджетом, таким как GestureDetector, чтобы выставить и использовать tap() для навигации.

Сценарий использования 2:

Так же, как раздел sign up, как мы видели выше, также есть раздел для отображения user agreement на различных экранах входа, например, Xoom (приложение для онлайн-перевода денег) имеет следующий пользовательский интерфейс:

Чтобы реализовать последний раздел, мы можем разделить текст на три части, как показано ниже:

  • Первая часть: родитель TextSpan с текстом (при входе) и стилем (Colors.black)
child: RichText(
  text: TextSpan(
      text: 'By Logging In,',
      style: TextStyle(
          color: Colors.black, fontSize: 15),
  • Вторая часть: первый из дочерних элементов объекта TextSpan с текстом (вы принимаете Xoom) и стилем (Colors.black)
children: <TextSpan>[
  TextSpan(text: ' you accept the Xoom',
      style: TextStyle(
          color: Colors.black, fontSize: 15)
  ),
  • Третья часть: вторая из дочерних элементов объекта TextSpan с текстом (Пользовательское соглашение) и стилем (Colors.blue и fontWeight выделены полужирным шрифтом) и распознавателем для касания.
TextSpan(
    text: ' User Agreement',
    style: TextStyle(color: Colors.blueAccent, fontWeight: FontWeight.bold),
  recognizer: TapGestureRecognizer()
    ..onTap = () {
      // navigate to desired screen
    }
)

Выход:

Случай использования 3:

Здесь мы будем использовать многострочный текст/абзац, в котором некоторые слова будут подчеркнуты другим цветом. Рассмотрим экран входа в систему github, который имеет текстовый абзац, как показано ниже:

Подход

Поскольку текст, кроме open source и business, является простым текстом, мы сосредоточимся на реализации только приведенных выше слов, а не обычного текста.

Внутри объекта TextSpan мы будем использовать свойство style и назначим белый цвет терминам open source и business соответственно вместе с TextDecoration.underline для достижения ожидаемого стиля, как показано ниже:

TextSpan(text: 'open source',
    style: TextStyle(
        color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold, decoration: TextDecoration.underline),
  recognizer: TapGestureRecognizer()
    ..onTap = () {
     // open desired screen
    }
),TextSpan(
  text: 'business,',
    style: TextStyle(
        color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold, decoration: TextDecoration.underline),
    recognizer: TapGestureRecognizer()
      ..onTap = () {
        // open desired screen
      }
),

Весь фрагмент кода выглядит следующим образом:

Container(
    color: Colors.black,
    padding: EdgeInsets.all(10),
    child: Center(
        child: RichText(
          text: TextSpan(
              text: 'GitHub is a development platform inspired by the way you work. From ',
              style: TextStyle(
                  color: Colors.grey,
                  fontSize: 20,
                  fontWeight: FontWeight.bold),
              children: <TextSpan>[
                TextSpan(text: 'open source',
                    style: TextStyle(
                        color: Colors.white,
                        fontSize: 20,
                        fontWeight: FontWeight.bold,
                        decoration: TextDecoration.underline),
                    recognizer: TapGestureRecognizer()
                      ..onTap = () {
                        // open desired screen
                      }
                ),
                TextSpan(
                    text: ' to ',
                    style: TextStyle(color: Colors.grey,
                        fontSize: 20,
                        fontWeight: FontWeight.bold)
                ),
                TextSpan(
                    text: 'business,',
                    style: TextStyle(
                        color: Colors.white,
                        fontSize: 20,
                        fontWeight: FontWeight.bold,
                        decoration: TextDecoration.underline),
                    recognizer: TapGestureRecognizer()
                      ..onTap = () {
                        // open desired screen
                      }
                ),
                TextSpan(
                    text: ' you can host and review code, manage projects, and build software alongside 36 million developers.',
                    style: TextStyle(color: Colors.grey,
                        fontSize: 20,
                        fontWeight: FontWeight.bold)
                )
              ]
          ),
        )
    )
)

И вывод:

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

Это все, что у меня есть в этой статье. Спасибо за чтение и не стесняйтесь комментировать ниже свои мысли или любые предложения / отзывы об этой статье. Я доступен на LinkedIn и Github.