Flutter Web Course - Responsive Admin Panel with Firebase 2024

[Music] hello and welcome back to cing with today we're going to start flutter admin panel which will be flutter web technology in this course we are going to learn how we going to develop the flutter web apps and in the previous course we created flutter e-commerce application using flutter technology in which we learn how to create flutter apps for Android and iOS this course is although not dependent on the flutter e-commerce application but rather I suggest you to watch the e-commerce application to have the previous knowledge because we're going to create admin panel of that same e-commerce application again it's not necessary to watch the previous e-commerce app course you can get that link is in the description so before going to directly have a look what we are going to create in this course and why you should watch this course I want you to think about some of the basic questions that may arise while thinking about creating web apps or moving from web development from HTML CSS to flutter web development so there are some questions that may arise in your mind so first of all let's talk about these so I listed some commonly asked questions these are not all the questions but few commonly asked questions so first one is what is flutter web and how does it is different from flutter mobile application devel so as I told you that the previous course was about flutter app development and flutter is much more famous for its app development than its web development because this one is a bit new than app development so we are going to see the difference if there is any what tools and softwares do I need to start developing for flutter web apps I do receive this type of questions then we're going to see how do I set up my development environment for flutter web development it is different from again from the flutter web apps or it is same then what are the main components of creating flutter web project how do they work together is there any difference how do I create my first flutter we and what are the steps involved what is responsive Design This is the main question that I received multiple times that how we going to create our websites responsive using flutter how do I handle navigation and routing in flutter web apps this is again a big question with a very little data available on the internet so we're going to focus on this and we're going to make sure that our navigation and routing techniques should be Advanced and up to Mark we are going to start it from the beginner level then we're going to learn how we going to integrate Firebase because our app is created on Firebase database so definitely we're going to learn that how we going to integrate the admin panel so that app can be managed from the admin with a flutter web app which will be authentication database and definitely storage and also if you already working on the flutter web app you notice that flutter web apps by default does not allow us to display any images from other sources or from other servers so who we are going to deal with all those things then definitely a basic question for flutter app development or for the flutter web development that how we going to reduce the reads and writes while creating flutter web apps how do I test and debug this is a big question again for flutter web app development and after all how we are going to deploy flutter web apps we not only going to Target these questions but definitely we're going to cover lot of other questions and these are only basic questions while having these questions in mind let's see why you choose this course so why choose this course first of all definitely we're going to Target all the above questions that we just reviewed it will be a first ever comprehensive and professional flutter web course because you might not be able to find much about the flutter web development so for either creating the flutter web apps or you can call a websites admin panels whatever so this is going to be a very comprehensive after this you will be able to create your own websites in flutter you're on admin panels create a complete package of Android iOS and admin panel with a website it will be a beginner friendly we are going to cover each and every step required to develop any type of flutter website and we'll definitely reach towards the advanced level where we're going to deploy our complete Adit panel on Firebase hosting you will be able to master the responsive design principles definitely flutter allow us to create responsive screens how we going to learn this how we going to use the constraints different type of sizing for the desktop tablet mobile devices everything will be included then again routing in flutter web so I hope you are going to get all the answers for your questions that you may have in your mind we're going to learn the graphs how we going to make them responsive as well learn to create reusable widgets so that those widgets can be reused throughout your application in a single project or in other future multiple projects we're going to follow professional expandable project structure so that you can not be limited only the project that we are going to create but you can expand your project you can add more functionalities more features without worrying about depending on previous features and functionalities and above all we going to build a strong knowledge base and you will be able to develop a robust portfolio for your future jobs future careers so so I hope this is going to answer all or some of your questions that you may have in your mind while creating flutter web or while thinking about the web development in flutter [Music] so now it's time to have a demo what we are going to exactly create so I open my application in the browser and the first screen that is in front of you is the login screen where admin is going to access its admin panel and at the top you can see currently it's hosted on Firebase hosting and this is the URL provided by the Firebase hosting it's live you can watch this or test this complete admin panel link is down below in the description and we are currently poting pointing towards the login screen and you can also see the name inside your url So currently I'm going to add the email and password again I am when writing the password I can toggle this I can remember this password and place this password into the cache or you can call it share preferences score it or to use it for the later time then we have the forget password again you can see it's responsive currently you are viewing this in the Mac size or the maximum desktop size which is 4K size if it is empty we have the the validation checks definitely we're going to send that email to somebody and I'm going to write this email and click submit you can see a processing and popup message which is a confirmation message and after that we have again a responsive screen which is the reset password screen when you reset the password you received the email that will be automatically redirected back to login once we head back over here we get log into our application but before that I want to show you the responsiveness of this screen now I am going to minimize it to reach towards the other devices threshold you can see we are inside the tablet mode but still it is the same design nothing change when we're going to reach towards app size you can see the design has been changed and now it is similar to the one we designed inside our application which is the Ecom app it is similar to this one and again when I'm going to extend this it is in the center so this is called a responsive design so let's try to login so this is the email and password that you can use to access it click on sign in again it is processing the top we have a header with the user detail we have a search over here a notification icon and on the left side you can see we have sidebar and it is again currently displaying on a large screen which is the 4K desktop and it is perfectly working over here so the first inside this dashboard we have top four items we have the sales or you can call it four different cards then we have bar chart over here which is displaying the sales or the weekly sales you can convert this to a monthly sales as well and then we have the order status over here we have two pending orders one delivered shipped and one cancelled you can see all the recent orders over here before moving further with with our application we going to test its responsiveness so when I'm going to minimize it so this is the size of regular desktop now when I'm going to reduce the size you can see the size is adjusting itself text is adjusting itself as well let's reduce it a bit more and now you can see we reach the threshold of the tablet size and our design has been changed let me display it again from this way you can see the sidebar has been moved to the top so sidebar is over here now we can toggle the sidebar the way we do in the inside our apps cards are now inside two rows with the two columns we have a weekly sales over here orders and also the revenue when I'm going to start reducing the size again you can see this it is adjusting itself the design is not going to crash whatever the size of your application it is scrollable now let's switch towards the mobile when I switch towards the mobile you can see the user details are hidden you can watch the user details by clicking on it currently I've not added that feature you can see the search button over here search is also gone you can also display some names or maybe headings over here if you like same the sidebar is over here we can toggle it so let's reduce this one bit further and you can see we have four cards in a four different rows we have again weekly sales a responsive table which is again a searchable table we can select any of these values select all of them we have page ignition we can go to different pages and down below again everything is responsive we can reduce back to our main design and inside these orders these are clickable orders so when I'm going to click on any of the recent orders let's click it it is getting the details of the user all the items order information is a date of the order as two items in this order status is pending we can switch the status processing shaped delivered and cancel total is 863 we have two items name of the items then again the single price quantity and total price then we have subtotal discount shipping and tax total is over here and also we have a transactions because we have not added yet any payment methods inside our e-commerce application so I have not added any transaction details over here but then once added we will be able to display the transaction details then we have a customer details contact person shipping address and billing address all listed over here you can also test Its responsiveness So currently it's in a regular desktop size now when we are going to reduce this let's wait for the desk tablet this is the tablet mode again everything is responsive and you can see when it is entering into another state these cards are being moved down because we want to display the complete email over here these items are getting responsive you can see the text is being reduced same for the transactions but when the mobile device arrives design is now changed let me reduce it to the minimum and this is how it is going to look same everything is working let's go back and also at the top you can see the URLs which is currently the dashboard when we're going to go towards the media you can see the URL is now changed the media is designed in a way that you are going to efficiently use your Firebase Firebase story to reduce the cost of your database and for that I have created different type of folders that you can use if we do not have any type of folders and we do not have any type of page tion that we are going to then whenever we are going to open this media tab it is going to display all the images and maybe the admin is only requiring one specific image not all the images but we are fetching all the images so that is going to have an expensive operation that expensive operations in a sense that it is going to fetch all the details we have to pay for each read or the wrs while working on the Firebase although it's free up to some limit but definitely we have to pay after some limits so to reduce those reads and wrs I have divided each image into different Cs and I'm going to click on these banners you can see a loader and all the images are now loaded it is first going to cache all these images and then we are be able to view all these images meanwhile they are loading we can open the brands you can see the brands are loaded we have also a load more button over here if we have more Brands we are going to click on this and we do not have any more brand so that's why we cannot see anyone same way we can add categories all the categories are over here so by this way whenever admin is going to require a specific thing he will be redirected towards let's say you want to open the brands or the banners by this way we have the banners when we click on this we will be able to see all the detail of that specific image so the reason to create a media is to easily manage all the images at one place and later on we are going to use all these images in different screens and the same way when I'm going to open the products currently we have only these six to seven products and again when you click on any of the product you can see the product in detail and to upload any of images you can click on this upload image you can see we can drag and drop images over here and we can select the images I have selected some of images when we going to click on open you can see by default this folder is also the same folder as we have the gallery folder so I have added all these images you can test by yourself when you are going to add or upload all these images let's say I'm going to upload one of them I'm going to upload only one image which is this one so when I'm going to click on this upload we can remove these images click on this upload it is going to confirm that you want to upload your images inside this product folder yes load it you can see that image has been uploaded it is over here and selected images are gone you can click on this again to toggle the upload images area so once we have all the images uploaded let's talk about the banners okay inside the banners you can see we have the banner image then we have the retract screen and also if they are active or not this means that as you can see in the application the e-commerce app the Banners are for the advertising purpose and these banners we are using redirect user to some specific screen so let's say when I'm going to create a new banner I can select any of the image you can see we have products appeared over here but for the banners I want to go to the banners and inside I want to let's say select this image click on ADD image is added over here now we can make this Banner active and I want to redirect the user to setting screens when user is going to click on this and click on create it's going to process and the record has been updated now you can see at the bottom we have a new image with a setting screen and it is the active Banner you can also edit it and delete it you want to delete this you can see the item is deleted by this way we can deal with the banners then we have the categories all the categories over here and all the parent categories of each category inside the e-commerce app you can see we have the categories over here all the categories are listed over here and again you can filter through that you only want the parent categories we extracted the parent categories at front then we have and we are going to click on any of the category it is going to open subcategories and all the subcategories have their own products so by this way we are going to handle the categories and subcategories again you can click on create new category name your category select any of its parent you can again select the image go to categories let's say we want to add this one click on add that image is added if it is featured or not and once click or create you will be able to create your category let's go back let's talk about the brands after loading you can see we have the brand image brand name all the categories of this brand and if it is featured or not then date of the brand it is missing because while creating apps we did not added any date over here so that's why they are empty when you click on any of the brand you can select any brand over here currently they don't have any specific functionality but you can edit any of the brand we can add the brand name we have selected categories image if it is featured or not and same way when you are going to create a new brand you can name your brand you can select your desired categories again the image can be choose from the brands let's say we have this brand or maybe this one click on ADD image will be added okay first of all before talking about the products I forget to talk about actually tables or data table that we are going to to use while creating our applications so this is the data table that we created you can see we can select all the values we can unselect we can select one of them we can perform different actions we will be able to sort this based on stock sort it based on the products from A to Z and from the reverse order then again we can sort it from the price we have dates over here we have the rows page ignition when we switch it to 20 we can see 20 products and then again we can go to the next page so this is the next page over here and again from this way we can go to First and the last page we can easily search any of the product let's say I'm going to search all the Nike products they are over here let's say I need some specific green Nike sport shoe which is again you can search it with this way we can search anything and definitely our data tables will be responsive so let's talk about how we going to add the product because we have two type of products the first one is the single type of product and the second one is the variable type of product so every product will have a title will have its own description we can add thumbnail add a thumbnail we can switch towards the products let's say I'm going to select this one as a thumbnail you can see the same popup which is currently selecting only one image at a time because thumbnail can be only one image so it is right over here but when we going to add additional images I'm going to select this again the same popup appear I can add as many images as I want click on ADD and you can see all the images over here you can simply remove these images or add more when you click on this plus icon you can see only two images are selected you can add more images click on ADD and now when you click on this you can see all the selected images are already selected for the single product you just need to add the stock of the product let's say we have 20 items we have a price which is $500 then we going to make it a discounted price of $250 we can add attributes for the single type of product it's optional we can add attribute values if we are not going to add nothing is going to be happened then we can select any of the brand over here then we're going to select any of the categories we have a list of categories over here that are multi selected click on okay to continue you can add the visibility to Hidden or the published currently I've not added anything yet in this but definitely while creating these tutorials I will add this feature as well we can also add this product in the draft before publishing and we can also make it publish and once a single type of product added if you want to add the variations you just have to click on this variable product all the stock price and discounted price will be gone and you should have to add attributes so let's say I'm going to add the colors attributes and when I'm going to add color as green and blue you have to click on add the attribute is added and you can also see a new tab over here for the variations finally it's empty we can add as many attributes as we want let's say I'm going to add sizes as small large Excel double XL medium whatever sizes you want to use or some materials any type of attributes can be added over here so once the attributes added we can click on this generate variations it should generate variations in a way that green with a small green large and green XEL again blue small blue large and blue XEL so click on generate variations confirm yes generate it and we have all the variations created you can see each variation now has its own image green small has its own image when I'm going to click on it this one is the green image add it you can add it stock its on price it's discounted price any description for this specific variation then again we have the green large I'm going to go for the same image for this one so let's select it add this image by this way you can add all the details you can add now the blue image over here by this way we can add all the variations let's go back and let's find the product which is already added so you can see this one is currently available inside our e-commerce application so the first one is the thumbnail image we have a title and a description then it is a variable product and we have two attributes the first one is color as you can see in the app we have green black and red size is 30 32 and 34 and also we have the additional images then we have the variations we have green 34 its image is loading stock is 34 which is in stock price is 134 and discounted price is 1226 this is the description and then same way we have all the other sizes so once you create your product yeah definitely when we are going to talk about these products let me open it again and let's switch towards the responsiveness and currently you can see the mobile version in this we have the information title and description over here then we have the stock and pricing we have the attributes down below we have the variations then a thumbnail product images brand categories and visibility and at the bottom you can see we have two buttons now when we are going to start moving towards the tab section now this is what it look it is going to look like in the tablet still it is a tab version and again we have a menu over here everything is working fine this is the small laptop version and when we going to make it full size this is the large screen so now let's talk about the customers we have lot of uh customers who are using our application and all those customers are being listed which is 138 customers we can go next next we can go to the last page and some people have uploaded their images and some don't so nothing to worry about okay then we have the orders let's say I'm going to click on any of the user let's find one let's open it we fetch all its details username Country phone number last order register email marketing subscribed these are the static data you can change it as per your own needs shipping address all the orders from this user so it has five orders we have five orders from this user we can again open all the order details you can also make this order let's say this one is pending let's toggle this and let's make it Shi it is processing and you can see order status updated it is now in the Shi State okay next again we if we move towards the orders we have all the orders over here we can search orders by order ID let's search the second one which is 2D it is right over there let's search for 6 C so this is how we can TCH the orders easily currently we have total six orders we can see the total pricing of these orders of that order items date of the order and Order ID currently because we have not added any type of coupons so we canot see any coupons over here but definitely we're going to add the coupons feature payment gateways and lot of stuff but first we have to create this admin panel because this is more needed so once this course is completed we will definitely head back toward adding more feature into our e-commerce application and also in the admin panel make it multivendor and so on so forth so stay tuned now the next thing [Music] [Applause] is how we going to divide this course and course outline this is going to be very helpful for you guys make sure to watch this video till end okay now let's talk about the course outline we're going to divide this course into nine sections the first one be introduction and setup the first video which is the welcome video is currently going on and overview of this course then we're going to learn how to setup of flutter web project dependencies project structure and all the configurations then we're going to talk about the gex which is the straight management and how we are going to integrate the Firebase inside our flutter web application once all the setup is done we will move towards the routing in flutter web in this we're going to talk about the basics of routing why it is needed why we need to have the routing as a main section and we're going to learn some Advanced routing techniques in the flutter web navigation and that passing techniques we're going to remove the hash sign you will learn later on that why I'm talking about this hash where it is inside the URLs and also the best practices then we're going to talk about implementing URL strategies and middleware definitely will be used inside our sidebar after this we are going to talk about the section three which is the responsive design principles a very important section to design a responsive web apps first one is to introduction about the responsive designs what it is the basics and the importance of this responsive design then we are going to talk about the creating responsive layouts with a layout Builder crafting responsive templates for various devices because we going to use those templates again and again instead of recoding the things and we're going to design responsive header as we have just seen responsive sidebar with the backend integration that we can handle all the routes then we have the admin management admin management means that we are going to let the admin login reset the password uh using the forget password screen then we have the register admin inside the Firebase authentication because first time we have to register the admin inside the Firebase authentic and also inside our fir store database and how we going to assign the roles so that only admin can log in after that we have flooring tables creation section which is again a very important section in which we are going to understand the tables in filter basic tables and data tables why we going to use the data table to it benefits and features search sorting ignition everything required for the tables and again we're going to create a widget that will be used throughout of screens to save the time and after that we're going to start developing of our main Advent panel which is the first one is the dashboard not dependent on the e-commerce but a dashboard with the responsive cards with the bars pie chart bar chart back end functionality then we are going to talk about the media how we going to display the images while working on this I found a lot of people having issue because they're not able to display or the flutter is not allowing you to display any images which which is hosted on some other server so how we going to display this we going to troubleshoot that we're going to fetch and display local images because there are some that are different from the flutter apps as compared to flutter web so we're going to learn that as well how we going to patch and display images from Firebase storage how we're going to upload the local images to the Firebase and then we're going to start the designing screens we're going to first design all the screens categories brand banners products customer order add and profile management and after that we're going to add the backend Logic for all those screens and last but not least we're going to learn how to publish this and what next we are going to do inside this e-commerce application or what next courses we going to launch now let's talk about that where this course will be [Music] hosted I'm going to launch another premium thing for all of you a patreon channnel which you should be subscribed because this course will be hosted on the patreon section one and section two will be available for YouTube and after that all the complete course will be listed on patreon because I'm going to start the live chats live sessions right over the patreon we are going to provide the premium content we will talk about the Advanced Techniques you will be able to get the 50% off on all the products currently available for the download definitely The Insider tips and tricks so y patreon I have just told all all the reasons and we're going to provide the premium content access exclusive and premium tutorials some Advanced Techniques and bunch of other things we're going to provide you the rare flutter web content app content so be at the Forefront of flutter web development with the content that is RAR to find elsewhere Master valuable skills that are in high demand in today's tech industry then we have the comprehensive Adin panel course that will be hosted on the pet we will keep adding more and more details and above all the main or the core benefit to joining the patreon will be you can ask me any question you will have a sport Channel we will have a Discord Channel where we can discuss all the things you can discuss about the latest developments some bugs or some errors or exceptions you might think you have you can ask me some specific tutorials that we going to launch so there are lot of things that I am going to host on patreon so make sure to subscribe and to get the complete course of this flutter admin panel how you're going to reach towards the patreon link is in the description I'm also going to display the same link right uh on your screens you can just head towards the patreon Subscribe it it is just a very minimal fee for monthly basis okay see you on the other side of the platform okay that's it for today's video once again everything is listed Down Below in the description all the links to download the complete e-commerce app complete admin pannel links in the description and also to join the patreon to watch all the courses watch the complete admin panel course you can join the patreon link is in the description once again thank you for watching take care

Channel: Coding With T

Views: 4,267

Keywords: flutter web, flutter web development, flutter web app, flutter admin panel, flutter full course, flutter complete course, flutter web course, admin panel in flutter, flutter dashboard, flutter dashboard ui design, flutter dashboard web, web app development full course, flutter admin panel firebase, flutter admin panel app, flutter admin panel tutorial, flutter admin panel web, admin panel in flutter web, coding with t, ecommerce app flutter, ecommerce app flutter firebase

Id: sj0lYT7DTxI

Length: 30min 13sec (1813 seconds)

Published: Wed Apr 03 2024