Flutter Tutorial For Beginners in 13 Hours

In this Flutter Course, we are going to learn to build apps for multiple platforms like Android, iOS, MacOS, Web & Desktop from a single codebase using the Flutter Framework.

Timestamps:
(00:00:00) Introduction
(00:01:23) Installing Flutter
(00:10:47) Installing Android Studio & Configuring for Android
(00:15:25) Installing Xcode & Configuring for iOS
(00:17:35) Installing VS Code
(00:19:12) Exploring VS Code
(00:23:29) Creating Flutter Project
(00:25:15) Exploring Folders Flutter Creates
(00:34:54) Increasing Font Size in VS Code
(00:35:48) Highlighting Code in VS Code
(00:37:25) Running Flutter App
(00:49:59) Writing First Flutter Code!
(00:54:06) runApp function in Flutter
(00:56:12) What are Widgets?
(00:56:58) Text Widget
(01:13:12) Types of Widgets
(01:15:10) What is State in Flutter
(01:16:36) What is Stateless Widget in Flutter?
(01:29:31) Material & Cupertino Design
(01:31:43) What is MaterialApp in Flutter?
(01:35:48) What is Scaffold in Flutter?
(01:40:00) Center Widget
(01:44:57) Widget Tree
(01:47:38) Splitting & Extracting Widgets
(01:53:07) What is BuildContext?
(01:55:56) Importing Files & Magic of Flutter Extension
(01:58:23) Relative Importing
(02:01:05) Breaking Down The Currency Converter App
(02:01:49) Column Widget
(02:10:28) ColoredBox Widget
(02:11:19) Color Class
(02:15:11) TextStyle
(02:22:40) Colors
(02:25:07) TextField Widget
(03:07:18) Why Build Function Should Contain NO Complex Tasks
(03:08:15) Changing Keyboard Type For TextField Input
(03:12:30) Padding Widget
(03:19:09) Container Widget
(03:20:19) Padding vs Margin - The Difference
(03:26:14) TextButton Widget
(03:31:53) Print Statement & Warnings (Flutter Lints)
(03:37:08) TextButton Widget contd.
(03:51:47) ElevatedButton Widget
(03:58:57): Shortening the ButtonStyle!
(04:01:44): AppBar Widget
(04:09:05) Understanding the need of StatefulWidget
(04:27:04) StatefulWidget
(04:41:56) Build Function Can Be Called How Many Times?
(04:44:29) setState
(04:51:59) Handling Edge Cases
(04:58:37) CupertinoApp & iOS Styled Widgets
(05:15:32) initState and dispose
(05:18:23) Recap & Widgets LifeCycle
(05:28:41) Weather App Demo
(05:29:54) Analysing the default Flutter Code
(05:37:21) Weather App Setup
(05:45:36) GestureDetector and InkWell Widget
(05:48:08) IconButton Widget
(05:49:05) Planning the Body of Weather App using PlaceHolder Widget
(05:53:10) Card Widget
(06:04:23) ClipRRect Widget
(06:05:49) Backdrop and ImageFilter Widget
(06:11:46): Text For Weather App
(06:16:02) Row Widget
(06:25:37) SingleChildScrollView Widget
(06:31:21) Working on Additional Info Section
(06:42:55) Passing Arguments Using Constructor
(06:52:50) http package in Flutter
(06:56:00) OpenMapWeather API
(07:02:45) Handling Future in initState
(07:05:53) Extracting Data from API in Flutter
(07:19:10) Displaying Loading Indicator
(07:24:43) FutureBuilder Widget
(07:37:16) Extracting Data From AsyncSnapshot
(07:48:13) for loop in Flutter UI
(08:08:11) Date Formatting using intl
(08:22:19) Switching Themes
(08:23:23) Layout Principle In Flutter Explained
(08:28:45) Flutter Behind The Scenes, 3 Trees & BuildContext
(08:51:03) Shopping App Demo
(08:52:20) Creating Shop App Project
(08:54:46) Adding Custom Fonts
(09:06:44) Theming, Color Scheme
(09:10:11) Creating a Header (SafeArea Widget)
(09:17:14) Expanded Widget in Column (For TextField Widget)
(09:32:04) Chip Widget
(09:48:05) How Theming Works Behind the Scenes (InheritedWidget)
(09:55:23) Selecting Filter contd…
(09:56:28) Adding Images and Product Dummy Data
(10:03:00) Displaying Products List on Home Page (Image Widget)
(10:27:39) Designing Product Details Page (Spacer and Flex Widget)
(10:55:21) Navigation & Routing
(11:06:08) How Navigator Works Behind The Scenes? (And State Management)
(11:16:47) BottomNavigationBar Widget
(11:25:58) IndexedStack Widget
(11:28:47) Designing Cart Page (ListTile Widget)
(11:39:26) State Management with Provider, SnackBar
(12:08:08) Dialogs in Flutter
(12:17:06) Provider Extension Methods on BuildContext
(12:20:03) Provider State Management Recap
(12:26:43) Responsive UI in Flutter (GridView, MediaQuery)
(12:50:03) InheritedWidget vs InheritedModel
(12:52:51) Responsive UI in Flutter (LayoutBuilder Widget)
(13:00:49) MediaQuery vs LayoutBuilder
(13:04:12) Challenge: Make Weather App Responsive
(13:04:36) Flutter Widgets Sizing Summary
(13:05:41) Conclusion and Next Steps

