Создаем портфолио за 1 месяц
К концу месяца: 4 классных проекта в вашем портфолио! Стоимость: 100$. Подробности...
495 of 1024 menu
◀ ▶

Виджет Card

Виджет Card оборачивает блок в скруглённый лист с тенью. Содержимое передают в child, отступы внутри задают через margin снаружи и padding у child, цвет - в color, высоту тени - в elevation. Внутри Card обычно ставят Column или ListTile.

Синтаксис

Card( elevation: 4, child: Padding( padding: EdgeInsets.all(16), child: Text('abcde'), ), )

Параметры

Параметр Описание
child Виджет внутри карточки.
color Цвет поверхности карточки.
elevation Высота тени под карточкой.
margin Отступ карточки от соседей.

Пример

Давайте покажем одну карточку по центру экрана:

import 'package:flutter/material.dart'; void main() { runApp( MaterialApp( home: Scaffold( body: Center( child: Card( child: Padding( padding: EdgeInsets.all(24), child: Text('abcde'), ), ), ), ), ), ); }

На экране белая карточка с тенью и текстом 'abcde'.

Пример

Давайте выведем список карточек:

import 'package:flutter/material.dart'; void main() { runApp( MaterialApp( home: Scaffold( body: ListView( padding: EdgeInsets.all(16), children: [ Card(child: ListTile(title: Text('12345'))), Card(child: ListTile(title: Text('abcde'))), ], ), ), ), ); }

Две карточки с ListTile прокручиваются вертикально.

Смотрите также

  • виджет Material,
    из которого Card строит подложку
  • виджет ListTile,
    который часто кладут внутрь Card
  • виджет GridTile,
    который оформляет ячейку сетки
  • виджет Padding,
    которым задают отступы внутри child
← →
↑
Мы используем cookie для работы сайта, аналитики и персонализации. Обработка данных происходит согласно Политике конфиденциальности.
принять все настроить отклонить