Build a Next Level 3D Ecommerce App in Flutter with three.js | Flutter 3D Ecommerce App

so hey what's going on everyone in this video I'm going to be creating a 3D e-commerce app with the help of flutter so now you can see the actual 3D model here right now I can rotate this and I can even see every minute detail on that watch so you can actually implement this in your store and you can gradually increase the you know product price and you'll get a lot of sales with the help of this actual 3D view okay so for that we need to understand how it works and let's actually create that thing so for that let me open up my terminal and here I'll just create my project all right so now let's head over to pubspec.vml file and here we're going to be installing some dependencies so the first one is going to be webview flutter and the second one is going to be Google fonts and the third one is going to be get you know to actually get that URL from the you know browser so let me get the packages and then we're going to be adding the assets so for that I'll just scroll down and here we got the assets right so we're going to be actually adding our assets so let me create an assets folder for that so I'll just create that over here which is going to be assets and inside that we're going to be you know placing down our background file so let me open up this in my file explorer all right here I'm going to be pasting my background file over here okay so we're going to be using this in our app and then here we got a lot of things over here that's fine uh let's head over to library folder and inside that we got our main dot dot file right so we're going to be actually customizing this file so first what I'll lose it I'll just add few differences over here this is going to be I'll just import my packages and uh I'll just include my service. so let me select my flutter and inside that we got our services so we're going to be selecting that thing and similarly we're going to be adding our Google fonts from the you know Google font package let me select that thing all right so now we had imported the material services and Google fonts right so now let me customize this page so I'll just remove all these things because we don't need that all right so now I'm going to be overriding a Metro here so let me override that thing and I'm going to be building a build context so let me select that and I'll just select the context from that thing and then I'm going to be using my system Chrome now to actually get that URL from my you know browser and then I'm going to be setting that uh system UI overly style and we can be customizing that thing so here I'll just match the URL color with the you know status box so let's actually match that thing so for the let me create a constant uh system UI overlay so let me select the style over here and inside this I'll lose it I'll just set my status bar color and let me select that color over here so here I'll just set that to you know colors.white and make sure to you know change this case because it's in case sensitive like Java so make sure to change that case and now what I'll do is it I'll just say that you know status bar icons so for that let me select my you know Cities Power icon brightness and let me set that brightness uh too dark okay so let me select that thing and here let me close this and now we're going to be returning a material app so for that let me return and you know material app and inside that when I lose it I'll just say the title to you know flutter something like flutter demo that's fine and then inside that we're going to be seeing the debug sure check mode Banner to false and uh you know we're going to be setting that theme and let's see that theme to team data instead that I'm going to be adding a text theme so for that let me select my text key and here let me actually use my Google fonts and you know let me set that text over here so you can customize this however you want but for now I'll just set the you know Sans or text theme because uh you know that's my favorite theme and here I'll just add a primary color I mean primary Swatch color so for that I'll just select my primary Swatch and let me select that color so I'll just select that uh you know blue color because I like blue color change this as well and here we need to enter that as colors because we are selecting that from colors not the color okay and then finally we need to return that thing so I'll just set the home and uh you know I'll just call out my product detail like we're gonna be creating that thing over here so I'll just create that first so I'll just call out the product detail package okay so we're gonna be creating that package shortly so now let me create that package so here I'm going to be creating another dot file which is going to be product detail dot dot and inside this we will be importing Cupertino material widgets and webview flutter so we're going to be using all these things in order to actually design your you know product page and then here while user I'll just create a class over here and inside this while loser I'll just set the product details and I'll set the key value from abstract class and I'll just say the super key value as well and then I'm going to be entering a few colors over here so for that I'm going to be customizing a list of colors over here using the array like we're going to be using the list array not actually add a few different colors over here here I got the black color and here I got brown blue gray and the amber color so you can customize this and you know it's all in the product Details page so you can change this as well but you know if you are going with a different set of versions then feel free to ignore this so it's a demo app right so for that LG is to create a basic version of that and uh here I'll just add a couple of double sizes arrays in order to actually align all these color values and then here I'm going to be overriding a widget so for that let me override that widget and let me build the context and inside that I'm going to be adding a couple of different child so here I'll just Create A Child Called scaffold and inside this we will be customizing our actual app first let me set my background color to white and then I'm going to be creating an app bar just like this and you can customize this as well and sure I'm going to be creating an app bar and here I'm going to be adding a body column and inside that I'm going to be adding the children and inside that I'm going to be customizing my actual page so I'll just add the text over here and I'll just set that rating with the help of this you know text and I'll just you know customize that thing the help of this row and then now and then right below this row I'm going to be creating a constant called spacer in order to actually make a gap in between the row and the you know colors so right below this spacer I'm going to be creating all that color so here so for that I'm going to be adding another row and I'll just insert all those colors and I'll just customize that thing you know here you can find all that thing and right below this row I'm going to be adding an actual spacer because we need to leave a gap in between this you know colors and the navigation bar right so for that I'm going to be creating another space row here and then finally we're going to be adding an bottom navigation bar so for that I just create an bottom navigation bar over here and now you can see that thing right like we got the bottom navigation bar and here I you know that price and uh you know text over here and you can customize this as well so now the main thing is we need to add the actual uh you know 3D model right yeah but before that uh here I got an error let me fix that very quick and yeah now let's scroll this up and and here we got the colors and above that we got this you know text right you know it's really difficult to create an actual 3D model with the help of flutter so for that what I'm going to do is it I'll just use this actual 3D model website which I had made using 3GS and if you want to learn how to create this website then you should definitely enroll in the professional 3GS course where you can learn more about this reaches and you know you can create an actual 3D website just like this and we can be actually emboding this site inside our actual app so for that I'm going to be using this URL so I'm going to be copying out this URL and we're going to be using that thing so now when I lose it I'll just create a constant sized box and I'll just set that high to something like 360 and with to double infinity because we need to actually calculate the width depending on the device right so I'll just calculate that with help of this double infinity and here I'll just call my webview and here I'll just set that debugging enabled to false and I'll just add the background color and I'll just set that to transparent and here we're going to be initializing that URL with the help of this URL which we had seen that right so we're going to be pasting that over here you know the website is made using JavaScript so without JavaScript the website won't work so for that I'll just set that to under sector and we are ready to go but before that we got an error in the main.file which is we got an error in the product details so how do you actually fix that thing it's pretty simple just import the you know product details dot dot and here you need to import this file over here you don't actually do that let me select my actual package which is you know e-commerce right so let me select that package and here I'm going to be selecting that product details dot dot here I just failed to add that title okay that's fine so you can find this actual page source code in a scrapped projects which is shop.codile.com slash you know scrapbook projects and right here you can find the what's portfolio and you can download this source code for free if you have enrolled in our professional teachers course then you can download this for free okay and yeah let's run this app so in order to actually run this app so you need to open up your terminal and just enter flutter run and make sure to connect your device because we need an actual debugging device right without that we can't actually run this app so connect your device and run this app and feel free to comment down below and with that's it I'll catch you guys in the next video peace [Music] [Music]

Channel: Epic Programmer

Views: 16,815

Keywords: flutter tutorial, 3d website, three js, three js tutorial, three js portfolio, flutter app development, flutter app project, flutter app tutorial, ecommerce app flutter, ecommerce app, build an ecommerce app, ecommerce flutter app, ecommerce flutter, 3d app flutter, 3d app for android, 3d flutter app, flutter ecommerce app with backend, android ios app development, flutter

Id: SYsmJ2xe6iE

Length: 11min 28sec (688 seconds)

Published: Sat Jan 07 2023