【検索機能】TextFieldに入力した文字で作品をリアルタイム検索する | NETFLIX風動画アプリを作りながらUI・検索・動画再生・共有機能を学ぶFlutter（iOS・Android）アプリ開発 | Flutterアプリケーション開発概論

この節で学ぶこと

前の節では、sharePositionOrigin を指定して、iOSの共有画面で起きやすい PlatformException を防ぐ方法を学びました。

今回の節では、Search 画面を作ります。

TextField に文字を入力すると、その文字に合う作品だけがリアルタイムで表示される検索機能です。

Search画面を開く
↓
TextFieldに文字を入力する
↓
入力された文字をstateで管理する
↓
作品リストを絞り込む
↓
検索結果だけを表示する

たとえば、検索欄に squid と入力すると、タイトルや説明文、カテゴリなどに squid が含まれる作品だけが表示されます。

検索機能が入ると、アプリが一気に「見るだけの画面」から「探せるアプリ」になります。

今回作るSearch画面の完成イメージ

今回のSearch画面は、次のような構成です。

┌────────────────────┐
│ Search             │
│ ┌────────────────┐ │
│ │ Search title... │ │
│ └────────────────┘ │
│                    │
│ 検索結果             │
│ ┌────────────────┐ │
│ │ 画像  作品名      │ │
│ │      説明文       │ │
│ └────────────────┘ │
│ ┌────────────────┐ │
│ │ 画像  作品名      │ │
│ │      説明文       │ │
│ └────────────────┘ │
└────────────────────┘

上部に検索入力欄を置き、その下に検索結果を表示します。

入力が空のときは、作品一覧を表示してもよいですし、「検索してください」という案内を表示してもよいです。

今回の教材では、入力が空のときは作品一覧を表示し、文字を入力したらリアルタイムで絞り込む形にします。

今回見るコード

Search画面は、SearchPage という StatefulWidget で作ります。

class SearchPage extends StatefulWidget {
  const SearchPage({super.key});

  @override
  State<SearchPage> createState() => _SearchPageState();
}

検索欄に入力した文字によって画面が変わるので、StatefulWidget を使います。

入力文字が変わる
↓
検索結果が変わる
↓
画面を更新する必要がある
↓
StatefulWidgetを使う

部分	役割
`query`	入力された検索文字を保存する
`filteredMovies`	検索文字に合う作品だけを返す
`TextField`	検索文字を入力する
`ListView.separated`	検索結果を一覧表示する

TextFieldとは？

TextField は、ユーザーが文字を入力するためのWidgetです。

TextField(
  onChanged: (value) {
    setState(() {
      query = value;
    });
  },
)

アプリの検索欄、ログイン画面のメールアドレス入力、メモアプリの本文入力など、文字を入力する場面でよく使います。

今回のSearch画面では、検索キーワードを入力するために使っています。

setStateで検索結果を更新する

入力文字が変わったら、setState の中で query を更新します。

setState(() {
  query = value;
});

setState を使う理由は、画面を再描画するためです。

TextFieldに文字を入力する
↓
queryが変わる
↓
setStateで画面更新を知らせる
↓
filteredMoviesが再計算される
↓
検索結果が変わる

もし setState を使わずに query = value; とだけ書くと、内部の値は変わっても画面が更新されないことがあります。

TextFieldの文字色を設定する

検索欄に入力する文字の見た目は、style で設定しています。

style: const TextStyle(
  color: NetflixColors.white,
  fontSize: 16,
  fontWeight: FontWeight.w600,
),

黒背景のアプリなので、入力文字は白にしています。

color: NetflixColors.white,

文字サイズは 16、少し太めにしています。

fontSize: 16,
fontWeight: FontWeight.w600,

cursorColorでカーソルの色を変える

入力欄のカーソル色は、cursorColor で指定しています。

cursorColor: NetflixColors.red,

カーソルとは、入力中の位置を示す縦線です。

