ストア：商品一覧

CoddyのFlutterジャーニー「プロジェクト」セクションの一部。レッスン 19/36。

3つ目のアプリは小さなお店です。商品を並べたグリッド、それぞれの商品ページ、カート、そしてチェックアウトがあります。多くのショッピングアプリに共通する形で、Providerとintlを再び使います。

商品データはスターターに用意されており、それぞれに名前、価格、アイコン、色、説明があります。お店では商品をグリッドに表示し、スマートフォンでは1行に2つ並べます。

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にすると、各カードは幅より少し高さがあり、画像と2行のテキストを置く余裕ができます。

各カードは、それぞれProductCardという独自のウィジェットで、Productを受け取ります。中では、Expandedのタイルが名前の上のスペースを埋めます。その色は商品の色の最も明るい色合いであるproduct.color.shade50で、その上にアイコンを元の色で表示します。そのため、colorはMaterialColorです。色合いを持っているからです。

チャレンジ

中級

商品を表示します:

requiredなproductを受け取るProductCardウィジェットを作成します
Columnを含むCard（clipBehavior: Clip.antiAliasを設定）にします: 全幅のContainerをExpandedで配置し、背景色をproduct.color.shade50にして、中央に商品のアイコン（サイズ56、色はproduct.color）を表示します。その後、12ピクセルのパディングを付けてtitleMediumで商品名を表示します
Centerを、理論で学んだGridView.countに置き換えます

自分で試してみよう

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