Flutter YouTube Clone UI Tutorial | Apps From Scratch

Подписаться 85 тыс.

Просмотров 65 тыс.

50% 1

» Flutter courses, writeups, and source code on Launch Club 🧠
drp.li/Iq9Bk
» Flutter Job Board 👋
drp.li/T9bLq
Learn Flutter fast by building a RU-vid Clone UI. This Flutter UI tutorial is great for beginners as well as advanced developers who want to improve their mobile app development skills. You'll learn how to use slivers, display the selected video above our bottom navigation bar with the miniplayer package, riverpod to manage the state of our app, and easy UI tips to help you develop a beautiful project.
» Remember to like, subscribe, comment, and share this video!🚨
ru-vid.com?sub_...
» Socials📱
GitHub: github.com/MarcusNg
Twitter: / marcuslng
» Resources 📂
Starter Project: github.com/MarcusNg/flutter_y...
Complete Source Code: github.com/MarcusNg/flutter_y...
Material Design Typography: material.io/design/typography...
Riverpod Package: pub.dev/packages/flutter_rive...
Miniplayer Package: pub.dev/packages/miniplayer
Timeago Package: pub.dev/packages/timeago
» Video Player Tutorials 🎥
Flutter Netflix Clone Responsive UI Tutorial | Web and Mobile
• Flutter Netflix Clone ...
Flutter RU-vid API and Video Player Tutorial
• Flutter RU-vid API an...
» Timestamps 🕒
00:00 Flutter RU-vid Clone UI Introduction
00:54 Download The Starter Project
01:04 Project Walkthrough
04:28 Bottom Navigation Bar
08:26 Stack and Offstage
11:43 Sliver App Bar
15:17 Home Screen and SliverList
16:11 Video Card
24:02 Riverpod Selected Video Provider
27:19 Miniplayer Package
37:38 Video Screen
42:07 Video Info
50:40 Suggested Videos
57:02 Recap
57:31 Thanks for watching 🙏
» Music 🎶
Lakey Inspired ( / lakeyinspired )
Joakim Karud ( / joakimkarud )
#Flutter #FlutterUI #FlutterTutorial

Опубликовано:

4 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 99

@shazplay8878 2 года назад

Perfect tutorial for every flutter dev! Thank you ❣️

@sonmangaking 3 года назад

And we back on this Friday with Marcus 🔥🌶

@LastVoyage 3 года назад

You are the best channel for anything Flutter related! Thank you.

@chipekowasa6571 3 года назад

That was an awesome experience!

@pyzhovskiy 17 дней назад

It's just amazing, thank you!

@dy6697 2 года назад

Great tutorial !!! Many thanks

@chuxville11 3 года назад

Thanks MarcusNg for explaining Slivers...I enjoy all Your tutorials...

@jasonkao5240 3 года назад

we love marcus!

@jeromestsauver 3 года назад

Excellent job on this

@omaryassir5885 3 года назад

Thank you for your content 🙏

@bmsfx Год назад

Just started watching your channel, A+ for content for sure, easy to follow, so i gave you a follow :D. I use GetX though (it does just.. everything), and not riverpod, and just store like selected video in a obs, but beside that, what i find most useful is your though and how you setup your UI, the though process. I know you already made it first and thats why it looks so easy for you.

@syedharis2771 2 года назад

Great Tutorial !

@ginomcfino4639 Год назад

You are the best I love you!

@onyemaanthony 2 года назад

another awesome video kudos to you keep it up i love watching your videos

@funshorts74 Год назад

You are amazing ❤️

@avazxonahmadaliyev3386 Год назад

Thank you bro

@ciandrapancho8716 2 года назад

Thank you master!

@sidheshwar2971 3 года назад

I watched this over 20 times. To build my 5 apps. The content quality is just amazing!

@XooZon 2 года назад

Sir can u help just by genuinely answering Should i make app Is there real earning scope Real time expectations How much u earn estimate

@jasonkao5240 3 года назад

Great video as always

@bompyryadh 3 года назад

What is this language bro .java or paython ? 🙂

@yepitsarif 3 года назад

I love your tutorials.

@jasonkao5240 3 года назад

awwwww

@hirunguyen4522 3 года назад

me with 2 years of exp in Flutter, still watching your video and learn new things. Amazing work!

@chocolate3940 3 года назад

