title: Flutter Video Player On Click Pass URL dynamic and Load Video to play
body: <p><a href="https://i.stack.imgur.com/PoeyX.png" rel="nofollow noreferrer">sample screen of video player attached below </a>How can i make video player to play dynamically , while onclick of list play video by passing the video URL?</p>
  
  <p>while on click i have passed URL and tried to reinitialise and start play its not working ,state not changing </p>
  
  <p>Here is my code,</p>
  
  <p>videoplayerscreen.dart,</p>
  
  <pre><code>class VideoPlayerScreen extends StatefulWidget {
    int playBackTime;
    int playBackTotalTime;
    String setPlayTime;
    String setPlayDuration;
    double aspectRatio;
    String videoUrl;
    bool isForward;
    bool isFullScreen;
    bool allowFullScreen;
    bool showControls;
    bool isAutoPlay;
    int startWithinSeconds;
  
    VideoPlayerScreen({
      Key key,
      this.playBackTime = 0,
      this.playBackTotalTime = 0,
      this.setPlayTime = "00:00",
      this.setPlayDuration = "00:00",
      this.aspectRatio = 16 / 9,
      this.videoUrl =
          "",
      this.isForward = true,
      this.isFullScreen = false,
      this.allowFullScreen = false,
      this.showControls = true,
      this.isAutoPlay = false,
      this.startWithinSeconds = 0,
    }) : super(key: key);
  
    @override
    _VideoPlayerScreenState createState() =&gt; _VideoPlayerScreenState();
  }
  
  class _VideoPlayerScreenState extends State&lt;VideoPlayerScreen&gt; {
    VideoPlayerController _controller;
  
    void initPlayer() async {
      _controller = VideoPlayerController.network(widget.videoUrl);
      await _controller.initialize();
      _controller.setLooping(true);
      _controller.seekTo(Duration(seconds: widget.startWithinSeconds));
      if (widget.isAutoPlay) {
        _controller.play();
      }
      _controller.addListener(() {
        setState(() {
          widget.playBackTime = _controller.value.position.inSeconds;
          widget.setPlayTime = timeFormatter(widget.playBackTime);
        });
      });
    }
  
    @override
    void initState() {
      initPlayer();
      super.initState();
    }
  
   @override
    void dispose() {
      _controller.dispose();
      SystemChrome.setPreferredOrientations([
        DeviceOrientation.landscapeRight,
        DeviceOrientation.landscapeLeft,
        DeviceOrientation.portraitUp,
        DeviceOrientation.portraitDown,
      ]);
      super.dispose();
    }
  </code></pre>
  
  <p>In Config,</p>
  
  <p><code>video_player: ^0.10.5</code></p>
  
  <p>Calling in Other class CourseDetails.dart ,</p>
  
  <pre><code>             Container(
                    padding: EdgeInsets.only(left: 20.0, right: 20.0),
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(8.0),
                      child: _playUrl != null
                          ? VideoPlayerScreen(videoUrl: _playUrl)
                          : Image.asset(
                              'assets/images/test_video_player_screen.png'),
                    ),
                  )
  </code></pre>
  
  <pre><code>GestureDetector(
   **here i am changing the state **
        onTap: () {
          setState(() {
              _playUrl = videoLists['course_video_url'];
          });
        },
        child: Padding(
          padding:
              EdgeInsets.only(left: 10.0, right: 20.0, top: 2.0, bottom: 5.0),
          child: Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.start,
            children: &lt;Widget&gt;[
              Text(
                "${videoLists['sn_no']}",
                textAlign: TextAlign.center,
                style: TextStyle(
                    fontSize: 18,
                    fontWeight: FontWeight.bold,
                    color: Colors.black45,
                    fontFamily: 'Oswald-SemiBold'),
              ),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: &lt;Widget&gt;[
                  Padding(
                    padding: EdgeInsets.only(left: 10.0),
                    child: Text(
                      "${videoLists['course_video_title']}",
                      textAlign: TextAlign.left,
                      style: TextStyle(
                          fontSize: 14,
                          fontWeight: FontWeight.bold,
                          color: Colors.black45,
                          fontFamily: 'Oswald-SemiBold'),
                    ),
                  ),
                  Row(
                    children: &lt;Widget&gt;[
                      Padding(
                        padding: EdgeInsets.only(left: 10.0),
                        child: Text(
                          "Video - ${videoLists['course_video_duration']}",
                          textAlign: TextAlign.left,
                          style: TextStyle(
                              fontSize: 12,
                              fontWeight: FontWeight.bold,
                              color: Colors.grey,
                              fontFamily: 'Oswald-SemiBold'),
                        ),
                      ),
                      Padding(
                          padding: EdgeInsets.only(left: 5.0),
                          child: videoLists['course_watched']
                              ? Image.asset(
                                  'assets/images/green_tick_icon.png',
                                  width: 12.0,
                                  height: 12.0,
                                )
                              : null),
                    ],
                  ),
                ],
              ),
            ],
          ),
        ),
      )
  </code></pre>