Виджет Card в Flutter
Плоский ListTile
в ленте хорошо читается, но иногда строку
хочется визуально отделить от соседей.
Виджет
Card
рисует приподнятый прямоугольник с скруглением
и лёгкой тенью - типичный блок в Material.
Внутрь Card кладут одного потомка.
Для списка контактов или новостей
удобно оборачивать каждый ListTile
отдельной карточкой и добавлять отступы
между ними через Padding
или ListView с промежутками:
import 'package:flutter/material.dart';
void main() {
runApp(const MaterialApp(home: HomePage()));
}
class HomePage extends StatelessWidget {
const HomePage({super.key});
static const shops = [
('Bakery', '5 Lenin St'),
('Pharmacy', '12 Mira Ave'),
];
@override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
padding: const EdgeInsets.all(12),
children: [
for (final shop in shops)
Card(
child: ListTile(
leading: const Icon(Icons.store),
title: Text(shop.$1),
subtitle: Text(shop.$2),
),
),
],
),
);
}
}
Выведите в ListView две
Card. В первой ListTile
с заголовком 'Anna' и
подзаголовком 'Riga', во второй -
'Boris' и 'Minsk'. У списка
задайте padding: EdgeInsets.all(12).