[How-to]Build flutter web UI on FiveM CEF engine

warning :this note is for those who knows some basic stuff of flutter

Before compiling Dart code, Replace the source code HTML with



































<!DOCTYPE html>
<html>
<head>

 <base href="/html/">

 <meta charset="UTF-8">
 <meta content="IE=Edge" http-equiv="X-UA-Compatible">

 <title>set your projectName</title>
 <link rel="manifest" href="manifest.json">

</head>
<body>

 <script>

   var scriptLoaded = false;
   function loadMainDartJs() {
     if (scriptLoaded) {
       return;
     }
     scriptLoaded = true;
     var scriptTag = document.createElement('script');
     scriptTag.src = 'main.dart.js';
     scriptTag.type = 'application/javascript';
     document.body.append(scriptTag);
   }


     loadMainDartJs();

 </script>
</body>
</html>

Place the bat file in the build/ folder (same path as the build/web folder) remove_files_for_Fivem.bat (click to download)
Build command: flutter build web --web-renderer canvaskit --no-source-maps && %cd%/build/remove_files_for_Fivem.bat

(Using canvaskit renderer and not to produce src maps file,eventully, the unnecessary files will be automatically deleted by the bat file.) If using the VS Code terminal,type cmd to switch to cmd .

Put all the files in build/web folder into your fivem script's html folder Configure fxmanifest.lua in the script to be used

Just edit the client_scripts part and server_scripts part ,the files part and ui_page are basically fixed






















fx_version 'bodacious'
games { 'gta5' }

description "flutter UI"

ui_page "html/index.html"

files {
    "html/index.html",
    "html/*.png",
    "html/**/*.png",
    "html/*.js",
    "html/**/*.js",
    "html/*.json",
    "html/**/*.json",
    "html/**/*.wasm",
    "html/**/*.otf",
    "html/**/*.ttf",
}

client_script "client.lua"

start the resource and enjoyed it

If you are looking for some demo:

https://github.com/XNORGATE/web_test

[How-to]Build flutter web UI on FiveM CEF engine

If you are looking for some demo:

Read more

9/20-9/27 研究報告

9/20-9/27 研究報告

Run flutter web on FiveM CEF

Auto_twitch