Search titles|

ここでは、アプリのアクセントカラーである赤にしています。

小さな部分ですが、こうした色を統一すると、アプリ全体の雰囲気が整います。

decorationで検索欄の見た目を作る

TextField の見た目は、decoration で作っています。

decoration: InputDecoration(
  hintText: 'Search titles, genres, stories...',
  hintStyle: TextStyle(
    color: NetflixColors.white.withValues(alpha: 0.45),
  ),
  prefixIcon: const Icon(
    Icons.search,
    color: NetflixColors.white,
  ),
  filled: true,
  fillColor: NetflixColors.darkGray,
  border: OutlineInputBorder(
    borderRadius: BorderRadius.circular(8),
    borderSide: BorderSide.none,
  ),
),

InputDecoration を使うと、ヒント文字、アイコン、背景色、枠線などをまとめて設定できます。

hintStyleでヒント文字を薄くする

ヒント文字の見た目は、hintStyle で指定しています。

hintStyle: TextStyle(
  color: NetflixColors.white.withValues(alpha: 0.45),
),

白をそのまま使うと、入力済みの文字と同じ強さになってしまいます。

そこで、透明度を下げています。

withValues(alpha: 0.45)

これにより、ヒント文字が少し薄く表示されます。

入力文字：はっきり白
ヒント文字：薄い白

prefixIconで検索アイコンを表示する

検索欄の左側には、虫眼鏡アイコンを置いています。

prefixIcon: const Icon(
  Icons.search,
  color: NetflixColors.white,
),

prefixIcon は、入力欄の先頭にアイコンを表示するための指定です。

検索欄に虫眼鏡アイコンがあると、ユーザーはすぐに「ここは検索欄だ」と分かります。

🔍 Search titles, genres, stories...

filledとfillColorで背景色をつける

検索欄には、背景色をつけています。

filled: true,
fillColor: NetflixColors.darkGray,

filled: true にすると、入力欄の背景を塗れるようになります。

fillColor で、その色を指定します。

fillColor: NetflixColors.darkGray,

黒背景の中に、少し明るいグレーの検索欄を置くことで、入力欄が分かりやすくなります。

filteredMoviesとは？

検索結果を作っているのが、filteredMovies です。

List<MovieItem> get filteredMovies {
  final keyword = query.trim().toLowerCase();

  if (keyword.isEmpty) {
    return movies;
  }

  return movies.where((movie) {
    final title = movie.title.toLowerCase();
    final subtitle = movie.subtitle.toLowerCase();
    final description = movie.description.toLowerCase();
    final category = movie.category.toLowerCase();

    return title.contains(keyword) ||
        subtitle.contains(keyword) ||
        description.contains(keyword) ||
        category.contains(keyword);
  }).toList();
}

これは、query に合う作品だけを返す処理です。

get を使っているので、filteredMovies と書くだけで、現在の検索文字に合わせた結果を取得できます。

getとは？

filteredMovies は、普通の変数ではなく、getterです。

List<MovieItem> get filteredMovies {
  ...
}

getterは、見た目は変数のように使えますが、中では処理を実行できます。

たとえば、次のように書けます。

filteredMovies.length

しかし実際には、query をもとに作品リストを絞り込む処理が動いています。

filteredMovies と書く
↓
中の処理が実行される
↓
検索結果のListが返る

toLowerCaseで大文字小文字をそろえる

次に、toLowerCase() で小文字に変換しています。

query.trim().toLowerCase()

たとえば、ユーザーが SQUID と入力した場合でも、

'SQUID'

小文字に変換すると、

'squid'

になります。

作品タイトル側も小文字に変換して比較することで、大文字小文字を気にせず検索できます。

入力が空なら全作品を返す

検索文字が空の場合は、全作品を返しています。

if (keyword.isEmpty) {
  return movies;
}

つまり、Search画面を開いた直後は、すべての作品が表示されます。

検索欄が空
↓
全作品を表示

