Flutter Web Development Course in Android Studio with Null Safety 2022 - Firebase Web App Tutorial

hello and welcome to fruit panda flutter web admin portal so you will learn how to develop web applications using with flutter null safety click on new flutter project make sure that flutter is selected from here okay and then click next here we have to write our project name so as you know it is food panda as you know the name must be in small initial favorites okay so we can say footprint.admin underscore web underscore portal food panda admin web portal and then click finish so our project is creating now here you can see and now if we make sure that from here project is selected okay and if we expand this project then here we have this web basically where we will do some settings in our index.html file while connecting our app with the firebase of course that we will do in the next video for now just come here to the lib where we have our mender dot our default code okay so as you know we do not need that that is my home page and my home page state so we will simply remove that also let's remove these comments select these comments and remove it and now also remove this const home page right click on lib new directory in mac os directory is called package okay by the way you can recognize it from this icon let me just show it to you okay this one this icon directory which is basically a new folder you can say so anyways let's give it name main screen and then right click on the main screens folder new dot file first of all we have our home screen for the admin website or you can say web portal so anyways you can say import material. create a straightforward widget we will simply give it name as home screen and for now we will just display an app bar welcome to admin web portal now come back here to the main dot dot and here we have to provide our home route which is our home screen just like this okay and make sure to get a const modifier so now we are ready to test our web application so how we can test a flutter web application on the browser well for that we have this command which is flutter run dash d chrome dash dash web dash renderer html okay just this command so you have to simply type this command in your terminal so let's just paste that command here in the terminal okay just like this and press enter and it will automatically run the app on your browser for this it is important that you have any browser especially google chrome in your computer so anyways you can see here that is welcome to admin web portal which is our web app and here you can see this flutter demo which simply represents our this title of the app so let's change this to admin web portal or you can say foot panda admin footprint.clone okay so anyway it is up to you whatever the title you want and by the way in order to hard restart you have to press r okay or capital r for example if i write r then it will hurt restart okay and here you can see the changes admin web portal welcome to admin web portal which is basically our home screen and in the app bar we are just displaying that is welcome to admin web portal now in the next video we will connect our web app with the firebase so you will learn how to implement basically the web applications in flutter that is using flutter with flutter new versions of course with flutter null safety so i'll see you guys in the next video bye for now

Channel: Muhammad Ali's Coding Cafe

Views: 21,850

Keywords: firebase web app, firebase web login tutorial, firebase web app tutorial, firebase web hosting, firebase web push notification node js, firebase web login, firebase web push notification javascript, firebase web push notification, firebase web authentication, flutter web, flutter web development, flutter web app, flutter webview, flutter website, flutter web firebase, flutter web tutorial, flutter web app tutorial, flutter website tutorial, web development full course, web, app

Id: Bo2N06GMdt0

Length: 5min 29sec (329 seconds)

Published: Tue Feb 22 2022