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

Метод 1: использование символов Юникода
Юникод предоставляет различные символы маркеров, которые можно использовать в виджетах Flutter Text. Вот пример:

Text(
  '\u2022 This is a bullet point',
),

Метод 2: использование виджета «Значок»
Вы можете использовать виджет «Значок» для отображения значков маркеров. Вот пример:

Text.rich(
  TextSpan(
    text: ' ',
    children: [
      WidgetSpan(
        child: Icon(Icons.fiber_manual_record, size: 12),
      ),
      TextSpan(text: 'This is a bullet point'),
    ],
  ),
),

Метод 3: использование виджета RichText
Виджет RichText позволяет форматировать текст с помощью различных стилей и виджетов. Вот пример использования RichText для создания маркеров:

RichText(
  text: TextSpan(
    children: [
      WidgetSpan(
        child: Padding(
          padding: EdgeInsets.only(right: 8),
          child: Icon(Icons.circle, size: 8),
        ),
      ),
      TextSpan(text: 'This is a bullet point'),
    ],
  ),
),

Метод 4: использование виджета ListTile
Виджет ListTile обычно используется для создания списков. Вы также можете использовать его для создания пунктов списка. Вот пример:

ListTile(
  leading: Icon(Icons.fiber_manual_record, size: 12),
  title: Text('This is a bullet point'),
),

Метод 5: использование пользовательского виджета маркированного списка
Вы можете создать собственный виджет для представления маркированного списка и использовать его в виджете «Текст». Вот пример:

class BulletPoint extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        SizedBox(
          width: 8,
          height: 8,
          child: DecoratedBox(
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: Colors.black,
            ),
          ),
        ),
        SizedBox(width: 8),
      ],
    );
  }
}
Text(
  'This is a bullet point',
  style: TextStyle(
    fontSize: 16,
  ),
  strutStyle: StrutStyle(
    leading: 1.5,
  ),
  children: [
    WidgetSpan(
      child: BulletPoint(),
    ),
  ],
),

Метод 6: использование пакета маркированного списка
На pub.dev доступны пакеты, которые предоставляют готовые к использованию функции маркированного списка. Одним из таких пакетов является «пуля». Вот пример использования пакета «bullet»:

import 'package:bullet/bullet.dart';
BulletText(
  text: 'This is a bullet point',
),

Метод 7: использование разметки в стиле HTML
Вы можете использовать пакет flutter_html для рендеринга разметки в стиле HTML в виджете Flutter Text. Вот пример:

import 'package:flutter_html/flutter_html.dart';
Html(
  data: '<ul><li>This is a bullet point</li></ul>',
),

Метод 8: использование пользовательской краски
Вы можете использовать виджет Flutter CustomPaint для рисования маркеров на холсте. Вот пример:

class BulletPointPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.black
      ..style = PaintingStyle.fill;
    final radius = 4.0;
    final bulletOffset = Offset(radius * 2, size.height / 2);
    canvas.drawCircle(bulletOffset, radius, paint);
  }
  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}
Text(
  'This is a bullet point',
  style: TextStyle(fontSize: 16),
  strutStyle: StrutStyle(
    leading: 1.5,
  ),
  children: [
    WidgetSpan(
      child: CustomPaint(
        painter: BulletPointPainter(),
      ),
    ),
  ],
),

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

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