この方が、何も入力していない状態でも画面が寂しくなりません。

別の設計として、「検索してください」という案内だけを表示する方法もありますが、今回のアプリでは一覧表示にしています。

whereで条件に合う作品だけを取り出す

検索文字が空でない場合は、where を使って作品を絞り込みます。

return movies.where((movie) {
  ...
}).toList();

where は、条件に合うものだけを取り出すためのメソッドです。

moviesの中から
↓
条件に合う作品だけを残す
↓
Listにする

たとえば、squid というキーワードが入っている作品だけを残すイメージです。

検索対象を小文字にする

where の中では、作品側の情報も小文字にしています。

final title = movie.title.toLowerCase();
final subtitle = movie.subtitle.toLowerCase();
final description = movie.description.toLowerCase();
final category = movie.category.toLowerCase();

検索キーワードも小文字にしているので、作品側も小文字にして比較します。

検索キーワード：squid
作品タイトル：Squid Game → squid game
↓
大文字小文字を気にせず比較できる

これにより、Squid、SQUID、squid のどれで検索しても見つかります。

|| は「または」

検索条件の中には、|| が出てきます。

title.contains(keyword) ||
subtitle.contains(keyword) ||
description.contains(keyword) ||
category.contains(keyword)

|| は「または」という意味です。

つまり、次のどれか1つでも当てはまれば検索結果に表示します。

タイトルに含まれる
または
サブタイトルに含まれる
または
説明文に含まれる
または
カテゴリに含まれる

これにより、タイトルだけでなく、作品説明やカテゴリからも検索できるようになります。

ここまでのまとめ

ここまでで、Search画面の入力欄と検索ロジックを確認しました。

大切なポイントは次の通りです。

検索画面は、入力によって表示が変わるので StatefulWidget にする。
入力文字は String query = ''; で管理する。
TextField は、ユーザーが文字を入力するためのWidget。
onChanged は、入力文字が変わるたびに呼ばれる。
setState の中で query = value; と書くと、検索結果をリアルタイムで更新できる。
InputDecoration を使うと、検索欄のヒント文字、アイコン、背景色、枠線を設定できる。
filteredMovies は、現在の query に合う作品だけを返すgetter。
trim() で前後の空白を消せる。
toLowerCase() で大文字小文字をそろえられる。
where を使うと、条件に合う作品だけを取り出せる。
contains を使うと、文字列の中に検索文字が含まれているか調べられる。
|| を使うと、タイトル・サブタイトル・説明文・カテゴリのどれかに一致した作品を表示できる。

検索結果を画面に表示する

ここからは、filteredMovies で絞り込んだ作品を、画面に表示する部分を見ていきます。

検索結果の表示には、Expanded と ListView.separated を使っています。

Expanded(
  child: filteredMovies.isEmpty
      ? const EmptySearchResult()
      : ListView.separated(
          itemCount: filteredMovies.length,
          separatorBuilder: (context, index) {
            return const SizedBox(height: 12);
          },
          itemBuilder: (context, index) {
            final movie = filteredMovies[index];

            return SearchResultTile(movie: movie);
          },
        ),
),

この部分では、検索結果がある場合と、検索結果がない場合で表示を切り替えています。

検索結果がある
↓
ListViewで作品一覧を表示

検索結果がない
↓
EmptySearchResultを表示

Expandedで残りの高さを使う

検索結果エリアは、Expanded で包まれています。

Expanded(
  child: ...
),

Search画面は、上から順番に次のような構成になっています。

Searchタイトル
↓
検索欄
↓
検索結果一覧

タイトルと検索欄の高さは、ある程度決まっています。

その下の残りのスペースを、検索結果一覧に使いたいので、Expanded を使っています。

画面の残り高さ
↓
検索結果一覧に使う

Column の中で、下の一覧部分を広げたいときに Expanded はよく使います。

filteredMovies.isEmptyで結果があるか確認する

