ストア：商品詳細

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

店舗で商品をタップすると、その商品のページが表示されます。大きな画像、価格、商品についての短い説明が載っています。これは2つ目の画面、ProductScreenで、コンストラクターを通じて商品を受け取ります。

カード全体をタップ可能にするには、Cardの中で、コンテンツを囲むようにInkWellを配置します。onTapを実行し、Materialアプリで見られる波紋を描画します。カードのClip.antiAliasによって、波紋が角丸の内側に収まります。

Card(
  clipBehavior: Clip.antiAlias,
  child: InkWell(
    onTap: () {
      Navigator.push(context, MaterialPageRoute(
        builder: (context) => ProductScreen(product: product),
      ));
    },
    child: Column(...),
  ),
)

商品ページはListViewなので、長い説明をスクロールできます。AppBarには商品の名前と戻る矢印が表示されます。Flutterは、画面遷移で表示された画面にこの矢印を追加してくれます。

大きな価格を表示するには、テーマのheadlineSmallを基準にし、copyWithを使って必要な部分だけ変更します。textTheme.headlineSmall?.copyWith(fontWeight: FontWeight.bold)です。テーマのスタイルがnullの場合があるため、?.を使っています。

チャレンジ

中級

各商品にページを用意しましょう：

requiredなproductを受け取るProductScreenを作成し、そのAppBarに商品名を表示します
本文は、パディングが24ピクセルのListViewにします。product.color.shade50を使った高さ240ピクセルのタイルを配置し、角を24ピクセルの丸みにして、アイコンのサイズを120にします。続いて24ピクセルの余白、価格（プライマリカラーの太字のheadlineSmall）、12ピクセルの余白、そしてbodyLargeの説明を配置します
各カードのColumnをInkWellで包み、商品ページへ遷移するようにします

自分で試してみよう

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

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

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

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: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  product.name,
                  style: Theme.of(context).textTheme.titleMedium,
                ),
                const SizedBox(height: 4),
                Text(
                  money.format(product.price),
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    color: Theme.of(context).colorScheme.primary,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}