Flutter Layout Basics: Row, Column, Stack, Expanded, Container, ListView, GridView
Вставка
- Опубліковано 22 лип 2024
- Build basic Flutter layouts and widgets with the help of Row, Column, Stack, Expanded, Container, ListView, and GridView in Flutter.
Click here to Subscribe to Johannes Milke: ua-cam.com/users/JohannesMilke...
👉 12 Week Flutter Training | heyflutter.com
👉 Flutter Masterclass Courses | heyflutter.com/masterclass
Source Code | github.com/JohannesMilke/layo...
My Courses | heyflutter.com
Follow Newsletter | johannesmilke.com/newsletter
SUBSCRIBE HERE
bit.ly/JohannesMilke
SUPPORT & SPONSOR ME
github.com/sponsors/JohannesM...
RESOURCES
Autofill Services In 5 Minutes Tutorial: • Flutter Tutorial - Aut...
Search & Filter In ListView Tutorial: • Flutter Tutorial - Sea...
App Bar Tutorial: • Flutter Tutorial - App...
Search Bar & Search Delegate Tutorial: • Flutter Tutorial - Sea...
TextField Tutorial: • Flutter Tutorial - Tex...
Form & TextFormField Tutorial: • Flutter Tutorial - How...
Quiz App UI Tutorial: • Flutter Tutorial - 1/2...
Todo App UI Tutorial: • Flutter Tutorial - 1/2...
Shop UI Tutorial: • Flutter Tutorial - 1/3...
Onboarding UI Screen Tutorial: • Flutter Tutorial - Onb...
Light & Dark Theme Tutorial: • Flutter Tutorial - Flu...
Showcase & Highlight Widgets Tutorial: • Flutter Tutorial - Sho...
Sticky Headers In ListView Tutorial: • Flutter Tutorial - Sti...
Selectable DataTable Tutorial: • Flutter Tutorial - Sel...
Safe Area VS App Bar Tutorial: • Flutter Tutorial - Saf...
Buttons 2.0 Tutorial: • Flutter Tutorial - New...
TIMELINE
0:00 Introduction Layout Basics
0:21 Create Row Widget
0:45 Row Main Axis Size
1:03 Row Main Axis Alignment
2:33 Row Cross Axis Alignment
3:00 Create Column Widget
3:50 Create Stack Widget
4:42 Stack Alignment
5:21 Stack Positioned Widget
6:43 Stack Clip Behaviour
7:18 Create Expanded Widget
8:45 Create Container Widget
8:51 Container Padding
9:04 Container Margin
9:28 Create ListView Widget
9:37 Create Horizontal ListView Widget
9:51 Create Horizontal GridView
10:14 Create Vertical GridView
10:34 Aspect Ratio
SHARE | SUBSCRIBE | LIKE FOR MORE VIDEOS LIKE THIS
*********
SOCIAL MEDIA: Follow Us :-)
Twitter | / heyflutter_
Linkedin | / heyflutter
LEARN MORE
SOURCE CODE | github.com/JohannesMilke
ARTICLES | / johannesmilke
PLAYLISTS
All Flutter Videos | • Flutter Tutorial - Flu...
Widgets - Flutter | • Flutter Tutorial - Flu...
Plugins - Flutter | • Flutter Tutorial - Flu...
Animations - Flutter | • Flutter Tutorial - Tra...
Designs - Flutter | • Flutter Tutorial - Flu...
Firebase - Flutter | • Flutter Tutorial - Pag...
State Management - Flutter | • Flutter Tutorial - Riv...
CREDITS
Copyright song "Corporate Technology" by scottholmesmusic.com
#Flutter #Tutorial #JohannesMilke
LIKE & SHARE & ACTIVATE THE BELL
Thanks For Watching :-)
bit.ly/JohannesMilke - Наука та технологія
For a more detailed overview of all these layout widgets watch the tutorials below:
👉 12 Week Flutter Training from Newbie to Expert: heyflutter.com
Source Code: github.com/JohannesMilke/layout_basics_example
Column Layout Basics Tutorial: ua-cam.com/video/nW9pAyDs-wE/v-deo.html
Row Layout Basics Tutorial: ua-cam.com/video/lY5GtNkvyhM/v-deo.html
Stack Layout Basics Tutorial: ua-cam.com/video/JZRBHY2xgu4/v-deo.html
Row Tutorial: ua-cam.com/video/fjcBkwguyOg/v-deo.html
Column Tutorial: ua-cam.com/video/sydzWl_EMFk/v-deo.html
Stack Tutorial: ua-cam.com/video/F12GIPdd32E/v-deo.html
Expanded Tutorial: ua-cam.com/video/XhHkRTXQ2cA/v-deo.html
Container Tutorial: ua-cam.com/video/gfxlI2UxTgo/v-deo.html
ListView Tutorial: ua-cam.com/video/bJGRmldntOI/v-deo.html
GridView Tutorial: ua-cam.com/video/2MVXP6nNzoQ/v-deo.html
You are one of the most consistent flutter youtubers out there. I appreciate you effort and I just love your innocence even though I don't know you. I however wish you structured your videos properly in a playlist. Coz it's hard to follow as a beginner.
@@HeyFlutter wow thx a lot bro. It helps me as a beginner
Thank you, Mr Riyality! 🙂 This video is only a quick walkthrough of the widgets to give an overview, if you want to learn in detail about each widget then watch these tutorials below:
Column Layout Basics Tutorial: ua-cam.com/video/nW9pAyDs-wE/v-deo.html
Row Layout Basics Tutorial: ua-cam.com/video/lY5GtNkvyhM/v-deo.html
Stack Layout Basics Tutorial: ua-cam.com/video/JZRBHY2xgu4/v-deo.html
Row Tutorial: ua-cam.com/video/fjcBkwguyOg/v-deo.html
Column Tutorial: ua-cam.com/video/sydzWl_EMFk/v-deo.html
Stack Tutorial: ua-cam.com/video/F12GIPdd32E/v-deo.html
Expanded Tutorial: ua-cam.com/video/XhHkRTXQ2cA/v-deo.html
Container Tutorial: ua-cam.com/video/gfxlI2UxTgo/v-deo.html
ListView Tutorial: ua-cam.com/video/bJGRmldntOI/v-deo.html
GridView Tutorial: ua-cam.com/video/2MVXP6nNzoQ/v-deo.html
Great! many thanks Man!
This app itself is a masterpiece!
Appreciated. I've already a good grip on these things but I listen to it again because I know you know it better. and the way you explain is always been awesome and decent. 💕💕✔😎
Have a great day johannes,
Hi Johannes, were you a teacher before? well this video explains Flutter things best I have ever seen before, thanks for your quality videos everyday, I do not miss them for anything, I am from South Africa, thanks again
Awesome, thanks a lot, Pierre! 🙂 Nope, you simply get better with every video, this is similar to other areas in life. Simply watch my first video ever and you would be shocked 😉 ua-cam.com/video/v_90gT6v6ts/v-deo.html
Excellent video! Thank you so much! Explaining all so perfectly and intuitive for a newby like me.
Glad it was helpful, @drancerd 😀
Thank you @Johannes Milke
Awesome explanation
Interesting... I saw this on Andrea Bizzoto video a year ago.
Thank you, Neto! 🙂 Yep, this tutorial here is an updated version which handles also more and different basic layouts that I think are relevant to every Flutter developer.
Amazing 🤯
Great video dude, you just build a app for us to understand easily, huge respect for you bro, keep making videos. And, I want a full flutter Course from you
Awesome, thanks a lot, Manik! 🙂👍I have only courses for experienced Flutter developers right now who want to learn how to reach the next level: johannesmilke.teachable.com/p/home
For all beginners of Flutter etc. this Flutter playlist will help you to learn more about Flutter: ua-cam.com/video/yYxueTNIDlA/v-deo.html
Спасибо!
i really do love your voice!
Amazing Johan! We need some backend knowledge too.
@@HeyFlutter Thanks brother. You're like a Stream builder
Thank you, Raj! 🙂Simply watch my tutorials below for learning more about creating backends for Flutter:
0. Firebase CRUD Tutorial: ua-cam.com/video/EV2DyrKOqrY/v-deo.html
1. Build A Chat App Firebase 1: ua-cam.com/video/wHIcJDQbBFs/v-deo.html
2. Build A Chat App Firebase 2: ua-cam.com/video/7UcM6Y12LEk/v-deo.html
3. Build A Chat App Firebase 3: ua-cam.com/video/ojBSygkVaNo/v-deo.html
4. Build A Chat App StreamChat 1: ua-cam.com/video/8KBt9R3Zuw0/v-deo.html
5. Build A Chat App StreamChat 2:
ua-cam.com/video/zPTaYBtGUZw/v-deo.html
6. Build A Chat App StreamChat 3:
ua-cam.com/video/zjfJaicmLSI/v-deo.html
Hi Johannes, Do you develop on a Mac because you have to? If you had a choice, which O/S would you prefer to use?
Thank you, Paul! 🙂Simply use the operating system that you like the most! For Flutter development a Mac is better if you also want to develop for iOS apps since iOS development cannot be done with Windows & Linux etc.
helo sir , ummm the flutter webaap that you r using to show the basics,the row and column and their alignmens and all ,sir can u olease share that link too
Thanks in advance
@@HeyFlutter thanks a lot sir! your contents are great! is there a way Tht i could get in touch with you sir?
Thanks, jeremi ponnachan! 🙂 In this tutorial, we have created a Flutter Mobile App. You could always find the source code of my video projects within the description: github.com/JohannesMilke/layout_basics_example