Providerを使用したデータの受け取り方法[Flutter]

Question

Providerを通してページ遷移時のデータの受け渡しをしたいと思っております。

sentences_screen.dartのPageviewビルダーからデータをsentences_pageview.dartに送ってそのモデルはpageview_provider.dartに書かれております。

pageview_provider.dartを作成したのはindexの値(ページ番号)を
sentences_screen.dartのappBarに動的に表示したいからです。

providerを介さないでただ単にデータを送るだけだったら実現できていたのですが、providerを挟むとやり方がわからなくなってしまいました。

どなたか解決できる方はいらっしゃらないでしょうか？

gitはこちらです。
https://github.com/nannantown/flutter_lang

↓sentences_screen.dart

          appBar: AppBar(
            title: Text(courseTitle),
            centerTitle: true,
            flexibleSpace: Container(
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  begin: Alignment.centerLeft,
                  end: Alignment.centerRight,
                  colors: <Color>[Colors.lightBlue, Colors.lightBlueAccent],
                ),
              ),
            ),
            actions: <Widget>[
              Padding(
                padding: const EdgeInsets.only(right: 20.0),
                child: Center(
                  child: Consumer<PageviewProvider>(
                    builder: (context, page, child) {
                      return Text(
                        page.index.toString()+"/10",//ここにページ数を表示したい
                        textAlign: TextAlign.center,
                      );
                    }
                  ),
                ),
              ),
            ],
          ),

//間を省略

child: PageView.builder(
  controller: _pageController,
  itemCount: sentences.length,
  itemBuilder: (ctx, int) => SentencesPageView(sentencesList: sentences, index: int),
                  )),//ここでデータを送る

↓pageview_provider.dart

import 'package:flutter/material.dart';

class PageviewProvider extends ChangeNotifier {
  int index;//このindexの値をappbarにに表示したい
  var sentencesList;

  PageviewProvider({
    @required this.index,
    @required this.sentencesList,
  });
}

↓sentences_pageview.dart

import '../provider/pageview_provider.dart';
class SentencesPageView extends StatelessWidget {

  int index;
  var sentencesList;

  SentencesPageView({
    @required this.index,
    @required this.sentencesList,
  });

  @override
  Widget build(BuildContext context) {
    var pageview = Provider.of<PageviewProvider>(context);

    return Column(
      children: <Widget>[
        Expanded(
          flex: 1,
          child: Center(
            child: SizedBox(
              width: double.infinity,
              child: InkWell(
                onTap: () {
                  print(pageview.index);
                  AudioCache player = AudioCache(prefix: 'sounds/');
                  player.play(pageview.sentencesList[pageview.index].soundNameA + '.mp3');
                },
//以下省略

Answer 1

深くは見てないのでわからないですが、おそらくindexがnullになっているのでPageviewProvider内で、

class PageviewProvider extends ChangeNotifier {
  int index; //このindexの値をappbarにに表示したい
  var sentencesList;

  PageviewProvider({
    @required this.index,
    @required this.sentencesList,
  });
}

以下のような感じでindexに初期値を与えてみてはどうでしょうか？

class PageviewProvider extends ChangeNotifier {
  int index = 1;
  var sentencesList;

  void setIndex(int i) {
    index = i;
    notifyListeners();
  }

  ...
  
}

コンストラクタを使う場合は、main.dartの以下の部分で値を渡すべきだと思いました。

ChangeNotifierProvider<PageviewProvider>(
  create: (_) => PageviewProvider(index = 1, sentencesList = ...),
),

Comments

[namihana]

ご回答ありがとう御座います。

初期値を与えてみましたが、うまく動作しませんでした、、
引き続き方法を探してみます。