Master Scroll Animations in Flutter
Вставка
- Опубліковано 23 лип 2024
- Flutter Slivers Explanation?
Flutter Slivers Tutorial?
This video goes over everything you need to know to build a Sliver from scratch to give you some great scrolling effects.
00:00 - What is Flutter Sliver?
00:31 - What are Slivers used for in Flutter?
01:00 - How do Flutter Slivers Render?
01:39 - Sliver Types in Flutter
02:20 - Code a Sliver from Scratch
03:41 - Understand Sliver Layouts in Flutter
04:48 - Use a Sticky Header in Flutter
Let's work together 👉 calendly.com/danemackier/1-on... - Наука та технологія
I can see that the new videos topic can be more advanced and lesser known even to seasoned flutter developers, loving it! 😍💯
Yes yes! Way more advanced
Smooth animations, nice work!
Eyooooo you watched Jeff!! Thank you 🤩
Awesome video! Aesthetic design, smooth animations, good explained. Keep it up! :)
Thank you, I appreciate the great comment.
Fireship and You are GODs. Thank both of you for the quality content.
You are very welcome, thanks for watching and leaving a comment.
Very clear as always! 👏
🥳🙌 Awesome! It was a difficult concept to break down. didn't want to make it too complex.
This is astonishingly a good animation WOW! good job buddy
Thank you, thank you! And thanks for leaving a comment 😇
Good to learn more about Slivers! One of my weakness 😅😁
And animations are sleek!! 👌👌👌
Haha, I think it's most Flutter dev's weaknesss, but it opens the door up to some great looking UI if it's understood.
Oh wow, the voice is clear and the animation is wow.
I'm happy to hear the audio sounds better 😁 and thank you. We try to keep the videos interesting.
Short or not
Well explained in details.
You are a pro ❤️❤️❤️❤️
Much appreciated. I'm very happy to hear that.
Hi, thanks for this explanation! Additionally, in a scenario where I've multiple sticky slivers how can I only show single sticky sliver at a time and push (or pull) away rest of them.
Edit: I'm also getting this error: "The following assertion was thrown during performLayout():
SliverGeometry has a paintOffset that exceeds the remainingPaintExtent from the constraints.".
I've checked few times that I've copied correctly, tho what's the use of "myCurrentConstraints" which wasn't used?
that was simply to indicate that it's your current constraints.
In terms of multiple slivers. This video shows you how everything works, you'll have to understand what's in this video and then use that to implement whatever solution you're looking at doing.
best as always
wooohoooooo! That's great to hear. Thank you.
There are so many things, I'll need to start reading and playing in vs code
You should! It's a magical tool to use :D
Needed this! hahah thank you.
You're very welcome. I'm happy I can help shed some light on the Sliver concepts.
@@FilledStacks I have a question about something quite advanced mind if i send you an email? Just need some advice!
Now we cooking 🔥🔥
Yyyeeaaaaahhh!! 🥳😎
I love this topic so much but how can I make the jelly scroll and parallex effect when you only showed us the the app bar sticking only we can create that sticky effect using sliver list and without doing all the rendering code you showed. I’m very confused please help me understand how I can make those two effects
Hey, I showed you how the displacement and the modifications work. You can use the transform widget and skew the list depending on the velocity it's moving.
You're amazing 🤙
You are the amazing one with these animations!!
This was super helpful. Question: How do you identify the indices of the item that are currently visible? I want to fire off an event tracker when a particular item is currently visible on the screen on a long list of scrollable items. Is this even possible?
Yes, you can do that.
There's a few package that do it.
Most of them use a combination of the offset + itemSize + listBounds to manually calculate if the item is available.
The offset will tell you when an item is off screen at the scrolling direction end.
The itemSize can be used to understand when that item has left the screen.
The listBounds can be used to determine when an item has entered the screen visibility.
This video is 2 years old so I think there might be additional properties you can explore.
Check out the source of some of the "visibilty packages" and see what they do in the latest Flutter.
Love the cheer/applause at 5:14 :D
Thank you for noticing 😆 gotta have some fun with the videos. It's been becoming a chore, but now it's fun again 😁
That is wow 🔥🔥🔥
Thanks Aymen! happy I can still impress 😉
Hello. Great to see you upload such amazing content.
I have a questing that Viewmodel Builder returns a Widget so we can't use it directly where we want to add slivers. So can there be any way that ViewModelBuilder return Sliver instead of a regular widget?
Hey, you can use it directly :D You can Wrap it in a SliverToBoxAdapterClass and it will wrap it in a sliver and show it in the custom scroll view.
@@FilledStacks great. I will surely check and let you know.
@@FilledStacks I used SliverToBoxAdapter but as I expected, I lost the scrolling functionality. Now the list is not able to scroll.
You want a lost inside of a list? You'll have to use a SliverList.
How do I make it so that if there's second or more StickyHeader, it pushes the existing StickyHeader?Only one StickyHeader on the screen.
Hey, I don't know the exact code for that but there's a few packages that does it. Inspect their code and you'll see. Most likely you need to identify "significant headers" and when 1 gets to the same position as the other you adjust both their positions until the one is out of the screen. The same thing in reverse.
Would you please post video on parallax effect on scroll animation as well. Thanks
I don't think I'll do a full video on that implementation since there are multiple packages thay provide the functionality.
Thank you soo much, I wonder where these details and content come from
Hey, you're very welcome. It comes from my brain haha. I research and then understand and then teach it.
Great.
Very informative video.
You may do a detailed videos on customizing the widgets with renderer please.
Awaiting for more videos with bit more details on how do implement. 👍
I'm happy to hear that you found it useful. Thank you for the idea, that's definitely something that I'd like to make a video about in the future.
@@FilledStacks eagerly waiting. ❤️
Dude, how do you make your presentation? I’m working on my own channel. It’ll help me a ton.
This is all done in After effects. Basic translation animations with easing curves that make it look good.
@@FilledStacks thanks a ton dude! You’re bit of an inspiration.
@@sciency_stuff That's great to hear. Happy to add a bit of inspiration to anyone's journey.
Nice.
Thank you! I appreciate it.
Great content 👍🏻
I have one question, can you make it work like Sticky position in CSS
So when it scrolls up and down,it should get stick to top and bottom
Yes, you use max of (currentOffset, 0). This means when it gets to 0 and offset goes to negative value, then 0 will always be used and your list item will always draw at the top.
@@FilledStacks ua-cam.com/users/shortsHk2Uvm0X2mQ?feature=share
I want this kind of sliver behaviour, is it possible in flutter?
What did you use to animate the first part of the video? The texts, and everything? Great work by the way!
Adobe Aftereffects is what I think the editor used. And thank you. I appreciate it, we put a lot of effort into it.
@@FilledStacks Thank you!
Dan which software did you use for those smooth animations? great work :)
Hey Mart, This is done in Adobe after effects, but can be done in any motion GFX software like Davinci Resolve. They also have a great motion GFX system.
@@FilledStacks After effects takes lot of time, i tried it once. But i guess it depends on your expertise :)
Yes 😁 It does take a lot of time.
Awesome stuff! ❤️. Btw do you plan to make tutorials on flutter render and widget building procedure? I mean how they work behind the scenes? Cheers ☺️
Hey hey, thank you. I appreciate the comment and yes I do. That's something that I'd like to cover.
Thank you 💟
I used your code and my StickySliver's child was a row consisting buttons and in the sticky position, click events just doesn't work. I hope you've any solution for that. Log shows nothing.
I would never do that, in the past I pinned comments to have a discussion in it. Maybe there was language in there that youtube blocked out, I don't get all the comments that are posted, some go in to a review bucket that I rarely look at.
@@FilledStacks It is deleted as I can't see it in My comments history and I'm no kid to write some "language" there. It was a highly professional comment. Nonetheless, the issue is at the sticky position when scrolled, the sticky header becomes unclickable. I used your code and my StickySliver's child was a row consisting buttons and in the sticky position, click events just doesn't work. I hope you've any solution for that.
@@lalitfauzdar3873 Makes sense to think that. But I've never deleted a comment since starting my youtube channel. Regardless of that,
Flutter uses a hit test to fire the gesture detector. It wont first if that fails.
@@FilledStacks No issues I've updated my comment. Thanks for your time, Is there any solution for this? I posted this on StackOverFlow day before yesterday but no responses so far.
@@FilledStacks I had to file an issue on the official repo, they've finally accepted it as a bug after reproducing it. You can look for it, if you want to, on Flutter's repo, issue #106261.
🔥
Yeah yeah yeeaaaah!!
i didn't understand a thing from this tutorial !! what do i need to learn before i get into this?
Flutter would probably be a good place to start.
@@FilledStacks well we need a roadmap to advanced flutter skills, Thanks
@@ayoubelbadaoui5357 I don't think that's required for these. Programming principles in general is probably what's lacking. I'd say
1. Learn the fundamentals of programming (object oriented programming, since that's what you'll be working in for mobile apps)
2. Learn engineering fundamentals (code separation, design patterns, building things in pieces)
3. Learn coding principles most likely the most beneficial will be SOLID principles.
After that any framework or SDK would be easy to use. I can use literally any framework I want and build anything in it. Because I understand how the framework was built and how to use the pieces to build what I want to build. There's no roadmap I followed for Flutter, or Xamarin, or React Native, or Switf UI, or Kotlin.
I just learned the syntax and then I applied everything else I mentioned above to it.
@@FilledStacks u definitely right thanks for your help , i have been learning flutter for 14 months i make apps but still i feel like i have missed some really important fundamental basics ,THANKS
This filledstack guys make flutter so difficult, and it’s supposed to be fun
Haha, i thought I was doing the opposite 🤣 I assume you're not building apps that will go into production or be maintained for 7+ years with large teams. Because if so then you can just write literally whatever you want and it wouldn't make a difference 😁
@@FilledStacks shades lol, keep up the good work
😉😆
I'll try my best. Thanks for leaving a comment
Can you make us a tutorial about facebook audience network real ads...all the tutorials are just for test ads and the documentation doesn't say anything about real afs
Hey, I've never done that, so I don't think I'll be able to give you anything other than what's in the readme.
first two lines of code at 3:20 seems useless ... you aren't ever using "myCurrentConstraints" and you immediately overwrite geometry.zero with an actual value. Are either of those statements needed??
No, neither of those are needed. When I explain something I usually show how to access / use it as well. So as I was saying those properties are available I wanted to make sure you know exactly the name of the properties I'm talking about.