[RivaanRanawat]

Timestamps:
(00:00:00) Introduction
(00:01:23) Installing Flutter
(00:10:47) Installing Android Studio & Configuring for Android
(00:15:25) Installing Xcode & Configuring for iOS
(00:17:35) Installing VS Code
(00:19:12) Exploring VS Code
(00:23:29) Creating Flutter Project
(00:25:15) Exploring Folders Flutter Creates
(00:34:54) Increasing Font Size in VS Code
(00:35:48) Highlighting Code in VS Code
(00:37:25) Running Flutter App
(00:49:59) Writing First Flutter Code!
(00:51:22) Importing Packages and material.dart
(00:54:06) runApp function in Flutter
(00:56:12) What are Widgets?
(00:56:58) Text Widget
(01:13:12) Types of Widgets
(01:15:10) What is State in Flutter
(01:16:36) What is Stateless Widget in Flutter?
(01:29:31) Material & Cupertino Design
(01:31:43) What is MaterialApp in Flutter?
(01:35:48) What is Scaffold in Flutter?
(01:40:00) Center Widget
(01:44:57) Widget Tree
(01:47:38) Splitting & Extracting Widgets
(01:53:07) What is BuildContext?
(01:55:56) Importing Files & Magic of Flutter Extension
(01:58:23) Relative Importing
(02:01:05) Breaking Down The Currency Converter App
(02:01:49) Column Widget
(02:10:28) ColoredBox Widget
(02:11:19) Color Class
(02:15:11) TextStyle
(02:22:40) Colors
(02:25:07) TextField Widget
(03:07:18) Why Build Function Should Contain NO Complex Tasks
(03:08:15) Changing Keyboard Type For TextField Input
(03:12:30) Padding Widget
(03:19:09) Container Widget
(03:20:19) Padding vs Margin - The Difference
(03:26:14) TextButton Widget
(03:31:53) Print Statement & Warnings (Flutter Lints)
(03:37:08) TextButton Widget contd.
(03:51:47) ElevatedButton Widget
(03:58:57): Shortening the ButtonStyle!
(04:01:44): AppBar Widget
(04:09:05) Understanding the need of StatefulWidget
(04:27:04) StatefulWidget
(04:41:56) Build Function Can Be Called How Many Times?
(04:44:29) setState
(04:51:59) Handling Edge Cases
(04:58:37) CupertinoApp & iOS Styled Widgets
(05:15:32) initState and dispose
(05:18:23) Recap & Widgets LifeCycle
(05:28:41) Weather App Demo
(05:29:54) Analysing the default Flutter Code
(05:37:21) Weather App Setup
(05:45:36) GestureDetector and InkWell Widget
(05:48:08) IconButton Widget
(05:49:05) Planning the Body of Weather App using PlaceHolder Widget
(05:53:10) Card Widget
(06:04:23) ClipRRect Widget
(06:05:49) Backdrop and ImageFilter Widget
(06:11:46): Text For Weather App
(06:16:02) Row Widget
(06:25:37) SingleChildScrollView Widget
(06:31:21) Working on Additional Info Section
(06:42:55) Passing Arguments Using Constructor
(06:52:50) http package in Flutter
(06:56:00) OpenMapWeather API
(07:02:45) Handling Future in initState
(07:05:53) Extracting Data from API in Flutter
(07:19:10) Displaying Loading Indicator
(07:24:43) FutureBuilder Widget
(07:37:16) Extracting Data From AsyncSnapshot
(07:48:13) for loop in Flutter UI
(07:57:30) ListView.builder Widget
(08:08:11) Date Formatting using intl
(08:22:19) Switching Themes
(08:23:23) Layout Principle In Flutter Explained
(08:28:45) Flutter Behind The Scenes, 3 Trees & BuildContext
(08:51:03) Shopping App Demo
(08:52:20) Creating Shop App Project
(08:54:46) Adding Custom Fonts
(09:06:44) Theming, Color Scheme
(09:10:11) Creating a Header (SafeArea Widget)
(09:17:14) Expanded Widget in Column (For TextField Widget)
(09:32:04) Chip Widget
(09:48:05) How Theming Works Behind the Scenes (InheritedWidget)
(09:55:23) Selecting Filter contd…
(09:56:28) Adding Images and Product Dummy Data
(10:03:00) Displaying Products List on Home Page (Image Widget)
(10:27:39) Designing Product Details Page (Spacer and Flex Widget)
(10:55:21) Navigation & Routing
(11:06:08) How Navigator Works Behind The Scenes? (And State Management)
(11:16:47) BottomNavigationBar Widget
(11:25:58) IndexedStack Widget
(11:28:47) Designing Cart Page (ListTile Widget)
(11:39:26) State Management with Provider, SnackBar
(12:08:08) Dialogs in Flutter
(12:17:06) Provider Extension Methods on BuildContext
(12:20:03) Provider State Management Recap
(12:26:43) Responsive UI in Flutter (GridView, MediaQuery)
(12:50:03) InheritedWidget vs InheritedModel
(12:52:51) Responsive UI in Flutter (LayoutBuilder Widget)
(13:00:49) MediaQuery vs LayoutBuilder
(13:04:12) Challenge: Make Weather App Responsive
(13:04:36) Flutter Widgets Sizing Summary
(13:05:41) Conclusion and Next Steps

