Во Flutter ListView — это часто используемый виджет для отображения прокручиваемого списка элементов. Добавление небольшой кнопки внутри ListView может быть полезно для выполнения действий над отдельными элементами списка. В этой статье мы рассмотрим пять различных методов достижения этой функциональности на примерах кода.

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

ListView.builder(
  itemCount: itemCount,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('Item $index'),
      trailing: IconButton(
        icon: Icon(Icons.delete),
        onPressed: () {
          // Perform action when the button is pressed
        },
      ),
    );
  },
)

Метод 2: собственный виджет ListItem
Другой подход — создать собственный виджет ListItem, включающий кнопку. Этот метод обеспечивает большую гибкость в настройке внешнего вида элемента списка и кнопки.

ListView.builder(
  itemCount: itemCount,
  itemBuilder: (context, index) {
    return CustomListItem(
      title: Text('Item $index'),
      onPressed: () {
        // Perform action when the button is pressed
      },
    );
  },
)
class CustomListItem extends StatelessWidget {
  final Widget title;
  final VoidCallback onPressed;
  CustomListItem({required this.title, required this.onPressed});
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(child: title),
        IconButton(
          icon: Icon(Icons.delete),
          onPressed: onPressed,
        ),
      ],
    );
  }
}

Метод 3: виджет InkWell
Виджет InkWell можно использовать для добавления поведения, напоминающего кнопку, к любому виджету во Flutter. Вы можете обернуть элемент списка виджетом InkWell и обрабатывать нажатие кнопки внутри его свойства onTap.

ListView.builder(
  itemCount: itemCount,
  itemBuilder: (context, index) {
    return InkWell(
      onTap: () {
        // Perform action when the button is pressed
      },
      child: ListTile(
        title: Text('Item $index'),
        trailing: Icon(Icons.delete),
      ),
    );
  },
)

Метод 4: виджет GestureDetector
Подобно InkWell, виджет GestureDetector также можно использовать для обнаружения жестов пользователя. Вы можете обернуть элемент списка GestureDetector и обрабатывать нажатие кнопки внутри его свойства onTap.

ListView.builder(
  itemCount: itemCount,
  itemBuilder: (context, index) {
    return GestureDetector(
      onTap: () {
        // Perform action when the button is pressed
      },
      child: ListTile(
        title: Text('Item $index'),
        trailing: Icon(Icons.delete),
      ),
    );
  },
)

Метод 5: FlatButton или RaishedButton
Если вы предпочитаете использовать виджет кнопки напрямую, вы можете заменить IconButton на FlatButton или RaishedButton внутри конечного свойства ListTile.

ListView.builder(
  itemCount: itemCount,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('Item $index'),
      trailing: FlatButton(
        child: Text('Delete'),
        onPressed: () {
          // Perform action when the button is pressed
        },
      ),
    );
  },
)

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