First, you have to install flutter on your computer. You can use Both Visual Studio Code & Android Studio for Flutter. The steps are the same for both IDE. We have used Visual Studio Code. So, Our Setup will be based on this IDE.
Flutter Installation
First, You have to install flutter on your computer. To install flutter on your computer, follow the official documentation from Google.
Flutter Official Site : https://flutter.dev/.
You can follow these youtube videos to install flutter also.
Make sure you have installed the latest stable version of flutter. If everything is okay then you can follow the further steps below.
Admin Panel Setup
After successfully installing Flutter on your computer, You have to enable Flutter web support. Make sure you have installed the stable channel.
Flutter Web Setup
From Flutter stable version 2.0.0+, it will support the web. So, If you are already on the latest stable channel of flutter, you don't have to do anything for the flutter web. You should run all the commands on your IDE terminal from the project directory.
flutter clean
- After that run the following command to get the required packages.
flutter pub get
- After that run the following command to enable web support for your project.
flutter config --enable-web
And then it will enable the web feature for your project. That's it. Your admin project initialization is complete.
Firebase(Database) Setup for Admin Panel :
We have used the firestore database as the backend for this project. First, go to the Firebase Console and](https://firebase.google.com/)and) sign in with your Gmail account and go to the console.
Create a project by your app name. And go to the project overview.
Click on the plus icon and then click on the web icon.
Input the name like as Admin Panel and fill in the checkbox because you need hosting too and then click on register app. After that, Skip the other options by clicking next. (Don't input the custom name for hosting else you need extra setup for this which is not recommended)
Now go to the Project settings and in the bottom section click on the Admin panel that you have just created.
After that click on CDN and copy the selected code
Now, go to your admin panel project with your IDE.
Go to the web/index.html file and replace the selected code with your config code (what you have just copied from the firebase console).
Now go to the Firebase Console > Project Overview page and click on Firestore Database and create a database as test mode.
Now, Create a collection as admin and create a document as user type and create a textfield as admin password and use your password as value. Just like the picture below (Only the admin section). Try to use a unique password. This will be the password of your admin panel. You can change the password from here anytime. You can also change the password from your admin website.
Database Rules Setup:
Go to your firebase console > project overview > database > firestore database > rules and then edit the rules like this and click publish.
Database Index Setup:
Now go to the right tab (Indexes) of the same page. Click on Add Index and then create an index.
That's it. Your database setup is complete.
Other Setup
- Change the app name. Go to the lib/model/config.dart file and change the app name. You can change the testing password too. Make sure the testing password and the password in the database are not the same.
That's it. Your Admin Setup is complete. You can run the admin app now.
Run The Admin App
- You can run the admin app now by running the following command in the terminal.
flutter run -d chrome --web-renderer html
- After running the admin app, Use the password that you have saved in the database before and check if everything is okay or not.
Upload the Admin App to the Firebase Hosting
- You have to upload your site to your firebase hosting. For this, you have to install firebase tools on your IDE. Run this command on the terminal:
It will download firebase tools for you. Or you directly download from here and install this manually.
npm install -g firebase-tools
- After that, You need to log in to the firebase console with your google account. To do that, Run:
firebase login
Follow the command prompt and the link in your browser. Accept the permissions by clicking Ok. When you return to your terminal you should see that you are now logged in:
- Now you have to initialize the firebase. Run this command:
firebase init
Use the arrow keys to navigate the cursor to Hosting and hit the spacebar to select it, then press enter.
Select an existing project by pressing Enter. Use the arrow keys to select the project you have made in the firebase console.
Next, enter build/web as the public directory and press enter, then enter y (for yes) to select the single page app option:
Now Run this command to build the web app.
flutter build web --web-renderer html --release
- After that, run this command to upload the app to your hosting and wait for some moment.
firebase deploy
That's it. Your Admin Panel is 100% complete. You will get a URL from the terminal and it will be the domain of your admin panel and you can use this domain for further use of the admin panel. You can also get the domain from your firebase console > your app > hosting page.
