如何解决在flutter中在null上调用getter'value'的问题

Question

I am using the video_player package. I want to load the video. The video data is the response from API. But I have error about NoSuchMethodError: The getter 'value' was called on null. Receiver: null Tried calling: value NoSuchMethodError: The getter 'value' was called on null. Receiver: null Tried calling: value . My response is no problem. I print() the response there got videoURL. The problem is I don't know how to add the video_player after get the response. I have tried to do like this but have error.

Here is my code:

class _State extends State<MyApps> {
GlobalKey<PaginatorState> paginatorGlobalKey = GlobalKey();
String videoURL;
VideoPlayerController _videoPlayerController;

@override
  void initState() {
    super.initState();
    playVideo(videoURL);
  }

    @override
      Widget build(BuildContext context) {
        return Scaffold(
           appBar: AppBar(title: Text('My Apps'),
             ),
          body: Paginator.listView(
            key: paginatorGlobalKey,
            pageLoadFuture: sendPagesDataRequest,
            pageItemsGetter: listItemsGetterPages,
            listItemBuilder: listItemBuilder,
            loadingWidgetBuilder: loadingWidgetMaker,
            errorWidgetBuilder: errorWidgetMaker,
            emptyListWidgetBuilder: emptyListWidgetMaker,
            totalItemsGetter: totalPagesGetter,
            pageErrorChecker: pageErrorChecker,
            scrollPhysics: BouncingScrollPhysics(),
          ),
        );
      }

Future<Data> sendPagesDataRequest(int page) async {
 try {
   String url = Uri.encodeFull("APIURL?page=$page");
   http.Response response = await http.get(url);
   Data pagesData = pagesDataFromJson(response.body);
   return pagesData;
  } catch (e) {
 }


void playVideo(dynamic item) async {
 _videoPlayerController = VideoPlayerController.network(item.videoURL)
 ..initialize().then((_) {
 _videoPlayerController.play();
 });
}

Widget listItemBuilder(dynamic item, int index) {
 videoURL= item.videoURL;
  return InkWell(
    child: Card(
     shape: RoundedRectangleBorder(
     borderRadius: BorderRadius.circular(15),
    ),
    elevation: 4,
    margin: EdgeInsets.all(10),
    child: Column(
    children: <Widget>[
     Stack(
      children: <Widget>[
        child: Column(
         crossAxisAlignment: CrossAxisAlignment.stretch,
         children: <Widget>[
           _videoPlayerController.value.initialized
            ? AspectRatio(
             aspectRatio: _videoPlayerController.value.aspectRatio,
             child: VideoPlayer(_videoPlayerController),
            )
           : Container()
            ],
            ),
           ),  
          ],
         ),
        ),
      );
    }

What is the error in my code and how can I solve it?

Answer 1

You should store the Future returned from the VideoPlayerController.initialize method in a State Class Variable:

Future hasInitialized;

void playVideo(dynamic item) async {
 _videoPlayerController = VideoPlayerController.network(item.videoURL);
 hasInitialized = initialize();
 hasInitialized.then((_) {
 _videoPlayerController.play();
 });
}

Then, you can use a FutureBuilder class to build a widget depending if the Future has been completed or not.

The problem is I don't know how to add the video_player after get the response.

This Widget can return different things wether or not a Future has completed by using the connectionState or the snapshot.hasData (in case of non-void Futures) attributes.

FutureBuilder(
  future: hasInitialized,
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.done) {
      // Return here what you want to display.
    } else {
      // Return here what you want to show when the VideoPlayerController is still initializing, like a
      // loading spinner.
      return Center(child: CircularProgressIndicator());
    }
  },
)

For more information see the official Cookbook.