1

введите сюда описание изображения

*Как сделать такое выделение на Dart во Flutter (под Android, если кому важно). Это пример скринов от Google на Kotlin, вот код https://github.com/googlearchive/android-text/tree/master/RoundedBackground-Kotlin * *Это просто текстовое окно TextView *

1 ответ 1

1

Такое во Flutter сделать достаточно легко с помощью RichText и WidgetSpan (альтернатива TextSpan, которую можно кастомить более гибко). Просто в WidgetSpan вы сделаете свой Text и обернете его в Container, который будет задавать нужный фон и границы для текста.

Написал вам пример экрана с подобным текстом, чтобы был понятен принцип, а вы уже под себя настроите по такому же принципу:

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RichText(
          text: TextSpan(
            children: [
              WidgetSpan(
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.lightBlueAccent,
                    borderRadius: BorderRadius.circular(8),
                    border: Border.all(color: Colors.black),
                  ),
                  padding: const EdgeInsets.all(6),
                  child: Text(
                    'Text highlighted',
                    style: TextStyle(
                      color: Colors.black,
                      fontSize: 18,
                    ),
                  ),
                ),
              ),
              WidgetSpan(
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.transparent,
                    borderRadius: BorderRadius.circular(8),
                    border: Border.all(color: Colors.transparent),
                  ),
                  padding: const EdgeInsets.all(6),
                  child: Text(
                    'Text highlighted',
                    style: TextStyle(
                      color: Colors.black,
                      fontSize: 18,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
6
  • А как искать и выделять найденное по среди текста? (недавно перешел на flutter)
    – Chin Han
    15 мар 2021 в 13:50
  • @ChinHan а как вы бы выделяли вне флаттера? Можно тегами, парсить строку на WidgetSpan'ы и по тегам определять, выделять той или иной кусочек текста или нет.
    – Maxgmer
    15 мар 2021 в 13:59
  • на kotlin я искал по координатам и прорисовывал в нужном месте
    – Chin Han
    15 мар 2021 в 14:21
  • @ChinHan думал вам надо по тексту выделять определенные фрагменты, можете тогда более подробно задачу описать? Вам надо выделять только текст на переносах строк вне зависимости от того, какой там текст? Тех.задача в таком духе? Нужно в общем подробнее мне понять проблему, тогда постараюсь помочь)
    – Maxgmer
    15 мар 2021 в 14:36
  • При вставке текста в текстовое поле берутся слова из базы данных и происходит поиск этих слов в тексте который вставили, потом те что были найдены выделяются в тексте (желательно с пересечениями : поездерева -в этом слове выделяется поезд и дерево с пересечениями, зачем, затем что есть языки в которых все слитно). Максимально понятно попытался объяснить. Спасибо ,что помогаете.
    – Chin Han
    15 мар 2021 в 15:21

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.