検索結果が空かどうかは、次のコードで確認しています。

filteredMovies.isEmpty

isEmpty は、リストが空かどうかを調べるプロパティです。

状態	`filteredMovies.isEmpty`
検索結果が0件	`true`
検索結果が1件以上	`false`

この結果を使って、表示内容を切り替えています。

filteredMovies.isEmpty
    ? const EmptySearchResult()
    : ListView.separated(...)

これは三項演算子です。

意味は次の通りです。

検索結果が空なら EmptySearchResult を表示する
そうでなければ ListView.separated を表示する

Centerで中央に表示する

EmptySearchResult の中では、Center を使っています。

return Center(
  child: Text(
    'No titles found.',
    ...
  ),
);

Center は、子Widgetを中央に配置するWidgetです。

検索結果がないときのメッセージは、画面の中央に出した方が分かりやすくなります。

画面中央
↓
No titles found.

itemBuilderで検索結果を作る

実際に検索結果の1件分を作っているのが、itemBuilder です。

itemBuilder: (context, index) {
  final movie = filteredMovies[index];

  return SearchResultTile(movie: movie);
},

index は、何番目の検索結果を作るかを表します。

index = 0 → 1件目
index = 1 → 2件目
index = 2 → 3件目

その番号を使って、filteredMovies から作品を取り出します。

final movie = filteredMovies[index];

そして、その作品を SearchResultTile に渡します。

SearchResultTile(movie: movie)

SearchResultTileのコード

SearchResultTile は、次のようなコードです。

class SearchResultTile extends StatelessWidget {
  const SearchResultTile({
    super.key,
    required this.movie,
  });

