---
title: "【Flutter】テストで、子ウィジェットを取得する方法"
description: "FlutterのWidgetテストで、descendantとancestorを使って対象のウィジェットを探す方法。"
url: "https://miyayu.jp/blog/qiita-a4e77fc7e8db6e8e8bd8/"
pubDate: "2022-05-26"
updatedDate: "2022-05-26"
tags: ["Dart","テスト","Flutter"]
---
# 【Flutter】テストで、子ウィジェットを取得する方法
> **過去の記事（Qiitaから移行）**
>
> この記事は公開当時の知識・環境に基づいて書いたものです。現在の仕様に合わせた更新・動作確認は行っておらず、内容の正確性や動作を保証するものではありません。
>
> 初出：[2022-05-26・Qiita](https://qiita.com/yuu1111main/items/a4e77fc7e8db6e8e8bd8)
# こんなアプリがありました
ソースコードはこちら。
Flutterの初期コードを改造し、`1増えるボタン`と`2増えるボタン`があります。
```dart
Card getCard(String title, int addValue, Key key) {
return Card(
key: key, //Keyはここにある！
child: Column(
children: [
Text(title), //引数の文字をタイトルに
OutlinedButton(
onPressed: () {
_incrementCounter(addValue); //カウンターの値を引数の値分増やす
},
child: const Text("ボタン"),)
],
),
);
}
```
カードはこのような実装で作られています。
## 問題点
テストを作る際に、`find.text("ボタン")`してしまうと、2つ見つかってしまいます。
### 解決策
ここで、Keyは`OneButton`と`TwoButton`と分かれていますので、`find.byKey()`を利用して、孫要素である`Text`を探して`tester.tap()`をしてみようと思います。
# 成果物
上記リンクのようなソースコードになりました。
```dart
//KeyからWidgetを取得する
var oneButtonParent = find.byKey(const Key("OneButton"));
//ボタンのテキストを取得する
var buttonText = find.text("ボタン");
//親要素から子要素を取得する
var oneButtonText = find.descendant(of: oneButtonParent, matching: buttonText);
```
一番下の`find.descendant`が子孫を取得する部分なのですが、至ってシンプルです。
```dart
find.descendant(of: 親要素が含まれるFinder, matching: 探したいものが含まれるFinder)
```
としてあげることで、親要素の子孫要素から絞り込んだFinderを生成します。
公式ドキュメントはこちら。
ちなみに逆バージョンで親要素を取得するものもあります。