【2024年4月】弊社では、基本リモートワークで一緒に成長してくださるメンバーを広く募集させていただいております。 詳細はこちら

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

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

こんばんは〜
弊社ブログに辿り着いていただきありがとうございます!
株式会社メモリアインクのいちのです

この記事を読んでわかること

  • カードウィジェットの基本的な使用方法
  • カードウィジェットを用いた立体的な商品一覧リストの作成方法

開発環境

  • Dart 3.0.0
  • Flutter 3.10.0
目次

カードウィジェットの基本

概要

カードウィジェットは、関連する情報をグループ化し、視覚的に区別するために使用されます。以下のサンプルコードでは、基本的なカードウィジェットの構造と使用方法を紹介します。

サンプルコード

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

サンプルコードの解説

  • 1行目: Flutterのmaterialデザインライブラリをインポートします。
  • 3行目: アプリケーションのエントリーポイントを定義します。
  • 5-27行目: MyAppクラスは、アプリケーションのルートウィジェットを定義します。
  • 8行目: MaterialAppウィジェットを使用して、アプリケーションの基本設定を行います。
  • 9-24行目: Scaffoldウィジェットを使用して、アプリバーとボディの基本的なレイアウトを定義します。
  • 14-22行目: Cardウィジェットを使用して、カードの見た目を定義します。このカード内には、中央にテキストを配置します。

表示確認

いちの

それでは、表示を確認してみましょ〜

【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: 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('これは商品の説明です'),
              ),
            );
          },
        ),
      ),
    );
  }
}

サンプルコードの解説

  • 1行目: Flutterのmaterialデザインライブラリを再度インポートします。
  • 3行目: アプリケーションのメイン関数を定義します。
  • 5-30行目: MyAppクラスを定義し、アプリケーションのルートウィジェットを設定します。
  • 10行目: 商品一覧を表示するためのアプリバーのタイトルを設定します。
  • 13-26行目: ListView.builderを使用して、商品のリストを動的に生成します。
  • 16行目: Cardウィジェットのelevationプロパティを使用して、カードに影を付け、立体感を出します。
  • 18行目: カードの外側に余白を設定します。
  • 19-23行目: 各カードにListTileウィジェットを使用して、アイコン、商品名、商品説明を表示します。

表示確認

いちの

それでは、表示を確認してみましょ〜

【Flutter】カード(Card)ウィジェットを使用し、立体的な商品一覧リストを作成する

リスト(ListView)について、もう少し学びたいという読者様。以下の記事で分かりやすく丁寧に解説しておりますので、ぜひご一読いただけますと幸いです。

まとめ

いかがでしたでしょうか?今回は、カード(Card)ウィジェットの基本的な使用方法から立体的な商品一覧リストを作成する方法について、サンプルコードを用いて解説してみました。読者様の開発の手助けに少しでもなればいいなと思いこの記事を書かせていただいております。弊社ではAndroid、iOS、Flutterを使ったアプリ開発についてのブログを多数投稿させていただいておりますので、ご興味のある方はぜひ!

いちの

自分の成長を加速させるチャンスがどこかにあるかもしれません。
変化を恐れずに新たな環境に飛び込む勇気のある方は、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
をオススメします。

ListTileを使用した本格的な商品一覧画面にご興味のある読者様。以下の記事で分かりやすく丁寧に解説しておりますので、ぜひご一読いただけますと幸いです。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメント一覧 (1件)

コメントする

目次