[How-to] Layout in whole different way (Dart Proramming) | FiveM

FiveM Resource Development & Modding Modding Tutorials
, , , ,
1

Screenshot_20230221_173942_YouTube
Screenshot_20230221_173942_YouTube1916×1079 44.9 KB

Hello there, as topic
flutter is certainly a dope framework
and In my opinion Dart widget is a great way to layout but required some basic knowledge

so i did lots of research and test on how the Flutter web works on chromium ,at beginning I try to host it and embedded it into ifame then interactive with Javascript , cuz the main way for flutter to rendering is using services_worker ,but CEF seems can’t load it

so i changed to realize why the other way of flutter rendering on chrome can’t load the script too

and i finally finds out it’s just a based-href issue
so i made some notes,template,batch files for developers

flutter web is not the best way for web page now
but dart widget is actually more efficiency and better performance on rendering web than vanilla js or jquery

also I’m a big flutter fan and i believed fivem has lots of talented devs
hope you guys give it a try!

here some note and sample for how to communicate between dart and lua
starred the repo if you are interested :smiling_face_with_three_hearts:

[How-to]Build flutter web UI for FiveM CEF

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

  1. 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>

  1. Place the bat file in the build/ folder (same path as the build/web folder) remove_files_for_Fivem.bat (click to download)

  2. 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 .

  1. 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"
  1. start the resource and enjoyed it

A simple demo: https://youtu.be/-3V0NXfZqDU

demo compiled src:demo

demo uncompiled dart code :uncomplied dart src

notes in web note

Are you tired of building FiveM NUI scripts using traditional web technologies? Look no further! With the power of Dart’s widget programming, you can now build FiveM NUI scripts in a more streamlined and efficient manner. In this tutorial, we will guide you through the process of running a Flutter web project on FiveM CEF, allowing you to harness the power of Dart and create dynamic and engaging user interfaces for your FiveM resources. Follow these simple steps and elevate your NUI scripts to the next level!

— Attractive sentences from ChatGPTplus

3 Likes