How to play video that picked from image_picker using video_player flutter

How to play video that is picked from image_picker using video_player flutter.

I created a method to pick a video and display a video But the problem is I don’t know how to display a video. But this is what I got so far. It always says that the imageFile is null. Is there any to fix the problem? Please take a look at the code it’s not long.

code:

String fileName1 = '';
  String path1 = '';
  File? imageFile;

  @override
  void initState() {
    loadVideoPlayer();
    super.initState();
  }

  loadVideoPlayer() {
    videoController = VideoPlayerController.file(videoFile!);
    videoController.addListener(() {
      setState(() {});
    });
    videoController.initialize().then((value) {
      setState(() {});
    });
  } 

\\To display a video
  AspectRatio(
            aspectRatio: videoController.value.aspectRatio,
                     child:VideoPlayer(videoController),
                   ),

//Pause And Play
IconButton(
           onPressed: () {
                 if (videoController
                  .value.isPlaying) {
                   videoController.pause();
                 } else {
                 videoController.play();
                                }                     
                      setState(() {});
                        },
                                icon: Icon(videoController.value.isPlaying
                                           ? Icons.pause
                                         : Icons.play_arrow)),

//To pick video
  void selectVideo() async {
    final XFile? results = await picker.pickVideo(source: ImageSource.gallery);

    if (results != null) {
      path1 = results.path;
      fileName1 = results.name.replaceFirst("image_picker", "");
      setState(() {});
      print(fileName1);
    } else {
      print('No video picked');
    }
    setState(() {
      videoFile = File(results!.path);
    });
  }

Do not call the loadVideoPlayer() inside the initState but reload the player every time a video is picked :

class Test extends StatefulWidget {
  const Test({Key? key}) : super(key: key);

  @override
  State<Test> createState() => _TestState();
}

class _TestState extends State<Test> {
  VideoPlayerController? _videoPlayerController;

  loadVideoPlayer(File file) {
    if(_videoPlayerController != null) {
      _videoPlayerController!.dispose();
    }
    
    _videoPlayerController = VideoPlayerController.file(file);
    _videoPlayerController!.initialize().then((value) {
      setState(() {});
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: selectVideo,
        child: Icon(
          Icons.add,
        ),
      ),
      body: Center(
        child: Stack(
          children: [
            if (_videoPlayerController != null) ...[
              AspectRatio(
                aspectRatio: _videoPlayerController!.value.aspectRatio,
                child: VideoPlayer(_videoPlayerController!),
              ),
            ]
          ],
        ),
      ),
    );
  }

  void selectVideo() async {
    final XFile? results =
        await ImagePicker().pickVideo(source: ImageSource.gallery);

    if (results != null) {
      setState(() {
        File file = File(results.path);
        loadVideoPlayer(file);
      });
    } else {
      print('No video picked');
    }
  }
}