스토어: 가격

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

45.5라는 가격은 $45.50로 표시하고, 1299는 $1,299.00로 표시해야 합니다. 이걸 일일이 작성하는 건 번거롭습니다. intl의 NumberFormat을 사용하면 모든 가격을 같은 방식으로 표시할 수 있습니다.

파일 맨 위에서 앱 전체에 사용할 포맷터를 하나 만들고, 가격이 표시되는 모든 곳에서 사용하세요.

import 'package:intl/intl.dart';

final money = NumberFormat.currency(locale: 'en_US', symbol: '\$');

money.format(1299); // $1,299.00

locale: 'en_US'는 숫자 표기 방식을 정합니다. 천 단위 사이에는 쉼표를, 센트 앞에는 마침표를 사용합니다. de_DE에서는 같은 가격이 1.299,00으로 표시됩니다. symbol은 앞에 표시할 기호입니다. Dart에서는 문자열 안의 $가 문자열 보간을 시작하므로 '\$'라고 작성해야 합니다.

각 이름 아래에 형식이 지정된 가격을 테마의 primary 색상으로 굵게 표시해 이름과 가격이 눈에 띄게 구분되도록 하세요.

챌린지

쉬움

가격 표시하기:

package:intl/intl.dart를 가져오고 위 이론에서 설명한 money 포매터를 MyApp 위에 추가하세요.
각 카드에서 이름 아래 4픽셀 간격을 두고 money.format(product.price)를 굵게 표시하고, 색상은 Theme.of(context).colorScheme.primary를 사용하세요.

직접 해보기

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: 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),
        ],
      ),
    );
  }
}

class ProductCard extends StatelessWidget {
  const ProductCard({super.key, required this.product});

  final Product product;

  @override
  Widget build(BuildContext context) {
    return Card(
      clipBehavior: Clip.antiAlias,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Expanded(
            child: Container(
              width: double.infinity,
              alignment: Alignment.center,
              color: product.color.shade50,
              child: Icon(product.icon, size: 56, color: product.color),
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(12),
            child: Text(
              product.name,
              style: Theme.of(context).textTheme.titleMedium,
            ),
          ),
        ],
      ),
    );
  }
}