  final MovieItem movie;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        Navigator.of(context).push(
          MaterialPageRoute<void>(
            builder: (context) => MovieDetailPage(movie: movie),
          ),
        );
      },
      child: Container(
        decoration: BoxDecoration(
          color: NetflixColors.darkGray,
          borderRadius: BorderRadius.circular(10),
        ),
        padding: const EdgeInsets.all(10),
        child: Row(
          children: [
            ClipRRect(
              borderRadius: BorderRadius.circular(6),
              child: Image.network(
                movie.posterUrl,
                width: 78,
                height: 112,
                fit: BoxFit.cover,
              ),
            ),
            const SizedBox(width: 13),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    movie.title,
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: const TextStyle(
                      color: NetflixColors.white,
                      fontSize: 16,
                      fontWeight: FontWeight.w900,
                    ),
                  ),
                  const SizedBox(height: 5),
                  Text(
                    '${movie.matchRate}% Match • ${movie.year} • ${movie.rating}',
                    style: TextStyle(
                      color: NetflixColors.white.withValues(alpha: 0.72),
                      fontSize: 12,
                      fontWeight: FontWeight.w700,
                    ),
                  ),
                  const SizedBox(height: 8),
                  Text(
                    movie.description,
                    maxLines: 3,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                      color: NetflixColors.white.withValues(alpha: 0.62),
                      fontSize: 12.5,
                      height: 1.35,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

このWidgetは、検索結果カードを押すと詳細画面に移動できるようになっています。

GestureDetectorでカード全体をタップできるようにする

SearchResultTile は、GestureDetector で包まれています。

return GestureDetector(
  onTap: () {
    Navigator.of(context).push(
      MaterialPageRoute<void>(
        builder: (context) => MovieDetailPage(movie: movie),
      ),
    );
  },
  child: Container(
    ...
  ),
);

これにより、検索結果カード全体をタップできます。

検索結果カードをタップ
↓
MovieDetailPageへ移動

検索結果から作品詳細に移動できると、アプリとして自然な導線になります。

Rowで画像とテキストを横に並べる

カードの中では、Row を使っています。

child: Row(
  children: [
    ClipRRect(
      ...
    ),
    const SizedBox(width: 13),
    Expanded(
      child: Column(
        ...
      ),
    ),
  ],
),

左にポスター画像、右に作品情報を並べています。

画像  タイトル
      メタ情報
      説明文

検索結果では、一覧性が大切です。

ポスター画像と文字情報を横に並べると、作品をすばやく確認できます。

Image.networkでポスター画像を表示する

ポスター画像は、Image.network で表示しています。

Image.network(
  movie.posterUrl,
  width: 78,
  height: 112,
  fit: BoxFit.cover,
)

movie.posterUrl には、作品ごとのポスター画像URLが入っています。

movie.posterUrl

幅は78、高さは112にしています。

width: 78,
height: 112,

検索結果では、画像が大きすぎるとリストが見にくくなるので、ほどよいサイズにしています。

Expandedで文字エリアを広げる

右側の文字部分は、Expanded で包まれています。

Expanded(
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      ...
    ],
  ),
),

Expanded を使うことで、画像の右側に残った横幅を文字エリアとして使えます。

左：画像の固定幅
右：残りの横幅を使う文字エリア

検索結果のタイトルや説明文は長くなることがあるため、横幅をできるだけ使えるようにしています。

検索画面の流れを整理する

ここまでの流れを整理すると、次のようになります。

TextFieldに文字を入力
↓
onChangedが呼ばれる
↓
setStateでqueryを更新
↓
filteredMoviesが再計算される
↓
検索結果が0件か確認
↓
0件ならEmptySearchResult
↓
1件以上ならListView.separated
↓
SearchResultTileで1件ずつ表示
↓
カードをタップするとMovieDetailPageへ移動

検索機能は、入力欄だけでは完成しません。

入力された文字を状態として持ち、その状態をもとにリストを作り直し、画面に表示することで完成します。

Q. 空白を入れると検索できません。

trim() を使って、前後の空白を消しているか確認してください。

final keyword = query.trim().toLowerCase();

これにより、' squid ' のような入力でも、'squid' として検索できます。

チャレンジ1：検索対象にseasonLabelを追加しよう

次のコードに、

final title = movie.title.toLowerCase();
final subtitle = movie.subtitle.toLowerCase();
final description = movie.description.toLowerCase();
final category = movie.category.toLowerCase();

次の1行を追加します。

final seasonLabel = movie.seasonLabel.toLowerCase();

そして、検索条件に次を追加します。

seasonLabel.contains(keyword)

この節のまとめ

この節では、TextField に入力した文字で作品をリアルタイム検索する方法を学びました。

大切なポイントは次の通りです。

検索画面は、入力文字によって表示が変わるため StatefulWidget にする。
query に、現在の検索文字を保存する。
TextField は、ユーザーが文字を入力するためのWidget。
onChanged は、入力文字が変わるたびに呼ばれる。
setState で query を更新すると、画面が再描画される。
filteredMovies で、検索条件に合う作品だけを返す。
trim() を使うと、前後の空白を削除できる。
toLowerCase() を使うと、大文字小文字をそろえられる。
where を使うと、条件に合うデータだけを取り出せる。
contains を使うと、文字列に検索キーワードが含まれるか確認できる。
|| を使うと、タイトル・サブタイトル・説明文・カテゴリのどれかに一致した作品を表示できる。
ListView.separated を使うと、検索結果を余白つきで一覧表示できる。
EmptySearchResult を用意すると、検索結果が0件のときも分かりやすい。
SearchResultTile を作ると、検索結果1件分の表示を部品化できる。
検索結果カードをタップすると、MovieDetailPage(movie: movie) に移動できる。

次のステップ

次の節では、My Netflix画面を作ります。

プロフィール画像、通知、ダウンロード、My Listなどをまとめて表示し、アカウント画面らしいUIを作っていきます。

BottomNavigationの最後のタブとして、アプリ全体の完成度を高める画面になります。

┌────────────────────┐ │ Search │ │ ┌────────────────┐ │ │ │ Search title... │ │ │ └────────────────┘ │ │ │ │ 検索結果 │ │ ┌────────────────┐ │ │ │ 画像作品名 │ │ │ │ 説明文 │ │ │ └────────────────┘ │ │ ┌────────────────┐ │ │ │ 画像作品名 │ │ │ │ 説明文 │ │ │ └────────────────┘ │ └────────────────────┘

class SearchPage extends StatefulWidget { const SearchPage({super.key}); @override State<SearchPage> createState() => _SearchPageState(); } class _SearchPageState extends State<SearchPage> { String query = ''; List<MovieItem> get filteredMovies { final keyword = query.trim().toLowerCase(); if (keyword.isEmpty) { return movies; } return movies.where((movie) { final title = movie.title.toLowerCase(); final subtitle = movie.subtitle.toLowerCase(); final description = movie.description.toLowerCase(); final category = movie.category.toLowerCase(); return title.contains(keyword) || subtitle.contains(keyword) || description.contains(keyword) || category.contains(keyword); }).toList(); } @override Widget build(BuildContext context) { return Scaffold( backgroundColor: NetflixColors.black, body: SafeArea( child: Padding( padding: const EdgeInsets.fromLTRB(18, 18, 18, 0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ const Text( 'Search', style: TextStyle( color: NetflixColors.white, fontSize: 30, fontWeight: FontWeight.w900, ), ), const SizedBox(height: 18), TextField( onChanged: (value) { setState(() { query = value; }); }, style: const TextStyle( color: NetflixColors.white, fontSize: 16, fontWeight: FontWeight.w600, ), cursorColor: NetflixColors.red, decoration: InputDecoration( hintText: 'Search titles, genres, stories...', hintStyle: TextStyle( color: NetflixColors.white.withValues(alpha: 0.45), ), prefixIcon: const Icon( Icons.search, color: NetflixColors.white, ), filled: true, fillColor: NetflixColors.darkGray, border: OutlineInputBorder( borderRadius: BorderRadius.circular(8), borderSide: BorderSide.none, ), ), ), const SizedBox(height: 18), Expanded( child: filteredMovies.isEmpty ? const EmptySearchResult() : ListView.separated( itemCount: filteredMovies.length, separatorBuilder: (context, index) { return const SizedBox(height: 12); }, itemBuilder: (context, index) { final movie = filteredMovies[index]; return SearchResultTile(movie: movie); }, ), ), ], ), ), ), ); } }

