ไม่สามารถเล่นวิดีโอนี้
ขออภัยในความไม่สะดวก
Flutter Layouts Walkthrough: PageView, ListView, GridView, Slivers, CustomScrollView
ฝัง
- เผยแพร่เมื่อ 12 ส.ค. 2024
- Full source code on GitHub: github.com/bizz84/layout-demo...
Highlights:
- Learn how to build layouts with scrollable pages, lists, grids, and other convenience widgets.
- Take this to the next level with slivers, and create a great-looking hero image effect.
00:00 - Intro
01:31 - PageView
02:51 - ListView
04:56 - Slivers
08:23 - Hero Image
15:20 - Nested Lists
16:48 - Summary
Part one of my layout demo is here: • Flutter Layouts Walkth...
Note: I'm using the iOS simulator, but you can open the Android emulator and run the same code.
If you need any help, just ask in the comments. I'll be happy to help.
Feedback and suggestions on new tutorials are very welcome!
This code was written with Flutter Beta 0.4.4, and is tested to work with Dart 2.
Join my FREE email course to become a Flutter expert with the best resources, at your own pace: codewithandrea.com/newsletter/
Want more? Check out all my Flutter courses: 👇👇
codewithandrea.com/courses/
Happy coding!
This demo is now live at this link using Flutter web:
flutter-layouts-demo.web.app/#/
AMAZING WORK Andrea !!! Please, keep continue with these tutorials...
they're sooooooo useful. THE BEST around !
Ale Digitale thank you very much!
@@CodeWithAndrea hi, do you know of any packages or repositories that use an EPG style layout? EPG being like a TV guide layout, channels along one axis and time along the other? I would like to make one, I am trying to do it with a staggered grid but I need diagonal swipe and pinch zoom with fixed headers for the time and location axises. Many thanks
awesome, I watched this lecture to review what I've studied for these past 4days, and I feel like I wish I should've watched this first.
Amazing video series!!! We hope to see more videos in the future! Keep it up Andrea!
Your channel is very helpful for Flutter. Great content! Thank you very much
Thanks for making this, Andrea. Keep your good works!
thank you so much,now i know how to solve the unbounded height error in the nested list view
Thanks for sharing this really good things about material views. I probably use this on my project. Thanks for helping Andrea !
Amazing video and amazing explanation. Keep up with the good work. Thank you for the video!
Andrea you are awesome. Very helpful tutorials for new Flutter Apps Developers.
Just thank you from all community and special in the spanish community, u are great, keep with all this tutorials.
Thank you so much for the excellent summary and comparison!
Thank you for this excellent video!
please create more show case for flutter widgets like animations transitions these videos are great and you explain it like no where else did
You are making a amazing flutter examples... i am inspired from you that how to make a perfect examples...
Thank you so much man. I was having problem with the dynamic tab bar with the corresponding children page. With your video i got an idea and did it.
amazing explanation, thanks
Thank you that’s awesome
Great stuff! Thanks
very helpful thanks !
Again, a great clear lesson. Thank you again.
Kickass video. I have subscribed to you.
Wow I learned so much from you
Thanks a lot 😀😀😀
Awesome video
Awesome 👍🏼
JUST GREAT..!!!!!
Thanks. It’s very usefull video.
Thanks for sharing.
Great video, as always! Will you make a video on responsive layout? You taught me how to design a layout, now I need to learn how to make it look good on all devices :D
That is a good idea. I'll add it to my shortlist of upcoming videos. ;)
Great job👌👌
Thank you for sharing😊
cheang sokkong thank you for watching ;)
Awesome!
Great video
Really nice video. Many thanks.
If I have a widget that is, say, A4 sized, it looks like thee is not yet a widget that will allow the user to pan around V and H. Scrolling seems limited to a single direction.
But your last page makes me wonder if it might be possible... I shall have to play with your code to see if it's feasible...
You are a good teacher: well paced and you point out the gotchas as you go. Very good.
good job
Cool! Subbed
Thanks
Thats Awesome ! can you explain how to add an html / htm / txt/jpg/png ..etc file (offline / hosted data) into a folder/direct and link the same within list or within grid view. might helpful to all user.
u rock man
I'm thinking to buy your course!!
Sure, all discounted courses are at codewithandrea.com/courses
I wanna watch you when you are doing each one of these layout sepreatly
Nice tutorial please can you create a card widget which can scroll horizontal and vertical
It's not easy, but I'll get there 🤞
can you explain how it iterate full list of asset images- assetNames[index % assetNames.length]. and also here, what does % means
Very good. I have a question, how to do a SliverGrid with containers with different hight? I am trying woth SliverGridDelegateWithMaxCrossAxisExtent but dont work well because the space between containers is different depend the height of container
Hi Mr Andrea Bizzotto can you explain (context) and something like for example theme.of(context) i don't mean the theme i mean the kind of the example and when we use these widgets or objects please it is a kind of confusing for me? thanks
Sorry for the late reply. You can watch my video about inherited widget. It's explained there: th-cam.com/video/X8JDPt83c6M/w-d-xo.html
hi can we put a CustomScrollView in a ListView ?
Why SilversExtendList dont have itemCount but it still render? Has it infinity item?
how can i put a home_page.dart with diferent containers instead generating lists? in need to hide the tabs
Hay I have list of GIF Images and I want to show that list with card view. so how can I do it in flutter? If any one know it then please reply me...
please how do make a scrollable popupmenu?
hi andrea! u know how i can put a listview inside a pageview both with same direction(vertical)?
Why do you want to do this? In general it's not a good UX practice to have a scrollable widget inside another widget that scrolls in the same direction.
Your course looks amazing however for some reason all courses use firebase auth, have you done any auth videos on APIs that use rest auth and rest api powered by anything but firebase
I haven't. But the same structure still applies. In a nutshell:
- You can write an Auth class to wrap your REST API auth calls
- you can use http.get with the url and parameters for your REST API
- you can parse the response into a User type that is returned to your calling code.
Could it be possible to have a gridview that its own width is larger than the screen width and be able to scroll it horizontally to see the rest of the grid?
Sure. You can just set the scrollDirection to Axis.horizontal.
@@CodeWithAndrea Thank you very much, I will try it!
Amazing video (y) (y) (y) (y) (y) (y) (y)
Hay i have list of video files and i want to show that list with video thumbnails...so how can I do it in flutter? If anuone know it then please reply me...
You can write a custom list tile class, which internally uses FutureBuilder and the http package to read image data from the Internet. For an intro to FutureBuilder see this: th-cam.com/video/ek8ZPdWj4Qo/w-d-xo.html
well it look's good !! but i downloaded it, and can't build it on ios... help
Hey - sorry for the late reply. What errors do you get?
How to use this when I try to start develop an application? I'm a Beginner.
If you want you can take my Flutter course. Discounted link here: www.udemy.com/course/flutter-firebase-build-a-complete-app-for-ios-android/?couponCode=DART15
i got some errors bro..
Yesterday I asked how widget.variable name (lower case w) can be used. The answer is at stackoverflow.com/questions/50287995/passing-data-to-statefulwidget-and-accessing-it-in-its-state-in-flutter . Where is says: To use recordObject in _RecordPageState, you have to just write widget.objectname like below...
How do you put a working tab bar with a SliverAppBar?
This is my current code github.com/themindstorm/flutter-autohide-tabbar-problem, and I am facing a problem (The README contains a GIF showing it)
497325
Kickass video. I have subscribed to you.
Kickass video. I have subscribed to you.
Kickass video. I have subscribed to you.
Jim Morrison glad you liked it :)