Make Anything in Flutter using RenderObjects
ะ ะตั าะฐัะฐะปะดั 16,610
ะาฏะฝ ะฑาฑััะฝRenderObjects gives you the power to create anything in Flutter. Learning this you will get a deeper understanding and also a feeling that you can accomplish anything ๐
Course to build a production-ready app ๐ robertbrunhage.com/course
Full writeup: robertbrunhage.com
๐ Have additional questions, join Discord: / discord
Want to support me?
โฅ Patreon: / robertbrunhage
โฅ BuyMeACoffee: buymeacoffee.com/robertbrunhage
โฅ Paypal: paypal.me/robertbrunhage
ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท
You can find me on:
โ Website: robertbrunhage.com
โ Twitter: / robertbrunhage
โ Discord: / discord
ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท
๐ Subscribe: bit.ly/2SUyRhx
00:00 Overview
01:25 Creating a LeafRenderObjectWidget
02:35 RenderBox
03:30 Layout
04:50 Painting
11:34 Drag functionality
@RobertBrunhage 3 ะถัะป ะฑาฑััะฝ
Sub to creativecreatorormaybenot: kzfaq.info/love/Df73A8sVgbYKX192SLMn1w Inspiration: medium.com/flutter-community/creating-a-flutter-widget-from-scratch-a9c01c47c630
@creativecreatorormaybenot3608 3 ะถัะป ะฑาฑััะฝ
Such an awesome video and intro to RenderObjects! And much love for the mention โค๏ธ
@RobertBrunhage 3 ะถัะป ะฑาฑััะฝ
Got motivated by all your awesome work so, much deserved! And thank you!
@ayushchothe8785 3 ะถัะป ะฑาฑััะฝ
This is what I was waiting for ๐ฅณ
@rydmike 3 ะถัะป ะฑาฑััะฝ
Really nice to see a video on this topic. It is not a topic that has been covered a lot, so it is very welcome. One could make just a series on total custom widgets and painting in Flutter. However it is a bit niche, so the audience might be a bit limited. Appreciate that you took the time to make this content, got an idea for how to improve one of my custom paint widgets from it, some day when I have time... ๐๐
@Ondal1 3 ะถัะป ะฑาฑััะฝ
This was really great Robert :)
@skorp5677 3 ะถัะป ะฑาฑััะฝ
It was awesome if you could make more examples of this, maybe driving deeper into what's going on behind the scenes and what all the methods, we have to overwrite do. Awesome video as always! ;)
@RobertBrunhage 3 ะถัะป ะฑาฑััะฝ
Noted, thanks!
@samgarg5228 3 ะถัะป ะฑาฑััะฝ
Finally !!!!!! Waiting for so long for that kind of video๐ฅบ. Thank you so much sir๐๐ปโโ๏ธ
@RobertBrunhage 3 ะถัะป ะฑาฑััะฝ
Glad you liked it!
@FlutterMapp 3 ะถัะป ะฑาฑััะฝ
Very well done!! Thank Robert!!! Peace!
@tech-andgar 3 ะถัะป ะฑาฑััะฝ
๐คฏ Thank you for explain with process
@RobertBrunhage 3 ะถัะป ะฑาฑััะฝ
Glad it was helpful!
@ulysses3183 3 ะถัะป ะฑาฑััะฝ
Another great video! I have a better appreciation for what's going on behind the scenes now. It would be cool to see further render object use cases with low level customization of existing widgets
@RobertBrunhage 3 ะถัะป ะฑาฑััะฝ
Glad you liked it, writing it up!
@kayeltech1442 3 ะถัะป ะฑาฑััะฝ
Well done. Superb Content.
@Aspiiire 3 ะถัะป ะฑาฑััะฝ
This is a real tutorial, really cool thanks for sharing ๐
@RobertBrunhage 3 ะถัะป ะฑาฑััะฝ
Youโre welcome ๐
@pembatamang8233 3 ะถัะป ะฑาฑััะฝ
Wow this is great
@RobertBrunhage 3 ะถัะป ะฑาฑััะฝ
Glad you liked it!
@isyedaliraza 3 ะถัะป ะฑาฑััะฝ
Hi thanks for sharing the knowledge. Keep it up bro โค๏ธ. Btw which font are you using on vs code?
@ykmnkmi 3 ะถัะป ะฑาฑััะฝ
After some experiments, you can port flutter to web by replacing RenderObject's with dart:html Node's: find & replace, litle refactor, update runApp and BuildOwner. and we have new web framework for dart. And there possibilities to write compiler for angulardart over RenderObject's for flutter. (sorry for english grammar)
@fille.imgnry 2 ะถัะป ะฑาฑััะฝ
Great video. What would you say is the main benefits of creating this custom widget like a RenderObject, instead of building it using multiple already existing widgets? Would be interesting to measure the performance difference (if it has any real implications) and see if it would be easiter or harder to implement.
@nash9785 3 ะถัะป ะฑาฑััะฝ
Love this.
@RobertBrunhage 3 ะถัะป ะฑาฑััะฝ
Thanks Nash!
@abhilashchandran3126 3 ะถัะป ะฑาฑััะฝ
Great introduction and motivated to dig into renderObjects. Kudos and keep it up. ๐ However at 5:07 I fail to understand how translate adjusts the canvas size. As per my understanding it only moves the canvas to the specified offset in the screen, right?.
@RobertBrunhage 3 ะถัะป ะฑาฑััะฝ
You are correct, my mistake ๐
@iGhostr 3 ะถัะป ะฑาฑััะฝ
I liked the video even though it was discouraging ._. The drawing part is okay but all the other initial code is soo time consuming
@RobertBrunhage 3 ะถัะป ะฑาฑััะฝ
Agreed and most of the time it's not needed to do all of these things, that is why we have widgets! This is just if you want to do something very niche that you currently can not accomplish with widgets, or want extra control over something :)
@ahmedgames9335 ะัะป ะฑาฑััะฝ
I create some think like overly entry with stack an I do it but I have a question? , I have a list that I added to it the widget and when I will add one more it render the other width or ?! Or just render the last width that I added it ?
@faheemahmadofficial7701 3 ะถัะป ะฑาฑััะฝ
Please do fyp like easy tutorials for FINAL year students who want to do flutter ๐
@RobertBrunhage 3 ะถัะป ะฑาฑััะฝ
Do you have any examples of what you would like to see?
@gautam6223 3 ะถัะป ะฑาฑััะฝ
Clones of popular apps
@faheemahmadofficial7701 3 ะถัะป ะฑาฑััะฝ
@@RobertBrunhage i want to build an app that helps a student.. manage his daily University life.. i mean fiest saving Time table and getting notifications prior 15 mins before a class for each class.. the app shows a nice interface for daily agenda and reminders a section of todo list and a section where he can store names Numbers of teachers etc
@faheemahmadofficial7701 3 ะถัะป ะฑาฑััะฝ
@Eucalypticus bro i want to complete my FYP project can you please maybe contact we could just do some chat on how to implement it?
@RandalLSchwartz 3 ะถัะป ะฑาฑััะฝ
You might have simplified some of the Offset calcs with Offset.lerp(). That looks like a slick thing, and is also available for size, rotations, and all sorts of draw stuff.
@RobertBrunhage 3 ะถัะป ะฑาฑััะฝ
Thanks for the feedback Randal, and for sure! I am probably one of the worst people at math so didn't think of it ๐
@RandalLSchwartz 3 ะถัะป ะฑาฑััะฝ
@@RobertBrunhage Also, consider things like aSize.bottomLeft(Offset.zero) to get the "lower left" of your drawing area, similar with .bottomRight. And you can replace .zero with (0, -20) to get a point 20px above that. Or use .bottomCenter to get midway across, and centerLeft to get midway up the left side. Lots of math done for you!
@RobertBrunhage 3 ะถัะป ะฑาฑััะฝ
@@RandalLSchwartz Oh this is sweet, will probably use more of that now haha
2 ะฐะน ะฑาฑััะฝ
What is advantage over simply using CustomPainter?
@ibrahimshehuibrahim918 3 ะถัะป ะฑาฑััะฝ
Great
@RobertBrunhage 3 ะถัะป ะฑาฑััะฝ
Thanks!
@thefamousdjx 2 ะถัะป ะฑาฑััะฝ
Thats good but you havent answered or explained why anyone would want to do this. This can also be achieved with just the normal widgets yes?
@MPRGyanStudio888 2 ะถัะป ะฑาฑััะฝ
How to add nvidia render animation in flutter apps
@krokenstiv8777 ะัะป ะฑาฑััะฝ
can you explain for MultiChildRenderObjectWidget?
@AnimeWorld-pf9qy 3 ะถัะป ะฑาฑััะฝ
hi, thanks for posting such a great content , can you restructure the entire channel playlists ? many vids are not in a playlist and i wanna download all of them , not one by one , using a software to download entire playlist is very helpful , also it would be a shame as you are one of the State Management Masters and can't manage your videos :P just kidding :D just keep that in mind :)