部分	役割
`query`	入力された検索文字を保存する
`filteredMovies`	検索文字に合う作品だけを返す
`TextField`	検索文字を入力する
`ListView.separated`	検索結果を一覧表示する

部分

役割

query

入力された検索文字を保存する

filteredMovies

検索文字に合う作品だけを返す

TextField

検索文字を入力する

ListView.separated

検索結果を一覧表示する

decoration: InputDecoration( hintText: 'Search titles, genres, stories...', hintStyle: TextStyle( color: NetflixColors.white.withValues(alpha: 0.45), ), prefixIcon: const Icon( Icons.search, color: NetflixColors.white, ), filled: true, fillColor: NetflixColors.darkGray, border: OutlineInputBorder( borderRadius: BorderRadius.circular(8), borderSide: BorderSide.none, ), ),

List<MovieItem> get filteredMovies { final keyword = query.trim().toLowerCase(); if (keyword.isEmpty) { return movies; } return movies.where((movie) { final title = movie.title.toLowerCase(); final subtitle = movie.subtitle.toLowerCase(); final description = movie.description.toLowerCase(); final category = movie.category.toLowerCase(); return title.contains(keyword) || subtitle.contains(keyword) || description.contains(keyword) || category.contains(keyword); }).toList(); }

Expanded( child: filteredMovies.isEmpty ? const EmptySearchResult() : ListView.separated( itemCount: filteredMovies.length, separatorBuilder: (context, index) { return const SizedBox(height: 12); }, itemBuilder: (context, index) { final movie = filteredMovies[index]; return SearchResultTile(movie: movie); }, ), ),

