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;
- 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)));
- 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.
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
Author: Steven Mathew
Top comments (0)