flutter × firestore getしたデータをページに表示できない問題

Question

問題点

以下のようなプログラムをflutter firebase provderを使って作っています。
⓵でCardをタップしたらタップされたドキュメントIDを使い⓶でデータを取得し③で表示したいのですが、コンソールには出力できるのですが、③のページに表示できません。
ご教授よろしくお願いいたします。

---

コード

①

       body: Consumer<TeaProvider>(builder: (context, model, child) {
          final todoList = model.todoList;
          return ListView(
            children: todoList
                .map(
                  (todo) => Card(
                    margin: const EdgeInsets.only(left:20,right:20,top:5,bottom:5),
                    elevation: 3,
                    child: InkWell(
                      onTap: ()async{
                        await ViewBook(context , model , todo);
                        Navigator.push(
                            context,
                            MaterialPageRoute(builder: (context) => ViewPage()));
                      },
                      child: Container(
                          height: MediaQuery.of(context).size.height * 0.15,
                          child:  Row(
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: [
                              Column(
                                mainAxisAlignment: MainAxisAlignment.spaceAround,
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: [
                                  Padding(
                                    padding: const EdgeInsets.only(right:10.0,left:10.0),
                                    child: Container(
                                      width: 50,
                                      height: 50,
                                      decoration: BoxDecoration(
                                          color: Colors.red,
                                          shape: BoxShape.circle
                                      ),
                                    ),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.only(
                                        right: 10.0, left: 10.0),
                                    child: Text(todo.name,
                                    ),
                                  ),
                                ],
                              ),
                              Container(
                                  height: 80,
                                  child: VerticalDivider(
                                    color: Colors.black54,
                                  )
                              ),
                              Flexible(
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  mainAxisAlignment: MainAxisAlignment.start,
                                  children: [
                                    Padding(
                                      padding: const EdgeInsets.only(bottom:4.0),
                                      child: Text(todo.recipe,
                                        overflow: TextOverflow.ellipsis,
                                        maxLines: 2,
                                        style: TextStyle(
                                            fontWeight: FontWeight.bold,
                                            fontSize: 17
                                        ),),
                                    ),
                                    Text(todo.title,
                                      overflow: TextOverflow.ellipsis,
                                      maxLines: 2,
                                    ),
                                    Text( '調理時間：'+todo.time+'min')
                                  ],
                                ),
                              )
                            ],
                          )
                      ),
                    ),

                  ),
            ).toList(),
          );
        }),
Future ViewBook(BuildContext context , TeaProvider model , Todo todo) async {

    await model.getTapmodel(todo);
}

⓶

※抜粋しています
class TeaProvider extends ChangeNotifier {
  Future getTapmodel(Todo todo) async{
    final snapshoted = await FirebaseFirestore.instance
        .collection('todoList')
        .doc(todo.documentID)
        .get();
    notifyListeners();
    viewText = snapshoted['title'];
    viewTodo = snapshoted['name'];
    viewItem = snapshoted['recipe'];
    viewTime = snapshoted['time'];
    viewName = snapshoted['material'];
    print(viewText);
    print(viewTime);
    print(viewTodo);
    print(viewName);
    print(viewItem);
    notifyListeners();
  }
  String viewText;
  String viewTodo;
  String viewItem;
  String viewTime;
  String viewName;

}

⓷

class ViewPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<TeaProvider>(
      create: (_) => TeaProvider(),
        child: Scaffold(
            appBar: AppBar(
              backgroundColor: Colors.green,
              title: Text('Tea App'),
              centerTitle: true,
            ),
            body: Consumer<TeaProvider>(builder: (context, model, child) {
              return Container(
                child: Center(
                  child: Column(
                    children: [
                      Text(model.viewItem??'データなし'),
                      Text(model.viewName??'データなし'),
                      Text(model.viewTodo??'データなし'),
                      Text(model.viewTime??'データなし'),
                      Text(model.viewText??'データなし'),
                  ]
                ),
                )
              );
            },
            )
        ),
    );
  }
}

class Todo {
  Todo(DocumentSnapshot doc){
    this.documentID = doc.id;
    this.title = doc['title'];
    this.recipe = doc['recipe'];
    this.material = doc['material'];
    this.time = doc['time'];
    this.name = doc['name'];
  }
  String documentID;
  String time;
  String material;
  String recipe;
  String title;
  String name;
}

Comments

[flutter_labo]

ぱっと見ですがgetTapmodelの定義自体に問題はなさそうなので、それを実際に発火させているところが見たいです！

[kimidoro]

コメントありがとうございます！
①のコードの最後で発火させています。
自分も定義は間違っていないと思ったんですけど表示されないんですよね

[flutter_labo]

