While working on a project, I came across the need to create a dynamic Youtube list of videos using the youtube_player_flutter package.

So here is how I went about developing the code.

To start with, I create a new flutter project. Then I opened up my PHPMyAdmin to start creating tables for storing the dynamic data that will be shown to the user.

Create A SQL Table
CREATE TABLE `videosapp` ( `youtubeid` varchar(100) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; ALTER TABLE videosapp ADD PRIMARY KEY (youtubeid); COMMIT;

1. Create the PHP file to provide the JSON data from the PHPMyAdmin database.

Connect to the phpmyadmin.

static $DB_SERVER=””;

static $DB_NAME=””;

static $USERNAME=””;

static $PASSWORD=””;

Fetch the data and convert it into JSON format.

while($row=$result->fetch_array()) {

array_push($spacecrafts, array(“youtubeid”=>$row[‘youtubeid’])); }

print(json_encode(array_reverse($spacecrafts)));

1. The final step is to parse the value in the Flutter application.

Use a ListView Builder to create a widget that will create a list from the Youtube Id’s retrieved from the PHP file in JSON Format.

ListView.builder( itemCount: widget.spacecrafts.length, itemBuilder: (context, int currentIndex) {

return createViewItem(widget.spacecrafts[currentIndex], context); },

Create a List from the Youtube controller by providing the Youtube Id’s from the database to the Youtube Player Controller intialVideoId.

final List<YoutubePlayerController> _controllers = [spacecraft.youtubeid] .map<YoutubePlayerController>( (videoId) =>

YoutubePlayerController(

initialVideoId: videoId,

flags: YoutubePlayerFlags( autoPlay: false, ), ), ) .toList();

Create a Future Builder and retrieve the snapshot data and show it onto the screen. You can also use Firebase or any other backend service to display the list of videos by using StreamBuilder.

You can find the Full Source Code of the project here.