The getter 'displayName' was called on null. Receiver: null Tried calling: displayNameの解決法

はじめに

この問題が発生したのは、下記のmy_page_screen.dartの実装を進めている時

このエラーの原因は何？

データの取得が終わってないのにウィジェットが作成されるからか、Consumerで一瞬エラーが発生する。。。 pic.twitter.com/y8iJE1VsO9

— 高卒プログラマーげんと (@gento34165638) May 17, 2021

Providerでまだ値の取得が終わっていないのに、Widgetの描画が始まっていることが原因だと思われる

「null」の場合の条件を追加しよう

 child: Column(
            children: <Widget>[
              Consumer<UserProvider>(builder: (context, model, child) {
                final userData = model.userModels;
                return userData == null
                    ? Container()
                    : Row(
                        children: <Widget>[
                          Container(

このように?と:を使うことでウィジェットの表示を条件によって切り替えられます！

この場合、
userData == nullなら空っぽのContainer()を表示
userData == nullではないなら、userDataを使って値を表示するRow()を表示

return userData == null ? Container() : Row()

参考