How to use 3d objects in your flutter app

you might have seen this popular design before this is truly Filipino published by min Pham and tripled in this video I described how I implement the design with flutter as you can see the final result is very identical let's get into it [Music] a few days ago I was watching this video on flutter YouTube channel the presenter used this design as an example of complex UI and the AIDS of implementing it with flutter and disappointedly he said we will ignore the guitar we will just focus on the driver itself he's focusing on flutter powers hence ignoring this fabulous amazing 3d object is a good practice flutter officially informed us there will be no to the support in the near future but I extremely enthused overbearingly life to the concert I mean a complete identical life so I try to find a workaround to implement similar designs I will this rabbit and this customer from the pros and cons based on margin advice I started to analyze the design parts it is structured with app bar which have a different direction main content which includes a background a 3d object and an overlay and finally deserver because of the parts behavior I tear apart main content and put all the sections inside the stack midgets the order of this like children is not as about the gesture detector will manage travel interactions also taking attention to the cycle for no visibility these are called back functions which I wrote for the gesture detector on a thing I'm controlling here is the main animation controller based on the user touch behavior the first widget I put inside the stack is responsible for rotation background color and fender world the way I simulate 3d rotation is the one marching described with a little modification for getting a responsible design I try to position everything relatedly to a screen size here the max slide is a percentage of a screen width which calculates in the widget lifecycle the small number I added here is a very small degree in radians to improve perspective simulation without it the front panel will route with 90 degrees and appears as a line but perspective wouldn't work like this if actually object rotates 90 degree in front of you too far edge of side panels goes a little further inside you can see this matter in our reference design I added negative vertical position values to make a 3d cubic column rather than a box I use another stack to position the world and a shadow to bevel it a little at the end of the stack that means the highest layer I added an animated color to simulate light shading during rotation take attention to the way I used animated builder widget I could probably wrap everything to a single giant animated builder but it's not a good practice due to performance inefficiency as it reboots every widget in every animation take the right way is to wrap aesthetic widgets inside the child input to let them bypass T rebuilds the next part I'm going to describe is the tower I positioned it to cover the screen with a relative empty space on right then I used composite transformation to animate it from side to front I've used an interesting visit for two results to animate a smooth edge width and thin to the agrarian and to simulate light shading as we need for previous box other parts are just to make a preview of their our items at this point we have a great-looking 2d rotation there are and we already took repair or 2d objects as I mentioned aerial flutter doesn't support 3d objects so I had to find a worker like a start about using video but soon after that I realized video is not controllable enough and playing quality effects the final feel then the idea of using frames as separate image came to my mind this approach has been used for many years in various areas like e-commerce websites to give a 3d rotatable view of products as always I stopped to search for a similar flatter package and I found one called flatter image sequence animator it's exactly the thing I've solved I use blender to prepare the model and render a simple Phillip animation as separated pages I searched for a free to use 3d model of Fender guitar found a few but none of them was ready to use so if you want to reduce the time or you don't have enough 3d modeling and rendering knowledge I stick to the ones that's orange free but I wanted to save a few bucks I choose the free model that's missing some Sixers I downloaded a free wood texture and applied to the guitar then I changed some materials to make the guitar looks better inside the app and make it more similar to the design I created a linear simple animation during 120 frames just by written in the model I tried to position the origin similar to the rotation of the box I choose linear timing curve because the user will control the rotation manually also I used a proper HDR for the world I used cycles render engine to get a smooth best looking result an important thing to consider is enabling transparency inside the render settings these options and work alone are very similar between the values through the applications to my laptop it took about 40 minutes to finish the render now I have my PNG sequence and I have to declare them as assets inside the yum file after configuring the image sequence package I got this result I realized that the package has a default color overlay an image sequence therefore I had to modify it to fulfil my regrets I remove default color overlay and made it possible to pass an external animation control I've sent a pro request to the author of the project if it's been accepted at the time of watching this video then aptly use it otherwise you have to do the same modifications or write your own widgets here we go we have a life controllable through the object inside a wrap again I have positioned the object relatively to make sure it appears the same on different screen sizes next part is the header the widget is so simple first I wrapped everything inside the Builder function and finally I wrote to overlay the animation difference with the front panel to the extra translation I added to make appears higher on z-axis the final touch is adding a simulated shadow of Peter on the front panel I did it by creating strike contains two transparent container widgets with the rainshadow now it's time to inspect the usability of this work round in real life applications I rendered the frames at the minimum resolution which keeps the image quality short enough 120 frames reached 20 megabytes but I used a hilarious online tool called tiny pengie to optimize my image and the default size reduced 70% at just seven megabytes afterward if you want to put just feel objects in your app it's reasonable to pack them within the installation but for situations like product showcase serving the image sequence on request is the wise decision for sure it's not as this mode as a native 3d API thank you for watching this tutorial if you enjoyed please back subscribe or turn on notifications to avoid missing future failures you can get the complete project from the github I put the link in the description you

Channel: Hamed Hamedi

Views: 58,157

Keywords: flutter, tutorial, programming, drawer, 3d, flutter tutorial, flutter sdk, flutter widgets

Id: 4KB8grp4O-Y

Length: 8min 3sec (483 seconds)

Published: Wed Apr 15 2020