Deploy Admin Panel

Build the Flutter Web App

First, make sure your Flutter web app is working fine locally. You can build the app for production by running the following command:

flutter build web --no-tree-shake-icons

2. Create a Netlify Account

If you don't have an account yet, sign up at Netlify.

Create a New Site

  • Once logged in, you’ll be taken to your dashboard.

  • On the dashboard, click on "Add New Site" or "New site from Git".

  • Netlify allows deploying from different sources like GitHub, GitLab, and Bitbucket. However, for this approach, we will manually upload the files.

3. Drag and Drop the build/web Folder

  • After creating the site, you’ll see an option to "Drag and drop your site output folder here". This area is for uploading your static website files.

  • Open your Flutter project folder on your computer and navigate to the build/web directory. This directory is where Flutter stores the production-ready files for the web version of your app after running the flutter build web command.

  • Drag the entire build/web folder from your local system and drop it into the designated area on Netlify’s site.

4. Automatic Deployment

  • Once the build/web folder is uploaded, Netlify will automatically begin the deployment process. It will host the web app on its servers and generate a live link for you to access your Flutter web application.

  • The process usually takes a few seconds to a minute, depending on the size of your app.

5. Access Your Deployed App

  • Once the deployment is complete, Netlify will provide you with a URL (usually something like your-site-name.netlify.app). You can now visit this link to view your Flutter web app running live on the internet.

Additional Settings (Optional):

  • You can modify the site name to something more recognizable (e.g., yourappname.netlify.app).

  • If you have a custom domain, you can link it to your Netlify site from the dashboard.

This method provides an easy, drag-and-drop approach without requiring any coding or command-line tools, making it quick and user-friendly for non-technical users.

You can also deploy the web app using GitHub. You can also deploy your web app using GitHub. To build the app for production, use the following command:

flutter build web --no-tree-shake-icons

After building, follow the deployment steps as shown in this video for the rest of the process.

Last updated