Добавление в список разделителя

При наполнении ListView мы можем по своему стилизовать виджет, который применяется для каждого элемента списка - задать отступы, границы, какую-то графику. Но если речь идет о простом создании разделителя между элементами в ListView, то мы можем воспользоваться еще одним конструктором класса - ListView.separated. Этот конструктор также, как и конструктор ListView.builder позволяет задать с помощью параметра itemBuilder функцию для создания элементов в ListView. Но кроме того с помощью дополнительного параметра separatorBuilder он позволяет задать функцию для создания границы между элементами.

Параметр separatorBuilder также представляет функцию типа IndexedWidgetBuilder, то есть функцию Widget Function(BuildContext context, int index).

Итак, применим конструктор ListView.separated:

import 'package:flutter/material.dart';

final List<String> users = ["Tom", "Alice", "Sam", "Bob", "Kate"];
void main() {
  runApp(MaterialApp(
      home:  Scaffold(
        body: ListView.separated(
            padding: const EdgeInsets.all(8),
            itemCount: users.length,
            separatorBuilder: (BuildContext context, int index) => Divider(),
            itemBuilder: (BuildContext context, int index) {
              return Container(
                padding: EdgeInsets.symmetric(vertical: 10),
                child: Text(users[index], style: TextStyle(fontSize: 22))
              );
            }
        ),
        appBar: AppBar(title: Text("METANIT.COM")),)
  ));
}

Для создания разделителя здесь применяется встроенный виджет Divider(), который по сути представляет полоску:

И Divider предоставляет ряд параметров, которые позволяют настроить разделитель:

• double height: высота разделителя

• double thickness: ширина разделителя

• double indent: отступ перед разделителем

• edouble ndIndent: отступ после разделителя

• Color color: цвет разделителя

Например, настроим разделитель:

import 'package:flutter/material.dart';

final List<String> users = ["Tom", "Alice", "Sam", "Bob", "Kate"];
void main() {
  runApp(MaterialApp(
      home:  Scaffold(
        body: ListView.separated(
            padding: const EdgeInsets.all(8),
            itemCount: users.length,
            separatorBuilder: (BuildContext context, int index) =>
                Divider(height: 20, color: Colors.redAccent,  thickness: 2,),
            itemBuilder: (BuildContext context, int index) {
              return Container(
                padding: EdgeInsets.symmetric(horizontal: 10),
                child: Text(users[index], style: TextStyle(fontSize: 22))
              );
            }
        ),
        appBar: AppBar(title: Text("METANIT.COM")),)
  ));
}

Здесь разделитель принимает ширину в 20 единиц и толщину, равную 3. Кроме того, использует светло-красный цвет.

Для горизонтального списка можно применять другой встроенный виджет VerticalDivider:

import 'package:flutter/material.dart';

final List<String> users = ["Tom", "Alice", "Sam", "Bob", "Kate"];
void main() {
  runApp(MaterialApp(
      home:  Scaffold(
        body: ListView.separated(
            padding: const EdgeInsets.all(8),
            itemCount: users.length,
            scrollDirection: Axis.horizontal,
            separatorBuilder: (BuildContext context, int index) => VerticalDivider(),
            itemBuilder: (BuildContext context, int index) {
              return Container(
                padding: EdgeInsets.symmetric(horizontal: 10),
                child: Text(users[index], style: TextStyle(fontSize: 22))
              );
            }
        ),
        appBar: AppBar(title: Text("METANIT.COM")),)
  ));
}

VerticalDivider предоставляет те же параметры, что и Divider, только вместо параметра height, применяет параметр width, который настраивает ширину разделителя.

Несмотря на то, что Flutter предоставляет встроенные виджеты для создания разделителя - Divider и VerticalDivider, в реальности мы сами можем определить свой виджет, который будет выполнять функцию границы между элементами в ListView. Например, используем виджет Container:

import 'package:flutter/material.dart';

final List<String> users = ["Tom", "Alice", "Sam", "Bob", "Kate"];
void main() {
  runApp(MaterialApp(
      home:  Scaffold(
        body: ListView.separated(
            padding: const EdgeInsets.all(8),
            itemCount: users.length,
            separatorBuilder: (BuildContext context, int index) =>
                Container(height:1, color: Colors.blue, margin: EdgeInsets.symmetric(vertical: 10),),
            itemBuilder: (BuildContext context, int index) {
              return Container(
                padding: EdgeInsets.symmetric(vertical: 10),
                child: Text(users[index], style: TextStyle(fontSize: 22))
              );
            }
        ),
        appBar: AppBar(title: Text("METANIT.COM")),)
  ));
}

Поскольку Container имеет в данном случае высоту 1, то по сути он будет представлять тонкую полоску. Дополнительно здесь устанавливается отступ в 10 единиц от соседних виджетов, в качестве которых выступают виджеты-элементы списка, опять же представленные классом Container с вложенным виджетом Text.