Use Flutter Web in ReactJs Without Rewriting Code – Tutorial
Sometimes you have the best of both worlds – a beautifully crafted Flutter Web app and an existing ReactJs website.
You can simply do Add to app of Flutter Web as a module inside your ReactJs project. Without re-writing the code Flutter code is used in Mobile and Web
I have already made a working demo, you can check on github repository.
Let me guide you how to setup new project for Flutter Web with ReactJs
Prerequisite
- Flutter SDK install and flutter path should be in environment variable, you can check here how to set environment variable
- NodeJS should be installed and
npmandnpxcli should be working
Setup new Flutter Web app
- Create a basic counter app in Flutter , this going to act as module
- Build the flutter web app using give command
- This will create a
build/webfolder containing:index.htmlmain.dart.js(compiled Flutter app)- Asset files (CSS, fonts, images)
- Other files (if present)
- You will need the content of
build/webfolder later in tutorial.
cd my_flutter_app flutter build web
Setup new ReactJs app
- Create a basic react app using given command
npx create-next-app@latest npm install
2. Copy the build/web folder from flutter web project and paste within public folder of ReactJs project. Replace files if it ask, we are going to change it later
Note: You can copy build folder in a separate folder in public too, and then you have to adjust path %PUBLIC_URL% in flutter web code. Thats for another blog
Add to App Flutter web in React Js
1. Copy the below content and paster in public\index.html file within react project
2. Below code divides the page in two part, left side to show react app and right side to show flutter web app
<title>React App</title>
<style>
table {
width: 100%; /* Ensure the table takes the full width */
height: 100vh; /* Make the table take the full viewport height */
table-layout: fixed; /* Distribute column widths equally */
}
td {
width: 50%; /* Each cell gets 50% width */
height: 100%; /* Ensure cells take the full table height */
vertical-align: top;
}
#flutter_host,
#root {
height: 100%; /* Make the divs fill the cell height */
}
.my-input {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
</style>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<table>
<tr>
<td rowspan="1">
<div id="root"></div>
</td>
<td rowspan="1">
<div id="flutter_host" >Loading...</div>
</td>
</tr>
</table>
</body>
3. When ReactJs app loads you have to dynamically load Flutter web app by injecting flutter web app
<script src="flutter.js" type="application/javascript" defer></script>
<script src="jsScript.js" type="application/javascript" defer></script>
<body>
<script>
window.addEventListener("load", function (ev) {
console.log("iniside load");
_flutter.loader.loadEntrypoint({
// entrypoint: "%PUBLIC_URL%/web/main.dart.js",
serviceWorker: {
// serviceWorkerVersion: serviceWorkerVersion,
// Updated: Specify the correct path to the service worker file
// serviceWorkerUrl: "%PUBLIC_URL%/web/flutter_service_worker.js?v=",
},
onEntrypointLoaded: async function(engineInitializer) {
let appRunner = await engineInitializer.initializeEngine({
// Pass a reference to "div#flutter_host" into the Flutter engine.
hostElement: document.querySelector("#flutter_host")
});
console.log("flutter_host");
await appRunner.runApp();
}
});
});
</script>
</body>
Launch ReactJs app
- Goto ReactJs project and run below command to launch
- There yo go, you Flutter Web within ReactJs app is ready
npm start
If your index.html shows some error you can copy the entire index.html from the github repository given below
Github Repository
You can download the repo and follow the instruction in README
If still facing any issue ,
Connect with me on Social Media and Discord Community
Check out my YouTube tutorial
You may also like
Opal (by Google): create Mini Ai apps
🚨 BREAKING: OpenAI New GPT OSS Models