Awesome bro! I mean autobot!

@bompyryadh 3 года назад

@@chocolate3940 What is this language bro .java or paython ? 🙂

@user-bl5qv3jy1l 3 года назад

@@bompyryadh pay for thon?

@navdeepsharma2278 2 года назад

@@bompyryadh Dart

@XooZon 2 года назад

Can u pls tell me how to start with flutter and run faster

@livvyjane7309 3 года назад

thanks a lots bro..👍👍👍

@tommyeagen3763 3 года назад

Great tutorial man, I learned a lot from this and I used Provider instead of Riverpod.

@bompyryadh 3 года назад

What is this language bro .java or paython ? 🙂

@BooleanDev 2 года назад

@@bompyryadh Dart, with Flutter

@jhonbaptist6159 3 года назад

Man you rock!

@flaviobarros8305 3 года назад

This man needs a statue on his honor!

@shashanksm6327 3 года назад

helped a lot

@amitkumardas5650 3 года назад

Again a great tutorial, thanks...just curious about how to hide the bottom nav bar completely while the miniplayer is in full screen mode.

@santoryu4689 3 года назад

Thank you for your great effort in this beautiful design I hope you clone Uber app with flutter and thank you

@slimefunoriginal 3 года назад

Always u are the best

@jorislimonier8508 3 года назад

