DEV Community 👩‍💻👨‍💻

Cover image for Flutter Youtube List With PHP & MySql
Steven Mathew
Steven Mathew

Posted on

Flutter Youtube List With PHP & MySql

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;
Enter fullscreen mode Exit fullscreen mode
  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=””;
Enter fullscreen mode Exit fullscreen mode

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)));
Enter fullscreen mode Exit fullscreen mode
  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); },
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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.

GitHub logo stevie1mat / Flutter-Youtube-List-With-PHP-MySql

Flutter Youtube List From PHP - MySQL (using phpmyadmin)

Flutter Youtube List From PHP - MySQL (using phpmyadmin)

Flutter youtube list view using PHP and MySQL by converting it into json and the parsing it in the Flutter app. You can also use json directly if You don't want to use PHP. (All of these work remotely so You can edit and change it.)


Packages Used

Update to the lastest version so that You don't face any errors.


Steps For Setting This Up:

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

  • Edit the videoapp.php file with Your credentials & table name and upload it to Your server.
  • Finally change the link to php file in the list.dart file. Sample link has been provided Please don't misuse it in any way.

Screen Shots

Buy Me A Coffee

Top comments (0)

5 Websites To Learn Frontend Web Development Faster

In this article, Bentil Shadrack has curated 5 resourceful sites that will help you better you web development skills really fast.