8

状態管理に flutter_provider を使用しています。Api からのページ (statefulwidget) ロードでいくつかのアイテムをロードしたい。ページの開始時にローダーを表示していますが、アイテムがフェッチされたら表示したいと考えています。

PlayList.dart -

class Playlist extends StatefulWidget {
  @override
  _PlaylistState createState() => _PlaylistState();
}

class _PlaylistState extends State<Playlist> {
var videosState;
  @override
  void initState() {
    super.initState();
     videosState = Provider.of<VideosProvider>(context);
    videosState.fetchVideosList();
  }

  @override
  Widget build(BuildContext context) {
    var videos = videosState.playlist;
    return Scaffold(
      appBar: AppBar(
        title: Text('My Videos'),
      ),
      body: RefreshIndicator(
        child: Container(
          width: double.infinity,
          height: double.infinity,
          child: videos.length
              ? ListView.builder(
                  itemBuilder: (BuildContext context, index) {
                    return _videoListItem(context, index, videos, videosState);
                  },
                  itemCount: videos.length,
                )
              : Center(
                  child: CircularProgressIndicator(),
                ),
        ),
        onRefresh: () => null,
      ),
    );
  }
}

私のプロバイダはこのようなものです -

class VideosProvider with ChangeNotifier {

  List _playlist;
  int _currentVideoId;  
  get playlist => _playlist;

  void setPlayList(videosList) {
    _playlist = videosList;
  }

  Future fetchVideosList() async {
    http.Response response =
        await http.get("http://192.168.1.22:3000/videos-list/");

    print(json.decode(response.body));
    videos = json.decode(response.body)["data"];
    setPlayList(videos);
    return videos;
  }
}

これにより、次のエラーが発生します-

inheritFromWidgetOfExactType(_Provider<VideosProvider>) or inheritFromElement() was called before _PlaylistState.initState() completed.

これは、changenotifier でラップされた、playList クラスの親のビルド メソッドです。

Widget build(BuildContext context) {
    return ChangeNotifierProvider<VideosProvider>(
      builder: (BuildContext context) => VideosProvider(),
      child: MaterialApp(
        title: "My App",
        home: new Playlist(),
      ),
    );
  }

そのため、インターネット上の flutter_provider のすべての例は、ステートレス ウィジェットでのプロバイダーの使用法を示しており、ボタンのクリックなどのユーザー インタラクションで状態の変化が発生します。statefulWidget でプロバイダーを使用する方法、および対話なしでページの読み込み時にデータを更新する必要がある場合についてはありません。

この種のシナリオでは、streambuilder と futurebuilder を認識していますが、flutter_provider でこれを行う方法を理解したいと考えています。プロバイダーを使用してinitState(ページロード時)でfetchVideosListを呼び出すにはどうすればよいですか? このケースは statelessWidget で処理できますか?

4

3 に答える 3