[AryanJha-dg]

//for myself
(00:00:00) Introduction
(00:01:23) Installing Flutter
(00:10:47) Installing Android Studio & Configuring for Android
(00:15:25) Installing Xcode & Configuring for iOS
(00:17:35) Installing VS Code
(00:19:12) Exploring VS Code
(00:23:29) Creating Flutter Project
(00:25:15) Exploring Folders Flutter Creates
(00:34:54) Increasing Font Size in VS Code
(00:35:48) Highlighting Code in VS Code
(00:37:25) Running Flutter App
(00:49:59) Writing First Flutter Code!
(00:51:22) Importing Packages and material.dart
(00:54:06) runApp function in Flutter
(00:56:12) What are Widgets?
(00:56:58) Text Widget
(01:13:12) Types of Widgets
(01:15:10) What is State in Flutter
(01:16:36) What is Stateless Widget in Flutter?
(01:29:31) Material & Cupertino Design
(01:31:43) What is MaterialApp in Flutter?
(01:35:48) What is Scaffold in Flutter?
(01:40:00) Center Widget
(01:44:57) Widget Tree
(01:47:38) Splitting & Extracting Widgets
(01:53:07) What is BuildContext?
(01:55:56) Importing Files & Magic of Flutter Extension
(01:58:23) Relative Importing
(02:01:05) Breaking Down The Currency Converter App
(02:01:49) Column Widget
(02:10:28) ColoredBox Widget
(02:11:19) Color Class
(02:15:11) TextStyle
(02:22:40) Colors
(02:25:07) TextField Widget
(03:07:18) Why Build Function Should Contain NO Complex Tasks
(03:08:15) Changing Keyboard Type For TextField Input
(03:12:30) Padding Widget
(03:19:09) Container Widget
(03:20:19) Padding vs Margin - The Difference
(03:26:14) TextButton Widget
(03:31:53) Print Statement & Warnings (Flutter Lints)
(03:37:08) TextButton Widget contd.
(03:51:47) ElevatedButton Widget
(03:58:57): Shortening the ButtonStyle!
(04:01:44): AppBar Widget
(04:09:05) Understanding the need of StatefulWidget
(04:27:04) StatefulWidget
(04:41:56) Build Function Can Be Called How Many Times?
(04:44:29) setState
(04:51:59) Handling Edge Cases
(04:58:37) CupertinoApp & iOS Styled Widgets
(05:15:32) initState and dispose
(05:18:23) Recap & Widgets LifeCycle
(05:28:41) Weather App Demo
(05:29:54) Analysing the default Flutter Code
(05:37:21) Weather App Setup
(05:45:36) GestureDetector and InkWell Widget
(05:48:08) IconButton Widget
(05:49:05) Planning the Body of Weather App using PlaceHolder Widget
(05:53:10) Card Widget
(06:04:23) ClipRRect Widget
(06:05:49) Backdrop and ImageFilter Widget
(06:11:46): Text For Weather App
(06:16:02) Row Widget
(06:25:37) SingleChildScrollView Widget
(06:31:21) Working on Additional Info Section
(06:42:55) Passing Arguments Using Constructor
(06:52:50) http package in Flutter
(06:56:00) OpenMapWeather API
(07:02:45) Handling Future in initState
(07:05:53) Extracting Data from API in Flutter
(07:19:10) Displaying Loading Indicator
(07:24:43) FutureBuilder Widget
(07:37:16) Extracting Data From AsyncSnapshot
(07:48:13) for loop in Flutter UI
(07:57:30) ListView.builder Widget
(08:08:11) Date Formatting using intl
(08:22:19) Switching Themes
(08:23:23) Layout Principle In Flutter Explained
(08:28:45) Flutter Behind The Scenes, 3 Trees & BuildContext
(08:51:03) Shopping App Demo
(08:52:20) Creating Shop App Project
(08:54:46) Adding Custom Fonts
(09:06:44) Theming, Color Scheme
(09:10:11) Creating a Header (SafeArea Widget)
(09:17:14) Expanded Widget in Column (For TextField Widget)
(09:32:04) Chip Widget
(09:48:05) How Theming Works Behind the Scenes (InheritedWidget)
(09:55:23) Selecting Filter contd…
(09:56:28) Adding Images and Product Dummy Data
(10:03:00) Displaying Products List on Home Page (Image Widget)
(10:27:39) Designing Product Details Page (Spacer and Flex Widget)
(10:55:21) Navigation & Routing
(11:06:08) How Navigator Works Behind The Scenes? (And State Management)
(11:16:47) BottomNavigationBar Widget
(11:25:58) IndexedStack Widget
(11:28:47) Designing Cart Page (ListTile Widget)
(11:39:26) State Management with Provider, SnackBar
(12:08:08) Dialogs in Flutter
(12:17:06) Provider Extension Methods on BuildContext
(12:20:03) Provider State Management Recap
(12:26:43) Responsive UI in Flutter (GridView, MediaQuery)
(12:50:03) InheritedWidget vs InheritedModel
(12:52:51) Responsive UI in Flutter (LayoutBuilder Widget)
(13:00:49) MediaQuery vs LayoutBuilder
(13:04:12) Challenge: Make Weather App Responsive
(13:04:36) Flutter Widgets Sizing Summary
(13:05:41) Conclusion and Next Steps

