【Flutter】カード(Card)ウィジェットの基本的な使用方法から立体的な商品一覧リストを作成するまでの完全ガイド！

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('カードウィジェットのデモ'),
        ),
        body: Center(
          child: Card(
            child: SizedBox(
              width: 300,
              height: 100,
              child: Center(
                child: Text('これはカード内のテキストです', style: TextStyle(fontSize: 20)),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('立体的な商品一覧リスト'),
        ),
        body: ListView.builder(
          itemCount: 10,
          itemBuilder: (context, index) {
            return Card(
              elevation: 4.0, // カードに影を付けることで立体感を出す
              margin: EdgeInsets.all(10.0),
              child: ListTile(
                leading: Icon(Icons.shopping_cart),
                title: Text('商品 ${index + 1}'),
                subtitle: Text('これは商品の説明です'),
              ),
            );
          },
        ),
      ),
    );
  }
}