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

Метод 1: использование ListView.builder
Один из способов добавления карточек — использование ListView.builder. Этот метод подходит, если у вас есть динамический список элементов для отображения. Вот пример:

ListView.builder(
  itemCount: cardList.length,
  itemBuilder: (context, index) {
    return Card(
      child: ListTile(
        title: Text(cardList[index].title),
        subtitle: Text(cardList[index].subtitle),
      ),
    );
  },
)

Метод 2: использование GridView.builder
Если вы хотите отображать карточки в виде сетки, вы можете использовать GridView.builder. Вот пример:

GridView.builder(
  gridDelegate:
      SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
  itemCount: cardList.length,
  itemBuilder: (context, index) {
    return Card(
      child: GridTile(
        child: ListTile(
          title: Text(cardList[index].title),
          subtitle: Text(cardList[index].subtitle),
        ),
      ),
    );
  },
)

Метод 3: использование столбца или строки
Для более простых макетов вы можете добавлять карточки непосредственно в виджет «Столбец» или «Строка». Вот пример:

Column(
  children: cardList.map((card) {
    return Card(
      child: ListTile(
        title: Text(card.title),
        subtitle: Text(card.subtitle),
      ),
    );
  }).toList(),
)

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

class CustomCard extends StatelessWidget {
  final String title;
  final String subtitle;
  const CustomCard({required this.title, required this.subtitle});
  @override
  Widget build(BuildContext context) {
    return Card(
      child: ListTile(
        title: Text(title),
        subtitle: Text(subtitle),
      ),
    );
  }
}
// Usage
CustomCard(
  title: 'Card Title',
  subtitle: 'Card Subtitle',
)

Добавить карточки во Flutter очень просто с помощью виджета «Карточка». В этой статье мы рассмотрели различные методы, в том числе использование ListView.builder, GridView.builder, Column или Row, а также создание собственного виджета. Выберите метод, который лучше всего соответствует потребностям дизайна вашего приложения, и улучшите пользовательский интерфейс с помощью визуально привлекательных карточек.