[brawlstarsac]

To be honest, the best beginner course for flutter. It never felt like a 13 hours and you were explaining all the stuffs why there are present and what would they do and what if it is removed which is not explained by most of the YouTubers. A huge respect for your hardwork for making this video. It helped me to understand the basics and I don't how to thank you. Keep making videos . Huge love❤ brother

[muhammadjavedrafique]

i have almost 2 years of experience in flutter.. but your content is always worthy to watch . so am watching this as i know the just F of Flutter

[mailidfordevtesting]

I took a week to finish this course Rivaan, I already had some experience in flutter which I got by building apps by trial and error method but I didn't had thorough understanding of basics, which this course has cleared. Thank you for this course.
I do watch Vandad's videos but your videos and things you put are at some other level.

Have been recommending your videos to all my fellow colleagues and juniors who are working with flutter.

Thanks again ✌️

[snistr]

This is one of the best coding tutorials I've seen on YouTube.
I gave up on learning Flutter a year or so ago because it looked overwhelming and I didn't understand it, and no instructor would explain things further. Then I decided to pick up learning it again and found this video. This video explains everything in so much detail, such as what Flutter concepts are (like widgets, state, buildContext), what they do, why you need them, why they're named that way, what happens if you remove/alter them, etc. Few paid courses even go into this depth and explain things this well.

