How to deploy flutter web on server?

Issue

I was learning Flutter web. Now I want to deploy this code in the real server.
The flutter code here: in the lib folder

void main() => runApp(new MyApp());    
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter layout demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter layout demo'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

How can I deploy this code on the server ? I am new on the Flutter web.

Solution

[UPDATE]

To create a production build for web now Flutter supports flutter build web command similar to other platforms (android and ios)
and you will see

build/web

folder generated with the assets folder and you can simply deploy it on your server.

[OLD ANSWER STEP 1 & 2 No longer required ]

you simply need to do a production build by using a webdev tool.
to install webdev you need a pub tool,

  1. so go to the location where you have dart SDK installed and inside the bin folder you should have a pub batch file. You need to provide the bin folder’s path to the environment variable in order to use pub from cmd.

  2. now open cmd and hit the below command to install webdev

    pub global activate webdev

    // in your intelliJ Idea terminal

  3. now go to the root folder of your project and do a build in release mode

    flutter build web

  4. you should see a build folder (/build/web) in the root directory, just copy that folder and host it on a web server.

I used the same way to deploy it to GitHub pages here’s how in detail guide.

Some useful link: https://dart.dev/tools/webdev#build

Here’s the running flutterweb app

Answered By – Mahesh Jamdade

Answer Checked By – Robin (FlutterFixes Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *