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

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

Самый простой способ создать выбираемый текст во Flutter — использовать встроенный виджет SelectableText. Вот пример:

SelectableText(
  'Hello, world!',
  style: TextStyle(fontSize: 16),
)

Метод 2: реализация TextSelection и TextSpan

Для большего контроля над выделением и настройкой текста вы можете использовать классы TextSpanи TextSelection. Вот пример:

Text.rich(
  TextSpan(
    text: 'Hello, ',
    children: [
      TextSpan(
        text: 'world',
        recognizer: TapGestureRecognizer()
          ..onTap = () {
            // Handle text selection logic here
          },
        style: TextStyle(
          decoration: TextDecoration.underline,
          color: Colors.blue,
        ),
      ),
      TextSpan(text: '!'),
    ],
  ),
)

Метод 3: использование виджета SelectableText.rich

Если вам нужны более сложные стили текста, а также его выделение, вы можете использовать виджет SelectableText.rich. Вот пример:

SelectableText.rich(
  TextSpan(
    text: 'Hello, ',
    children: [
      TextSpan(
        text: 'world',
        style: TextStyle(
          decoration: TextDecoration.underline,
          color: Colors.blue,
        ),
      ),
      TextSpan(text: '!'),
    ],
  ),
)

Метод 4: реализация пользовательского виджета выбираемого текста

Для еще большей настройки и гибкости вы можете создать собственный виджет, который обрабатывает логику выбора текста. Вот упрощенный пример:

class CustomSelectableText extends StatefulWidget {
  @override
  _CustomSelectableTextState createState() => _CustomSelectableTextState();
}
class _CustomSelectableTextState extends State<CustomSelectableText> {
  bool _isSelected = false;
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          _isSelected = !_isSelected;
        });
      },
      child: Text(
        'Hello, world!',
        style: TextStyle(
          fontSize: 16,
          color: _isSelected ? Colors.blue : Colors.black,
          decoration: _isSelected ? TextDecoration.underline : null,
        ),
      ),
    );
  }
}

В этой статье мы рассмотрели несколько методов реализации выделяемого текста во Flutter. Мы начали с базового виджета SelectableTextи перешли к более сложным методам, используя TextSpan, TextSelectionи пользовательские виджеты. В зависимости от ваших конкретных требований вы можете выбрать метод, который лучше всего соответствует вашим потребностям. Поэкспериментируйте с этими методами и раскройте возможности выделяемого текста в своих приложениях Flutter!