修正ありがとうございます！
今はViewPageで
ChangeNotifierProvider<TeaProvider>(
create: (_) => TeaProvider(),
child:Scaffold
--------------------------------------
を書かれていると思うのですが、これをもうちょい上のMyAppで
MaterialApp(
home: ChangeNotifierProvider<TeaProvider>(
create: (_) => TeaProvider(),
child: MyHomePage(),
),
);
みたいな風に書いてみて下さい。

[kimidoro]

修正してみたのですが、表示されませんでした。
先ほど教えていただいた、MyAppというのはmain.dartで修正するということですよね？

[flutter_labo]

そうです、正常に動いてないようで申し訳ないです。。
一応確認させていただきたいのですが、ViewPageの方のChangenotifierProviderは消していただけたでしょうか？
一応私が先程のような修正をお願いしたのは、Navigator.pushする際にProviderが適切に渡せていない可能性があると思ったからです。詳しくは下記のリンクをみていただければと思います。
https://stackoverflow.com/questions/59576495/flutter-provider-nested-navigation

[flutter_labo]

今気付いたのですが、①でも③でもChangenotifierProviderのcreateでインスタンスを生成してますよね？
①で作成したインスタンスと③で作成したインスタンスが異なるのが原因だと思います。
ChangeNotifierProviderでインスタンスを生成するのは一度だけでいいので、main.dart以外でChangeNotifierProviderを使っているところがあれば、全部消してみてください。

[kimidoro]

l

[kimidoro]

class ViewPage extends StatelessWidget {

@override
Widget build(BuildContext context) {
return ChangeNotifierProvider<TeaProvider>(　
　　　　/*create: (_) => TeaProvider(),*/ ←これでいいのですか？
child: MaterialApp(
home : Scaffold(
appBar: AppBar(
backgroundColor: Colors.green,
title: Text('Tea App'),
centerTitle: true,
),
body: Consumer<TeaProvider>(builder: (context, model, child) {

return Container(
child: Center(
child: Column(
children: [
Text(model.viewItem??'データなし'),
Text(model.viewName??'データなし'),
Text(model.viewTodo??'データなし'),
Text(model.viewTime??'データなし'),
Text(model.viewText??'データなし'),
]
),
)
);
},
)
),
),
);
}
}

[flutter_labo]

とんでもないです。
create: (_)=>TeaProvider()のタイミングです。
こちらの記事が参考になるかと思います。
https://blog.dalt.me/1903

[flutter_labo]

ちょっとちがいますね。
MaterialAppもChangeNotifierProviderもmain.dartにのみ書いてください。
それ以下のページでProviderの値にアクセスするときは、ChangeNotifierProviderを使わずにConsumerのみを使うようにしてください。

[kimidoro]

これで良いのでしょうか？
Widget build(BuildContext context) {
return MaterialApp(
home:MultiProvider(
providers: [
ChangeNotifierProvider<LogoinpModel>(
create: (_) => LogoinpModel()),
ChangeNotifierProvider<TeaProvider>(
create: (_) => TeaProvider()..getTeaListRealtime()),
ChangeNotifierProvider<SignUpModel>(
create: (_) => SignUpModel()),
],
---------------------------
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
drawer: NavDrawer(),
appBar: AppBar(
backgroundColor: Colors.green,
title: Text('Tea App'),
centerTitle: true,
actions: [
Padding(
padding: EdgeInsets.only(right: 15),
child: Icon(Icons.expand_more_sharp),
),
],
),

[kimidoro]

Could not find the correct Provider<TeaProvider> above this Consumer<TeaProvider> Widget
上記のようなエラーｇが出てしまいます

[flutter_labo]

そのエラーが出るのはどのタイミングですか？
また、MultiProviderのchildには何を与えていますか？

[kimidoro]

main.dartではログインページを入れていてログインが成功するとエラーが発生し赤い画面になります。
MultiProviderのchildにはログインページのみで画面遷移でほかのページに移動しています。

[kimidoro]

void main() async{
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home:MultiProvider(
providers: [
ChangeNotifierProvider<LogoinpModel>(
create: (_) => LogoinpModel()),
ChangeNotifierProvider<TeaProvider>(
create: (_) => TeaProvider()..getTeaListRealtime()),
ChangeNotifierProvider<SignUpModel>(
create: (_) => SignUpModel()),
],
child:MyLogin(),
),
);
}
}

class MyLogin extends StatefulWidget {

@override
_MyLoginState createState() => _MyLoginState();
}

class _MyLoginState extends State<MyLogin> {
@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
body: Consumer<LogoinpModel>(
builder: (context, model, child){
return Column(
children: [
Container(

height: MediaQuery.of(context).size.height * 0.7,
width: MediaQuery.of(context).size.width.....
という感じです

[flutter_labo]

情報提供ありがとうございます！
でしたら、main関数内のMyAppをMultiProviderで包む形で書きかえてみてください。
大体↓みたいな感じです。
void main() {
runApp(MutiProvider(省略）, child: MyApp()));
}

[kimidoro]

できました！！！！！！
一週間くらいここで詰まっていたのでほんとに助かりました！
何から何まで今日一日本当にありがとうございました。
自力で解決できるように勉強していきます( ;∀;)

[kimidoro]

ベストアンサーを付けたいので回答のほうに書いてもらってよろしいでしょうか？

[flutter_labo]

解決できたようで良かったです！
お役に立てて光栄です。

Answer 1

TeaProviderのインスタンスを複数作成していたことが今回の原因でした。

追記、修正依頼の方で解決したので、お困りの方はそちらをご覧いただけると参考になるかもしれません。