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

Метод 1: пользовательский виджет со строкой и развернутым

Widget textDivider(String text) {
  return Row(
    children: [
      Expanded(child: Divider()),
      Padding(
        padding: EdgeInsets.symmetric(horizontal: 10.0),
        child: Text(text),
      ),
      Expanded(child: Divider()),
    ],
  );
}

Метод 2: ListTile с разделителем

Widget textDivider(String text) {
  return ListTile(
    title: Divider(),
    subtitle: Padding(
      padding: EdgeInsets.symmetric(horizontal: 10.0),
      child: Text(text),
    ),
  );
}

Метод 3. Контейнер с пользовательским стилем разделителя

Widget textDivider(String text) {
  return Container(
    decoration: BoxDecoration(
      border: Border(
        bottom: BorderSide(
          color: Colors.grey,
          width: 1.0,
        ),
      ),
    ),
    child: Padding(
      padding: EdgeInsets.symmetric(horizontal: 10.0),
      child: Text(text),
    ),
  );
}

Метод 4: CustomPainter

class TextDivider extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
        ..color = Colors.grey
        ..strokeWidth = 1.0;
    canvas.drawLine(
      Offset(0, size.height / 2),
      Offset(size.width, size.height / 2),
      paint,
    );
  }
  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}
Widget textDivider(String text) {
  return CustomPaint(
    painter: TextDivider(),
    child: Padding(
      padding: EdgeInsets.symmetric(horizontal: 10.0),
      child: Text(text),
    ),
  );
}

В этой статье мы рассмотрели различные методы создания разделителя с текстом во Flutter. Независимо от того, предпочитаете ли вы использовать встроенные виджеты, такие как Row, ListTile или Container, или хотите настроить разделитель с помощью CustomPainter, Flutter предоставляет гибкие возможности для достижения желаемого дизайна пользовательского интерфейса. Не стесняйтесь экспериментировать с этими методами и выберите тот, который лучше всего соответствует визуальной эстетике вашего приложения.

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