Awesome video, thanks ! Could you just hot reload a but more often. Sometimes I struggle to figure what does what when you spend a long time without hot reloading (I'm a beginner). Thanks !

@vincent8437 2 года назад

thanks for sharing this awesome flutter videos ....and can you tell me what are the extensions you use for colorize brackets and auto format code

@domino7097 3 года назад

Good day. I liked your lessons. Could you take a lesson on how to make a mobile application on the topic of ecology? For example, the application how to improve the ecology in the place where you live, having good habits, can be done in a playful way. Well, or something else. What do you think? It is on Flutter in the Dart language. After all, the topic of ecology is more relevant than ever, you will help a lot if you do a lesson

@hashankannangara8723 3 года назад

Awsome video 🤘

@jasonkao5240 3 года назад

we love marcus!

@bompyryadh 3 года назад

What is this language bro .java or paython ? 🙂

@cleancodez 3 года назад

This is lit

@tristankluivert197 3 года назад

Great work. How does one making the mini controller drag just like that of RU-vid?

@yona69studio11 3 года назад

if I have it installed on my WordPress and an application with flutter for that dooplay theme would be great

@akhila9413 Год назад

i want to use PodVideoPlayer in miniplayer and also maintain its state like in youtube please can you make a video on how to do that.

@ashishjakhariya1523 2 года назад

Can u connect this with backend admin panel? Laravel or nodejs Not finding any proper tutorials on RU-vid for same UI is excellent and ur explanation was too good that I have built it myself for my feature idea app Just in search of connecting this same with Laravel or nodejs backend with admin panel for easy updation I am completely from non programming field Thank you Will wait for your positive response

@sagar1garg 6 месяцев назад

Great tutorial. Can you also add how to play a list of videos similar to youtube when user is scrolling? How to handle pull to refresh and pagination with video_player. On android loading more than 10 videos result in exoplayer error. Unable to resolve it.

@Manan_K 3 года назад

Great

@LastVoyage 3 года назад

Could you do an "Apps From Scratch - TikTok"?

@mphossible4749 Год назад

I absolutely enjoyed the coding along. I have a question though. Do you have a vide where you add functionality to the UI? Pulling actual videos and playing them in the UI instead of the images ?

@ABDTalk1 Год назад

please tell me how to please please

@fahmimaulana6494 3 года назад

awesome video, how to create that to responsive widget all ?

@ghhduyyi7984 9 месяцев назад

👍👍👍

@adamfaliq8464 2 года назад

Hi Marcus, thanks for the tutorial. Is there a way to prevent the SliverToBoxAdapter from scrolling? When scrolling the videos in the video screen, I just want the SliverList to scroll but the SliverToBoxAdapter to stay at its position. Should I use SliverPersistentHeader ?

@816archer 2 года назад

Hey Marcus, i enjoyed your video. I have a quick question. In Android, when navigating between tabs and you click on the default back button of android its exiting the application. But in youtube it always take you to your previous screen. How can we do that? Can you please explain?

@sokvathanak9166 8 месяцев назад

there's alot of change with riverpod since update can you make video tutorial how to fix error from old version?

@hbibbekir Год назад

how to use that method with the navscreen but also using routes?

@falfit. 3 месяца назад

Hi! Great video here, im originally here to learn how to use the miniplayer package and I was wondering if it was possible to do a different shape for the mini form? Such as a rounded rectangular shape. I tried to find a shape argument but didnt succeed, so I added in the builder a container that does the shape, but the miniplayer has a background which always show. So i added the backgroundColor argument of the miniplayer to Colors.transparent, but after multiple tests, this argument does nothing, I think it only changed the fading color that appears on top of the background widgets when you open the player? I tried overriding the theme too to a transparent color background, but it stills shows a black rectangle under my player. How can i have a rounded rectangle shaped miniplayer and for the background of the miniplayer to be transparent?

@sanghunshin1964 2 года назад

I would like an in-depth lecture on search, it's too difficult

@muneerahamed7918 Год назад

Hai can you help me with how to do the auto play video in the homescreen like the RU-vid

@37bandiko Год назад

Where can i buy a full version of this course?

@wilmeramaya4487 3 года назад

If I also use it but I don't get an application for that topic, it won't be available, it will be great if you made an application with dooplay

@rakeshsinghrawat4408 3 года назад

sir which software you use to create 3d mobile rendering

@harisbashir2719 3 года назад

What software you use to show app in starting of video

@kumimochi 2 года назад

are his courses in his website good?

@devb6828 3 года назад

need eCommerce app 👌

@omjogani 3 года назад

How to get this mockup of Mobile screen? Please @Marcus Ng

@munuelvisaez7743 3 года назад

we please friend Marcus with the dooplay thing

@ghulammurtaza7959 Год назад

This is a great series but I haven't see new video in this series kindly add new videos.

@salvadorchirinos7669 3 года назад

look forward to brother with dooplay please

@swastikthiramdas 6 месяцев назад

i getting error at 25:23 , "the method read isn't defined for the type BuildContext"

@AnilPoudyal 3 года назад

This is awesome tut but when you have to play an actual video there are lots of problem may be due to mini player package. I have been struggling for 3 days now and still have not reached nowhere.

@talhasiddiquixd 2 года назад

Hey Anil. It's the same story here. mini player starts the video from beginning unlike in RU-vid it doesn't continues from the point till it was watched already.! If you have made any progress please let me know

@talhasiddiquixd 2 года назад

Hey Marcus , I am creating a replica of RU-vid using their API's and your video. I faced a problem implementing miniplayer. The video starts from beginning again when miniplayer gets initialized. please reply!

@zanemartini7178 2 года назад

Can't find the link for the starter project.

@santex666 2 года назад

is it possible to load in the videos from the website?

@vPrezn 2 года назад

How you do this animated intro for the app?

@helaolange 3 года назад

How long did it take you to write this project

@robertcyrojas7553 3 года назад

I hope if you do that tutorial Bro by dooplay

@embetronix Год назад

Does it support RTSP URLs?

@saqib399 2 месяца назад

It nearly seems perfect, but it is not working with the real video. If a video is playing and I try to minimize it , then the video starts from the beginning.

@faisalfotoh1909 2 года назад

i hope the videos will play in ui

@julesmercado9894 3 года назад

what extension do you use for autocomplete?

@girishsomani4323 3 года назад

There is a snippet extention in VS I think... Maybe try searching it...

@jatidiri9198 3 года назад

Can you make shopee clone UI?

@mahdyfouad 2 года назад

can any one make an app with the seek bar away from video frame ?

@DANITO285 Год назад

This is possible in kotlin ? Or impossible

@moilywin 7 месяцев назад

can you make the youtube filter clone?😑😑

@abhaytiwari6411 3 года назад

Clone instagram with flutter

@mmm-tl6gq Месяц назад

Subtitles video language

@Aman-mt2kr Год назад

package:flutter_riverpod/flutter_riverpod.dart dont support read anymore

@almzbkv3125 3 года назад

Good day. I liked your lessons. Could you take a lesson on how to make a mobile application on the topic of ecology? For example, the application how to improve the ecology in the place where you live, having good habits, can be done in a playful way. And so on. What do you think? It is on Flutter in the Dart language. After all, the topic of ecology is more relevant than ever, you will help a lot if you do a lesson