Welcome back to idrcorner tutorial
in this tutorial I will create Aplication
for idrcorner tutorial
that is an app that contains my youtube video
this one
here are the playlists I have created
and the videos here I will enter into the application
using Flutter
ok, this is an example of this tutorial
this is Homepage
here are some playlists from my chanel
that is this playlist
if i tab, for example flutter
then it will show a list of flutter tutorial videos
that is, this videos
if I tab one of the tutorial
for example I tab Firebase Tutorial
it will appear youtube media player
ok, the video is playing
forward
and if the smartphone is tilted
it will adjust to fullscreen
ok, next I try it,, CodeIgniter
then it will show a list of my CodeIgniter tutorial videos
I will try one more
ok,, the video is playing
ok. roughly this is the result of this tutorial
ok. now, we will create that app from scratch
as usual, import Material.dart first
next
I use Statefull widget for MyApp
next, We will create Homepage class
I use statefull widget again
I will use the image as the background of this application
and the image to be used I have registered in pubspec.yaml
folders name is 'img'
filename
ok.. lets try it, save
oke,, here it is
next, I want the appbar is transparent
scafold transparent too
ok, like this
next, I will put a logo in the middle of here
ok,, like this
next children is Text
ok good, fontsize 20 maybe
to make it middle, on its column
next, I will create menu using Drawer
for this Drawer I will create at another file
so, I type new MyDrawer
Ok,, now I create mydrawer.dart file
import material.dart first
next, I use Stateless widget
named MyDrawer
on return
Drawer
at here.. I will create a playlist for my videos
I use column
and to make it scrolable
I wrap this column
with...
at Main.dart we have to import mydrawer.dart
ok,, here it is,, lets try
I will give padding at the top
I'm raising the fontsize a little
after Home,, I create a line
next, for first menu, is Flutter Tutorial
I copy this style
next, at this Flutter menu
if in tab, it will show my flutter video list from youtube
for that, I add OnTab
OK, now I will create this ListVideo class
I will create at new file
named playlist.dart
here,, I change to Playlist too
at here we need a title
ok,, at here, We will create a List for videos
and the list I get from json data
taken from youtube
to take a list of videos on the playlist here
we will use Youtube API
for using Youtube API, we have to create Google Cloud Project first
to open this page, You can look at the link in this video description
ok,, we start from Menu
we choose, Youtube Data API v3
in the configuration settings
we select web server
ok, this is our API Keys
ok, this is the first step that is making the API Keys
next, to get JSON, we open github
belongs to ThatGuySam
I have also create its link in the description below
at the bottom, click Deploy to Heroku
now, we will create an app, to get json data of youtube playlist
first, I will get list of Flutter videos
so I named flutterlist
at region there are only two, just choose what you want
at here we use our API Keys
next Playlist ID
which playlist we want to get
for example, this my Flutter Tutorial
playlist id is this one,, at here
ok ,, our application is in building process
ok, done, next click view
ok, here it is, JSON DATA from my videos
there is a title here
ok.. we've managed to get the json data
so the link for url is..
url here
now we back ti VSCode
here we will accept url and title
so at drawer.dart
ok.. here,, I add url
and paste our link
back to playlist.dart
at the top
I will create List using Future
I named getData
ok,, we have to import dart.sync
we use our url
oh,, we must use widget at here
import http.dart
ok for json, we have to import dart:convert
ok,, this is for get json data
that is from http.get
obtained from url
this one
from heroku app
next, on return
upst,, text here
I use drawer too
at future we use getData here
if snapshoot has data
then we will create a list
if no data, we will show loading indicator
ok,, now I will create Class for ListVideo
This listvideo requires a data list
so I create list
this list we get from the snapshot data here
ok,, on return we will use ListView.builder
if list null, empty
then itemCount is 0
if not empty than list.length
for now, I will show only the title
we use list, datajson
here
where is the title ??
this one
if like this we become confused
if you want to be neat we can use..
this one, codebeautify.org
I have written the link on the description also
well, I copy this address
ok,, here it is
now our json is easy to read
next, I will get title
this title is inside snipped
so, we use,, snippet then title
ok ,, what's this?
ok,, very nice
these are the titles of my flutter tutorial video
that is here, at flutter tutorial playlist
we have managed to take vidio titles from here
and showing at here
next I will set the design
using the thumbnails maybe
ok,, for image/thumbnail,, lets see
I will use high image
back to VSCode
I cut this first
on return I use container
semicolon here
I use column, because I will create Image and text
for image I use container
lets see at json file, the Image address
ok,, lets try
the image does not appear
lets see again at json file...
oh there is one more here,, url
here less the letter d
ok,, I give height for this container
ok, very good
the image is showing here
next, the title
padding first
I will get the title
ok is better
I will give a line after the title
I use padding again
ok, next, We will create,, if the image is clicked then it will play the video
to play this video, I do not use Video Player Package
but i will use WebView for this
you can see at pub.dartlang
install this package first
open pubspec.yaml
and add flutter web view here
ok,, success,,,, back to playlist
next, we import flutter_webview_plugin.dart
ok,, at bottom
if this image is on tab
then the video will playing
so, the container image
wrap with gesture detector
when on tab it will open new page
next, I will create class for this VideoPlay
I create url variable first
next,, this url we get from this, videoplay
for url,, I will use...
this.. videoId
at webview I just embed the youtube video
so,, I create
we add the address
ok .. seems this is done
ok.. like this
I play
upst.. this emulator seems to be very slow
because it played the video
for that, I will use my smartphone
for preview this app
ok, this is view on my smartphone
i will try,, menu,, flutter
I try the first video
ok,, nice
the video is playing
if we tilt
it becomes fullscreen
ok,, try another video
ok,, its works too
actually this tutorial is finished up here
maybe one more example
I will get data CodeIgniter tutorial playlist
for that,, back to our Drawer
here is not just flutter
but there will be some playlist
for that, I will create ListTile for menu at another class
on return is,, this listTile
next, for text and url
we will using variable
next, at here
well at here
I create one more for CodeIgniter
We will create again,, jsondata for codeIgniter
back to Heroku
I create second project
API KEY ,,we still use that one
our API keys
ok.. here it is, CodeIgniter Playlist json
ok try... there is already a codeIgniter menu
ok,, very good
here comes my tutorials codeIgniter video
ok,, lets try this one
ok.. its working
ok.. here is something to be fixed
the Loading Indicator,, here at left top
its must be centred
ok.. I will fix it,, at playlist.dart
this, at Circular Indicator
I wrap with center widget
ok,, try again
ok, already in the middle now
ok this has worked
for create another playlist, You can do the same
start at the menu
duplicate ListMenu
for the url, you create an application again in Heroku
name the project according playlist to be created
so the result is like this
ok.. this is the tutorial for this time
I hope you like this video
dont forget to give like for this video
and if you think this video is not interesting
give dislike too
and write down your comment, why not like it
so I can create the next better video
ok. That's all from me,, see you in the next flutter tutorial
Không có nhận xét nào:
Đăng nhận xét