【2024年10月】弊社では副業案件希望の方を募集しております。<例>土日稼働可等。 詳細はこちら

【Flutter】カード(Card)ウィジェットの押下処理の実装からリスト内商品をタップして商品詳細画面へ遷移するまでの完全ガイド!

【Flutter】カード(Card)ウィジェットの押下処理の実装からリスト内商品をタップして商品詳細画面へ遷移するまでの完全ガイド!
いちの

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

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

  • カード(Card)ウィジェットの押下処理の基本的な実装方法
  • 商品リストをカードで表示する方法
  • カードをタップして商品詳細画面へ遷移する処理の実装方法

開発環境

  • Dart 3.0.0
  • Flutter 3.10.0
目次

カード(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: CardWidget(),
      ),
    );
  }
}

class CardWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: InkWell(
        onTap: () {
          print('カードがタップされました!');
        },
        child: Card(
          child: Container(
            width: 300,
            height: 100,
            child: Center(
              child: Text('タップしてください'),
            ),
          ),
        ),
      ),
    );
  }
}

サンプルコードの解説

  • 4行目: アプリケーションのエントリポイントを定義します。
  • 7-19行目: MyApp クラスでアプリケーションの基本的な構造を定義します。Scaffold ウィジェット内に AppBarCardWidget を配置しています。
  • 21-41行目: CardWidget クラスでは、Center ウィジェットを使って中央に配置された Card を表示します。InkWell ウィジェットを使うことで、カードにタップ処理を追加しています。
  • 26行目: onTap メソッドでカードがタップされた時のアクションを定義しています。ここでは、コンソールにログを出力します。
  • 29-37行目: Card ウィジェット内にテキストを表示するための Container を配置しています。この Container はカードのサイズを定義し、中央にテキストを配置しています。

表示確認

いちの

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

【Flutter】カード(Card)ウィジェットの押下処理の実装

Containerのカスタマイズ方法にご興味のある読者様。以下の記事で分かりやすく丁寧に解説しておりますので、ぜひご一読いただけますと幸いです。

商品リストのカード表示

概要

リスト内の商品をカード形式で表示する方法について解説します。ここでは、ListView.builder を使用して、リスト内の各商品に対してカードを動的に生成します。

サンプルコード

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

class ProductList extends StatelessWidget {
  final List<String> products = ['商品1', '商品2', '商品3', '商品4'];

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: products.length,
      itemBuilder: (context, index) {
        return Card(
          child: ListTile(
            title: Text(products[index]),
            onTap: () {
              print('${products[index]}がタップされました');
            },
          ),
        );
      },
    );
  }
}

サンプルコードの解説

  • 21行目: ProductList クラスで商品リストを定義しています。
  • 22行目: 商品データを格納するリスト products を定義しています。
  • 26-38行目: ListView.builder を使用して、リスト内の各商品に対してカードを動的に生成します。itemCount には products リストの長さを指定し、itemBuilder で各商品の表示方法を定義します。
  • 29-36行目: 各商品を表示するための Card ウィジェットを生成します。ListTile を使用して商品名を表示し、onTap イベントでタップ時の処理を定義しています。

表示確認

いちの

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

【Flutter】商品リストのカード(Card)表示

商品詳細画面への遷移

概要

カードをタップした際に、商品の詳細画面へ遷移する方法について解説します。Flutterでは、Navigator ウィジェットを使用して画面遷移を管理します。

サンプルコード

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

class ProductList extends StatelessWidget {
  final List<String> products = ['商品1', '商品2', '商品3', '商品4'];

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: products.length,
      itemBuilder: (context, index) {
        return Card(
          child: ListTile(
            title: Text(products[index]),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => ProductDetail(products[index])),
              );
            },
          ),
        );
      },
    );
  }
}

class ProductDetail extends StatelessWidget {
  final String product;

  ProductDetail(this.product);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(product),
      ),
      body: Center(
        child: Text('こちらは$productの詳細ページです'),
      ),
    );
  }
}

サンプルコードの解説

  • 45-61行目: ProductDetail クラスでは、商品の詳細画面を定義しています。コンストラクタで商品名を受け取り、アプリバーのタイトルとして表示します。
  • 30-38行目: 商品リストの各 ListTile がタップされたときに Navigator.push メソッドを使用して、商品詳細画面へ遷移します。MaterialPageRoute を用いて遷移先のウィジェットを指定しています。

動作確認

いちの

それでは、動作を確認してみましょ〜

【Flutter】リスト内商品をタップして商品詳細画面へ遷移する

リスト内の要素の追加や削除についてご興味のある読者様。以下の記事で分かりやすく丁寧に解説しておりますので、ぜひご一読いただけますと幸いです。

まとめ

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

いちの

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

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

この記事を書いた人

コメント

コメント一覧 (2件)

コメントする

目次