Метод 1: ListTile с разделителем
Один простой и эффективный способ создать разделитель с заголовком — использовать виджет ListTileв сочетании с виджетом Divider. Виджет ListTileпозволяет отображать заголовок и подзаголовок, а виджет Dividerдобавляет горизонтальную линию для визуального разделения контента. Вот пример:

ListTile(
  title: Text('Title'),
  subtitle: Text('Subtitle'),
),
Divider(),

class CustomDivider extends StatelessWidget {
  final String title;
  const CustomDivider({required this.title});
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(title, style: TextStyle(fontSize: 16)),
        SizedBox(height: 8),
        Divider(
          color: Colors.blue,
          thickness: 2,
        ),
      ],
    );
  }
}
// Usage
CustomDivider(title: 'Title'),

Метод 3: ExpansionTile
Если у вас есть сворачиваемый раздел или вы хотите предоставить дополнительную информацию, ExpansionTile

ExpansionTile(
  title: Text('Title'),
  children: [
    ListTile(
      title: Text('Subtitle 1'),
    ),
    ListTile(
      title: Text('Subtitle 2'),
    ),
  ],
),

Метод 4: Контейнер с настраиваемым разделителем
Для более расширенных возможностей настройки вы можете использовать виджет Containerдля создания настраиваемого разделителя. Регулируя высоту, ширину, цвет и выравнивание контейнера, вы можете создать уникальные стили разделителей. Вот пример:

Container(
  height: 1,
  width: double.infinity,
  color: Colors.grey,
  alignment: Alignment.center,
  child: Text('Title', style: TextStyle(fontSize: 16)),
),

Разделители с заголовками — эффективный способ упорядочить и повысить визуальную привлекательность пользовательского интерфейса Flutter. В этой статье мы рассмотрели несколько методов реализации разделителей с заголовками, в том числе использование ListTileс Divider, создание пользовательского виджета-разделителя, использование ExpansionTile, и используя Containerсо специальным разделителем. Поэкспериментируйте с этими методами и выберите тот, который лучше всего соответствует дизайну вашего приложения и пользовательскому опыту.

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