[satdevlpr]

Thanks millions on behalf of all beginners.. your channel deserves 100K.... Hope will attain soon

[khalidahmed]

3:06:45 if you are facing an error because using final key word -> use const instead and it will works perfectly without any issue
when you create a border variable that contains a widget property to re use it without repetitions

[arromero]

7 months ago I finished the Dart course and today I finished this course because I combined this one with the official docs that's why It took me too much time and I came here to say THANK YOU for teaching Flutter and for your content. 🙇‍♂

[mageshyt]

"I appreciate your work, Rivaan Ranawat! Thank you for creating high-quality tutorials. I am currently building a Twitter clone with your guidance and I am grateful for your help. Keep up the good work!"

[abhijeetgautam]

Hey Rivaan
I'm absolutely grateful to you for curating a course worth 12 freaking hours 🔥
I have been a fan of your work.

I would request you to provide timestamps/chapters for easy navigation of the video.

Also, I'd like to know if you are coming up with a backend course, teaching from the very basics to advanced (preferably NodeJS). The tutorial videos touch upon a specific aspect of the backend and not the foundations.

Thanx again ❤️

[eggnotcracked]

I don't even know what flutter is but I just know that this guy has put in a lot of effort to make this video.
Keep it up👍

[AbdulAlim-skub]

better than so many paid course!!!
Rivaan Tutorial Paid course
Thank you veryyy much for this..

[AzamKhan-bbxg]

This Guy is Genius i have learnt a lot from him and also i am member of his Udemy Courses.

[mazenalsakkaf]

Yo, Rivaan, this course is straight fire! 🔥🔥🔥 I've learned so much from it. It's way better than any paid course I've seen. You're a total legend for breaking down complex topics in such a simple way. Keep up the amazing work!

[AfricanGhost]

Your dart tutorial is exceptional
Been waiting for this for so long
Thank you so much Rivaan

[borisgolubovic]

Just finished the video and I have to give a shoutout to the educator and potential viewers:

- The best teacher! 🌟
- Fantastic effort in explaining everything with such detail!
- Keep up the great work; I hope we get to collaborate on a project someday!
- Thank you for generously sharing your knowledge!

P.S. Flutter has me adding commas everywhere – because just like in coding, nothing's ever truly finished; there's always another widget to consider! 😄

[sluvhsz]

I'm new to flutter, and you sir just made my life simple, hope to see more from you sir

[abdulaleem]

Thank you Rivaan🥰I have Completed this course in 6 months because I am a beginner. lots of things to learn from you...

[riteshnaidu]

Dear Rivaan,

I hope this message finds you well!
How about creating a separate video about the latest video player dependency in Flutter? 📹📱 This tutorial could be immensely helpful for developers looking to enhance their Flutter apps with seamless video playback. Your expertise and engaging teaching style would undoubtedly make it an incredible resource. Looking forward to your amazing content! 🎬🔥

Best regards,
Ritesh