Как использовать провайдера флаттера в StatefulWidget? - PullRequest
Новая
       18

Как использовать провайдера флаттера в StatefulWidget?

0 голосов
/ 20 июня 2019

Я использую flutter_provider для управления состоянием.Я хочу загрузить некоторые элементы при загрузке страницы (statefulwidget) из Api.Я показываю загрузчик в начале страницы и хочу показать элементы после их получения.

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.

здесьэто метод сборки родительского класса playList, заключенный в changenotifier, 

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

Итак, все примеры на flutter_provider в интернете показывают использование провайдера на statelesswidget, где изменения состояния происходят при взаимодействиях с пользователем, таких какнажатие кнопки.Не о том, как использовать провайдера в statefulWidget, и о случаях, когда данные должны обновляться при загрузке страницы без какого-либо взаимодействия.

Я знаю о построителе потоков и будущем построителе для таких сценариев, но хочу понять, как этоможно сделать с помощью flutter_provider.Как я могу использовать провайдера для вызова fetchVideosList в initState (при загрузке страницы)?Может ли этот случай / должен быть обработан с помощью statelessWidget?

Ответы [ 2 ]

2 голосов
/ 22 июня 2019

При использовании провайдера для управления состоянием вам не нужно использовать StatefullWidget, так как вы можете вызвать метод ChangeNotifier при запуске приложения?

Вы можете просто сделать это в конструкторе ChangeNotifier, чтобы при указании VideoProvider () в конструкторе ChangeNotifierProvider конструктор вызывался при первом создании провайдера VideosProvider, поэтому:

PlayList.dart: 

class Playlist extends StatelessWidget {

@override
Widget build(BuildContext context) {
  final videosState = Provider.of<VideosProvider>(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,
    ),
  );

} }

VideosProvider.dart: 

class VideosProvider with ChangeNotifier {

  VideosProvider(){
    fetchVideosList();
  }

  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;
 }

}

0 голосов
/ 20 июня 2019

При использовании провайдера вам не нужно использовать StatefulWidget (на момент обучения команды Flutter Управление состоянием

Вы можете использовать следующий учебник, чтобы узнать, как получитьданные с поставщиком и StatelessWidget: Управление состоянием флаттера с поставщиком

...