Flutter WidgetTestの時のみ出るエラーの対処法2件

環境

訳あって最新版を使っていません(macをCatalinaにアップデートできない==Xcodeの最新版を入れられないので)。
従って、バージョン違いによる不動作などあるかも知れません。お気づきの点があったら是非コメント下さい。

$ flutter --version
Flutter 1.12.13+hotfix.5 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 27321ebbad (4 months ago) • 2019-12-10 18:15:01 -0800
Engine • revision 2994f7e1e6
Tools • Dart 2.7.0

1. A RenderFlex overflowed

(1)エラー内容

エラーメッセージ自体は、Flutterやってるとよく見るやつです。
要するに、「画面サイズをオーバーしてるよ」という、実機やエミュレーターで表示されると心臓や目にとっても悪い、アレ(笑)

══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by XXX pixels on the yyyyy.

これが、WidgetTestの時のみ発生する。

という現象に遭遇しました。

Android端末で実行すると、問題なく表示されるのです。
でも、テストだけエラーになる。なんで！？

(2)解決策

WidgetTesterのViewPortがデフォルトで800x600だそうです。
横長なのかい！
(多分PCブラウザに合わせてある？)

ということで、ちゃんと縦長を指定してやります。

   testWidgets('テスト', (WidgetTester tester) async {
      final TestWidgetsFlutterBinding binding =
          TestWidgetsFlutterBinding.ensureInitialized();
      await binding.setSurfaceSize(Size(1080, 1920));

      await tester.pumpWidget(MyWidget());
      expect(/* なんかテスト */ );
    });

(3)参考サイト

こちらを参考にしました。

カレンダーライブラリのIssuesページですが、答えがズバリ書いてありました。
https://github.com/aleksanderwozniak/table_calendar/issues/38

助かった！

2. No Material widget found. XXX widgets require a Material widget ancestor.

(1)エラー内容

══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
The following assertion was thrown building InkWell(gestures: [tap], clipped to BoxShape.rectangle,
dirty, state: _InkResponseState<InkResponse>#2b7ba):
No Material widget found.
InkWell widgets require a Material widget ancestor.
In material design, most widgets are conceptually "printed" on a sheet of material. In Flutter's
material library, that material is represented by the Material widget. It is the Material widget
that renders ink splashes, for instance. Because of this, many material library widgets require that
there be a Material widget in the tree above them.
To introduce a Material widget, you can either directly include one, or use a widget that contains
Material itself, such as a Card, Dialog, Drawer, or Scaffold.
The specific widget that could not find a Material ancestor was:
  InkWell

XXXで指摘されているWidgetが、MaterialなWidgetの子になってないとダメだよってことのようです。上のエラーメッセージの場合は、InkWellがMaterialなWidgetの階層にいないとダメってことですね。確かに、InkWellはリップルエフェクトを出すやつだから、マテリアルデザインじゃないといけないけど・・・

でも実機に転送したらエラー出ないじゃん。ちゃんと表示されてるじゃん。ちゃんとリップル出るじゃん。

そもそも、

/// テスト用ウィジェットの起動
MaterialApp testMainViewWidget(Widget widget) {
  return MaterialApp(
    home: ChangeNotifierProvider<MainViewModel>(
      create: (context) => MainViewModel(),
      child: widget,
    ),
  );
}

MateriaAppにしてるのに？？

(2)解決策

Scaffoldが必要です。ちゃんと読めばエラーメッセージにも書いてあります。

/// テスト用ウィジェットの起動
MaterialApp testMainViewWidget(Widget widget) {
  return MaterialApp(
    home: ChangeNotifierProvider<MainViewModel>(
      create: (context) => MainViewModel(),
      child: Scaffold( // これが必要
        body: widget,
      ),
    ),
  );
}

アプリのコードをよく見たら、起動画面に出してるHomePageウィジェットをScaffoldでくくってました。
コピペでやってるとダメですね

(3)参考サイト

こちらが参考になりました。
https://stackoverflow.com/questions/43947552/using-textfield-throws-no-material-widget-found-error

助かった！