스토어: 상품 그리드

Coddy Flutter 여정의 프로젝트 섹션에 포함된 레슨. 36개 중 19번째.

세 번째 앱은 작은 상점입니다. 상품 그리드, 각 상품의 페이지, 장바구니와 결제 기능이 있습니다. 대부분의 쇼핑 앱이 갖춘 형태이며, Provider와 intl을 다시 사용합니다.

상품은 시작 프로젝트에 들어 있으며, 각 상품에는 이름, 가격, 아이콘, 색상, 설명이 있습니다. 상점에서는 상품을 그리드로 표시하며, 휴대폰에서는 한 행에 두 개씩 배치합니다.

GridView.count(
  crossAxisCount: 2,
  padding: const EdgeInsets.all(16),
  mainAxisSpacing: 12,
  crossAxisSpacing: 12,
  childAspectRatio: 0.8,
  children: [for (Product product in products) ProductCard(product: product)],
)

childAspectRatio는 너비를 높이로 나눈 값입니다. 0.8이면 각 카드가 너비보다 조금 더 높아져 그림과 두 줄의 텍스트를 넣을 공간이 생깁니다.

각 카드는 ProductCard라는 독립적인 위젯이며, Product를 전달받습니다. 내부에서는 Expanded 타일이 상품 이름 위의 공간을 채웁니다. 타일 색상은 상품 색상의 가장 연한 음영인 product.color.shade50이며, 그 위에는 원래 색상의 아이콘이 표시됩니다. 그래서 color는 MaterialColor입니다. 여러 음영을 포함하기 때문입니다.

챌린지

중급

제품을 표시하세요:

required product를 받는 ProductCard 위젯을 작성하세요
Column을 담는 Card(clipBehavior: Clip.antiAlias 포함)입니다. product.color.shade50 색상의 전체 너비 Container를 Expanded로 감싸고, 가운데에 제품 아이콘(size 56, product.color)을 배치한 다음, 12픽셀 패딩을 적용해 titleMedium으로 이름을 표시하세요
<이론에서 배운 GridView.count로 Center를 바꾸세요

직접 해보기

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.orange),
      ),
      home: const ShopScreen(),
    );
  }
}

class Product {
  const Product({
    required this.name,
    required this.price,
    required this.icon,
    required this.color,
    required this.description,
  });

  final String name;
  final double price;
  final IconData icon;
  final MaterialColor color;
  final String description;
}

const List<Product> products = [
  Product(
    name: 'Headphones',
    price: 59,
    icon: Icons.headphones,
    color: Colors.indigo,
    description: 'Wireless headphones with 30 hours of battery.',
  ),
  Product(
    name: 'Watch',
    price: 129,
    icon: Icons.watch,
    color: Colors.teal,
    description: 'A smart watch that counts your steps.',
  ),
  Product(
    name: 'Backpack',
    price: 45.5,
    icon: Icons.backpack,
    color: Colors.orange,
    description: 'Room for a laptop, a lunch and a jacket.',
  ),
  Product(
    name: 'Mug',
    price: 12,
    icon: Icons.coffee,
    color: Colors.brown,
    description: 'Holds a big coffee and keeps it warm.',
  ),
  Product(
    name: 'Camera',
    price: 1299,
    icon: Icons.photo_camera,
    color: Colors.blueGrey,
    description: 'A mirrorless camera for sharp photos.',
  ),
  Product(
    name: 'Sneakers',
    price: 89.99,
    icon: Icons.directions_run,
    color: Colors.red,
    description: 'Light running shoes for every day.',
  ),
];

class ShopScreen extends StatelessWidget {
  const ShopScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Coddy Shop')),
      body: const Center(
        child: Text('Products go here'),
      ),
    );
  }
}