状態

filteredMovies.isEmpty

検索結果が0件

true

検索結果が1件以上

false

class EmptySearchResult extends StatelessWidget { const EmptySearchResult({super.key}); @override Widget build(BuildContext context) { return Center( child: Text( 'No titles found.', style: TextStyle( color: NetflixColors.white.withValues(alpha: 0.58), fontSize: 15, fontWeight: FontWeight.w700, ), ), ); } }

ListView.separated( itemCount: filteredMovies.length, separatorBuilder: (context, index) { return const SizedBox(height: 12); }, itemBuilder: (context, index) { final movie = filteredMovies[index]; return SearchResultTile(movie: movie); }, )

class SearchResultTile extends StatelessWidget { const SearchResultTile({ super.key, required this.movie, }); final MovieItem movie; @override Widget build(BuildContext context) { return GestureDetector( onTap: () { Navigator.of(context).push( MaterialPageRoute<void>( builder: (context) => MovieDetailPage(movie: movie), ), ); }, child: Container( decoration: BoxDecoration( color: NetflixColors.darkGray, borderRadius: BorderRadius.circular(10), ), padding: const EdgeInsets.all(10), child: Row( children: [ ClipRRect( borderRadius: BorderRadius.circular(6), child: Image.network( movie.posterUrl, width: 78, height: 112, fit: BoxFit.cover, ), ), const SizedBox(width: 13), Expanded( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( movie.title, maxLines: 1, overflow: TextOverflow.ellipsis, style: const TextStyle( color: NetflixColors.white, fontSize: 16, fontWeight: FontWeight.w900, ), ), const SizedBox(height: 5), Text( '${movie.matchRate}% Match • ${movie.year} • ${movie.rating}', style: TextStyle( color: NetflixColors.white.withValues(alpha: 0.72), fontSize: 12, fontWeight: FontWeight.w700, ), ), const SizedBox(height: 8), Text( movie.description, maxLines: 3, overflow: TextOverflow.ellipsis, style: TextStyle( color: NetflixColors.white.withValues(alpha: 0.62), fontSize: 12.5, height: 1.35, ), ), ], ), ), ], ), ), ); } }

return GestureDetector( onTap: () { Navigator.of(context).push( MaterialPageRoute<void>( builder: (context) => MovieDetailPage(movie: movie), ), ); }, child: Container( ... ), );

Text( '${movie.matchRate}% Match • ${movie.year} • ${movie.rating}', style: TextStyle( color: NetflixColors.white.withValues(alpha: 0.72), fontSize: 12, fontWeight: FontWeight.w700, ), ),

TextFieldに文字を入力 ↓ onChangedが呼ばれる ↓ setStateでqueryを更新 ↓ filteredMoviesが再計算される ↓ 検索結果が0件か確認 ↓ 0件ならEmptySearchResult ↓ 1件以上ならListView.separated ↓ SearchResultTileで1件ずつ表示 ↓ カードをタップするとMovieDetailPageへ移動

GestureDetector( onTap: () { Navigator.of(context).push( MaterialPageRoute<void>( builder: (context) => MovieDetailPage(movie: movie), ), ); }, child: Container( ... ), )

final title = movie.title.toLowerCase(); final subtitle = movie.subtitle.toLowerCase(); final description = movie.description.toLowerCase(); final category = movie.category.toLowerCase(); return title.contains(keyword) || subtitle.contains(keyword) || description.contains(keyword) || category.contains(keyword);

final title = movie.title.toLowerCase(); final subtitle = movie.subtitle.toLowerCase(); final description = movie.description.toLowerCase(); final category = movie.category.toLowerCase(); final seasonLabel = movie.seasonLabel.toLowerCase(); return title.contains(keyword) || subtitle.contains(keyword) || description.contains(keyword) || category.contains(keyword) || seasonLabel.contains(keyword);