# [How-to]Build flutter web UI on FiveM CEF engine *warning :this note is for those who knows some basic stuff of flutter* 1. Before compiling Dart code, Replace the source code HTML with ```htmlembedded= <!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> ``` 2. Place the bat file in the build/ folder (same path as the build/web folder) [remove_files_for_Fivem.bat (click to download)](https://cdn.discordapp.com/attachments/817454204108144661/1077344351191056574/remove_files_for_Fivem.bat) 3. **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 .` 4. **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 ```lua= 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" ``` 5. start the resource and enjoyed it ## If you are looking for some demo: [https://github.com/XNORGATE/web_test](https://github.com/XNORGATE/web_test)