Освоение стиля текста во Flutter: выделение частичного текста жирным шрифтом и не только

  1. Виджет RichText:
    Виджет RichText во Flutter позволяет применять различные стили текста в одном абзаце. Чтобы сделать часть текста полужирным, вы можете использовать виджет TextSpan вместе со свойством FontWeight.bold. Вот пример:
RichText(
  text: TextSpan(
    text: 'Hello, ',
    style: DefaultTextStyle.of(context).style,
    children: <TextSpan>[
      TextSpan(
        text: 'world!',
        style: TextStyle(fontWeight: FontWeight.bold),
      ),
    ],
  ),
)
  1. Виджет TextStyle.
    Другой подход — использовать виджет TextStyle и виджет Text вместе. Вы можете указать разные стили текста для разных частей текста, используя свойство style. Вот пример:
Text(
  'Hello, ${TextSpan(text: 'world!', style: TextStyle(fontWeight: FontWeight.bold))}',
  style: TextStyle(fontSize: 16.0),
)
  1. Markdown:
    Если вы предпочитаете более декларативный способ стилизации текста, вы можете использовать пакет markdown во Flutter. Он позволяет писать текст с синтаксисом уценки и автоматически применять соответствующие стили. Чтобы выделить часть текста жирным шрифтом, используйте двойные звездочки («)» вокруг нужного текста. Вот пример:
import 'package:flutter_markdown/flutter_markdown.dart';
MarkdownBody(
  data: 'Hello, world!',
)
  1. Html:
    Если ваше приложение получает HTML-контент и вы хотите его стилизовать, вы можете использовать пакет flutter_html. Он отображает HTML-контент с помощью виджетов Flutter, включая возможность выделения части текста жирным шрифтом. Вот пример:
import 'package:flutter_html/flutter_html.dart';
Html(
  data: 'Hello, <b>world!</b>',
)
  1. TextSpan и DefaultTextStyle:
    Для более сложных сценариев стилизации текста вы можете использовать виджеты TextSpan и DefaultTextStyle. Это позволяет применять разные стили текста к нескольким частям текста без дублирования кода. Вот пример:
DefaultTextStyle(
  style: TextStyle(fontSize: 16.0),
  child: Text.rich(
    TextSpan(
      text: 'Hello, ',
      children: <TextSpan>[
        TextSpan(
          text: 'world!',
          style: TextStyle(fontWeight: FontWeight.bold),
        ),
      ],
    ),
  ),
)

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

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

Удачного программирования и стилизации текста во Flutter!