
こんばんは〜
弊社ブログに辿り着いていただきありがとうございます!
株式会社メモリアインクのいちのです
この記事を読んでわかること
- ListTileの基本的な使い方
- Cardウィジェットを使ったUIの構築方法
- ListTileとCardを組み合わせた商品一覧画面の作成手順
開発環境
- Dart 3.0.0
- Flutter 3.10.0
ListTileの基本実装
概要
ListTileは、Flutterでリストアイテムを簡単に表示するためのウィジェットです。タイトル、サブタイトル、アイコンなどを組み合わせてリッチなリストアイテムを作成できます。
サンプルコード
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('ListTileの基本実装'),
),
body: ListView(
children: <Widget>[
ListTile(
leading: Icon(Icons.map), // 1行目: アイコン設定
title: Text('タイトル'), // 2行目: タイトルテキスト
subtitle: Text('サブタイトル'), // 3行目: サブタイトルテキスト
trailing: Icon(Icons.navigate_next), // 4行目: 末尾のアイコン
onTap: () {
// 5行目: タップしたときの動作
print('ListTileタップ!');
},
),
],
),
),
);
}
}
サンプルコードの解説
- 16行目:
leading
プロパティにIcon
ウィジェットを設定しています。これはリストアイテムの先頭に表示されるアイコンです。 - 17行目:
title
プロパティにテキストを設定しています。これがリストアイテムの主要なテキストになります。 - 18行目:
subtitle
プロパティにサブタイトルとしてのテキストを設定しています。 - 19行目:
trailing
プロパティにIcon
ウィジェットを設定しています。これはリストアイテムの末尾に表示されるアイコンです。 - 20-23行目:
onTap
プロパティにタップ時の動作を定義しています。ここではコンソールに文字列を出力するシンプルな動作をしています。
表示確認



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


ListTileとCardを使った商品一覧画面の作成
概要
ListTileをCardウィジェットと組み合わせることで、美しい商品一覧画面を作成することができます。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, // 1行目: 商品の数を指定
itemBuilder: (context, index) {
return Card( // 2行目: Cardウィジェットを使用
child: ListTile(
leading: Icon(Icons.image), // 3行目: 商品画像を想定したアイコン
title: Text('商品名 $index'), // 4行目: 商品名
subtitle: Text('商品説明 $index'), // 5行目: 商品説明
trailing: Icon(Icons.shopping_cart), // 6行目: ショッピングカートアイコン
),
);
},
),
),
);
}
}
サンプルコードの解説
- 14行目:
itemCount
プロパティで、リストに表示するアイテムの数を指定しています。 - 16-23行目:
Card
ウィジェットを使用して、各リストアイテムをカードの形で表示しています。 - 18行目: 各商品の画像を表すために、
leading
にアイコンを設定しています。 - 19行目:
title
プロパティに商品名を設定しています。ここではインデックスを使用して動的に商品名を生成しています。 - 20行目:
subtitle
プロパティに商品の説明を設定しています。これも動的に生成しています。 - 21行目:
trailing
にショッピングカートのアイコンを設定して、購入するためのアクションを示唆しています。
表示確認



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


カード(Card)ウィジェットの押下処理にご興味のある読者様。以下の記事で分かりやすく丁寧に解説しておりますので、ぜひご一読いただけますと幸いです。


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



自分の成長を加速させるチャンスがどこかにあるかもしれません。
変化を恐れずに新たな環境に飛び込む勇気のある方は、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
コメント
コメント一覧 (2件)
[…] 【Flutter】ListTileの基本実装と商品一覧画面作成までの完全ガイド! […]
[…] 【Flutter】ListTileの基本実装と商品一覧画面作成までの完全ガイド! […]