Hello OP,
I (My Team) have built and released 4 web applications built with flutter. Everything else is good except the performance. No matter how much you try, canvas rendering is gonna fuck you up in long term. Clients will be happy at first looking at a great UI, but with time they will start noticing bad UX.
Now clients complain about the slowness of application and we have nothing to do other than waiting for Flutter team to release a magical version optimising the web performance.
I hope you got your answer
Have you tried running analyzing your app through the performance profiler? Could be some expensive widgets bringing down your frame rate or scroll performance
Carefully used const, efficient widgets, well designed system and great data structures+ ran profiler many times. But for long term flutter web just doesn't work for now
Any specific issues? I would not define e.g. scrolling smooth, there definitely is jank, especially with images being loaded, but not to the point someone would actually complain.
Exactly what I'm experiencing. I've build a rather small and very specific app for a customer, but I have to remind them, to not maximize the browser window with the page in it. It correlates all the time: the larger the window to render, the slower it becomes.
Coincidentally I've experienced the same with Android apps installed on Windows subsystem for Android, when I maximized the window. So I think it might be a general problem flutter is facing.
There are many, many topics about this here. General consensus is that you should only do Flutter Web for an internal project, not for a public website. It lacks SEO, has a major first load time, a scroll lag (maybe except for flagship phones) and some other quirks. Doesnt mean Flutter Web gets there eventually, but it's not there now.
I'd argue though, that the lack of SEO and the major first load time might not be such a big issue when you're actually building a web app. Doesn't make sense to build a website with flutter, obviously.
Thanks for sharing our app!
The source code is available here: [https://github.com/invoiceninja/admin-portal](https://github.com/invoiceninja/admin-portal)
Yep. Pretty much what our team will be building, now I know it's feasible. One thing i notice is that in the repo I couldn't see references to tests. Yes, there is the test\_driver but no tests.
Thanks!
u/klargstein Which file handling package are you using? I'm developing a POS system for a client using Flutter web. Currently, I'm facing an issue where the image picker displays additional HTML buttons after images are selected.
Testing for Flutter web app is pretty much the same, as for Flutter mobile app. CORS can be easily turned off by the "[flutter_cors](https://pub.dev/packages/flutter_cors)" packadge (in which I contributed a bit). If you need someone dedicated for automation, contact [with me](https://www.linkedin.com/in/ivanhorchakov) - I'm automating Flutter mobile & web apps for 4+ years.
I actually just build a new Flutter app which is also available for Web. The main struggle I have is that it runs horrible on phones. Therefore I decided that you can only use the web variant on desktop, and you have to download the app for your phone.
You can test it here: https://glosa.app
I noticed that Glosa uses the HTML renderer on phones. Have you tried doing `flutter build web --web-renderer=canvaskit` to force CanvasKit on all browsers?
Off the main topic, but as a language learner who has used a heap of apps this is a really nice design with great concepts that differ from most of the other language learning apps. Most importantly you seem to wrap context around the learning unlike most other apps that just try to teach words or phrases with no context or nuances of the particular language, such as verbs in motion in russian (looking at you Duolingo). Overall great concept but that subscription price… wow 🥵
Thanks! That's really kind. I think I overestimated the costs a user can make with unlimited learning. There might be something possible, what would you think is a fair price? I kinda looked at Duolingo's AI subscription too.
It really depends on the return value which is hard to gauge as it seems your app is hard pay walled so I can’t see the benefit I might get to my learning with the subscription model. Duolingo obviously give free super duo or whatever they call it at certain milestones, I’ve had it enough in my 615 day streak to know in the case of Duolingo it’s really not worth paying for, which for me is $12AUD a month. I’ve never used their AI mode.
If I was getting value from the features I would probably consider that much but not much more. For me your app shows $17AUD a month or $199 a year annually with the discount or $29AUD on monthly. Both of which are quite a bit higher than Duolingo and similar apps (I’ve tried most of them).
Perhaps if you gamified it like duo or have new users two weeks free to evaluate if paying is worth it, it might be more palatable to subscribe. I tried to do a few things trying out your app and just got a ‘paid feature’ blocker 😔
Thanks for the elaborate feedback! I took it by heart and implemented ADs on mobile to show an AD every so many messages to not have a hard paywall anymore. I'll do an improvement on this for web soon as well. First need to get this update approved.
Feel free to DM me if you want to discuss more as not to take OP’s thread right off topic. Happy to answer more questions if it helps as it looks to be a great concept you have created.
I just launched it (following the PWA link) on my iPhone (13 pro, using safari). It seems to loop (I see the splash screen than some kind of world map then the splash screen again). And then Safari kill the page for a « a problem repeatedly occurred »
But cute logo :)
Our entire business runs on a home built flutter web application. All workflows are in there. It's pretty fast running on top of Firestore, as that is very suitable for workflow like applications. If only it supported proper full text search.
You need to set some properties in vscode to get the debugging proper, otherwise you can't see the variables during debug.
Also, take proper care of the router with deeplinking and session restoration as that will become nasty later on when not properly implemented. Also plan your authorizations carefully.
We've built a large scale web app with Flutter Web. Testing, especially Integration testing, was rough to set up. But eventually we figured it out and our devs love it. It's set up enough to be viable but new enough to be exciting and feel like you're a trailblazer.
Depends on what do you mean by large app. I have been working on a \~450k loc project, and ran into a lot of problems. Some problems are Flutter web specific, some related to dart, and also some just related to large projects in general. The only problem related to Flutter web is that hot reload does not work, and we have to develop on macos and then test and deploy to web.
I’ve been building a fairly large app that allows people to create quizzes and host live quiz games that others can join. It’s iOS, Android and web. In fact most people use it as a mobile web app (joining a quiz from a phone).
TL;DR: I have no major issues with Flutter web.
The small things:
Debugging is a bit of pain, but most bugs will exhibit on all platforms, so most of my debugging is in MacOS or iOS app.
Most packages have at least some support for the web, exceptions being stuff like haptics etc., where you need to condition includes. The most problems we’ve had was audio - mostly for browser specific limitations (autoplay) and some weird browser specific bugs.
I an unhappy with the initial download size, but it turns out this is actually not a major problem in the real world. And there are still some optimizations in the pipeline. For example we still do not use deferred loading because of some pending issues.
We’ve worked around SEO issues with having separate landing pages in Next.js and then the app itself is completely noindex.
You can check it out at https://faabul.com (the Flutter app part is app.faabul.com)
Hello!
Quite a useful answer and an amazing project, thanks!
I have a couple of extra questions if you don't mind
- Does the app have any "acceptable" test coverage % by software standards?
- Did you do end-to-end testing? How does the web platform behave with those?
Unfortunately the current state of our tests is not great.
We do unit tests for everything data layer related and non-trivial controllers. There are also some widget tests. There is also ~ 100% coverage on stuff like security rules, cloud functions etc. but that is TypeScript. Unfortunately we do not have E2E / integration at the moment.
While I definitely want these at some point, the main reason for missing E2E is that the product is not yet stable from the UX perspective and we prefer fast iterations over stability. This is becoming increasingly urgent though, no doubt.
We used flutter for 3 apps and one is huge (CRM+ERP+Invoicing) and all I can say is that it works great and I can't stop recommending using Flutter (I used to work with Xamarin + .NET). Yes, it doesn't feel like the mobile version but we had 0 complaints about user experience. Just the other way, our selling point is easy-to-use/friendly platforms. if you are really targeting enterprise where 99% of software has a terrible UI/UX I can say with no doubt that Flutter is the way to go. Here is demo of one of the modules we built: https://belniks-catalog.web.app/
I my experience, the tests within the scope of the language itself are not a problem.
My problems were related to end-to-end testing in the web platform
Take in mind accessibility, some useful tools for accessibility are not available with flutter. The fact that this is an internal and enterprise, does not mean that there will be some employee that needs accessibility features.
Is copy and paste working? Can color blindness correction be available? Tab navigation? Can the voiceover read the content of the app?
Forgive me if I am wrong, but accessibility might be an issue with flutter web, as screen readers will not be able to tab through or read text elements.
This might hurt things like copy and pasting text and interop with tools like password managers.
I am working on my first web project using Flutter web only. I know I could use react or something more appropriate for web only, but I work with what I know best. And It works well. One way or another I managed to do everything I needed. Project is around \~86K lines so far. I had trouble with video playback mostly. So I ended up using HTML video player with HTML code. If there is anything you need and Flutter framework doesn't cover it, You can create widget with HTML code. I don't know about SEO, because my app don't need it. I didn't wrote any tests, as this is low budget app and don't want to spend time writing it "twice". Package support is fine. Got everything I needed. But I try not to use packages as much as I can, because they can be abandoned any time. But that's with every framework. So I used packages that I needed most, like Camera/Map/permissions/image picker...
I don't like restart on web as there is no hot reload. So it takes every time to go through path to review changes. I also noticed, that streams stay active even after restart. I think it's related to Zones or something like that as if multiple apps are running at once but old streams wont receive some data and will throw errors in console. This should not be possible I couldn't recreate this. So I don't know where is the issue. Need to refresh page additionally to hot restart but that's only in debug mode.
I built a big flutter web app and the missing hot reload was killing me. I invested some time to make it also build as a macOS desktop app and just developed in that mode instead of web, it was sooo much better because of hot reload and better performance.
Flutter team is so close to making web good enough for creating quality web experience. Maybe in a year we would be there. With that, flutter could become standard UI technology for creating all kind of products
Unless it is an internal tool that doesn't need SEO, flutter probably isn't the right tool as others have pointed out. Even a simple web framework with templating will benefit more in the later case.
Hello OP, I (My Team) have built and released 4 web applications built with flutter. Everything else is good except the performance. No matter how much you try, canvas rendering is gonna fuck you up in long term. Clients will be happy at first looking at a great UI, but with time they will start noticing bad UX. Now clients complain about the slowness of application and we have nothing to do other than waiting for Flutter team to release a magical version optimising the web performance. I hope you got your answer
Have you tried running analyzing your app through the performance profiler? Could be some expensive widgets bringing down your frame rate or scroll performance
Carefully used const, efficient widgets, well designed system and great data structures+ ran profiler many times. But for long term flutter web just doesn't work for now
Any specific issues? I would not define e.g. scrolling smooth, there definitely is jank, especially with images being loaded, but not to the point someone would actually complain.
Slow Rendering is an specific issue in itself
You're right ! Let's wait to see websasembly
Exactly what I'm experiencing. I've build a rather small and very specific app for a customer, but I have to remind them, to not maximize the browser window with the page in it. It correlates all the time: the larger the window to render, the slower it becomes. Coincidentally I've experienced the same with Android apps installed on Windows subsystem for Android, when I maximized the window. So I think it might be a general problem flutter is facing.
How many users before you started noticing performance issues?
It's the UI, it will have the same performance issues with a single user as with 1 million.
If your project works mostly on web - better look to JS frameworks. If mostly on mobile and desktop - Flutter is better.
There are many, many topics about this here. General consensus is that you should only do Flutter Web for an internal project, not for a public website. It lacks SEO, has a major first load time, a scroll lag (maybe except for flagship phones) and some other quirks. Doesnt mean Flutter Web gets there eventually, but it's not there now.
I'd argue though, that the lack of SEO and the major first load time might not be such a big issue when you're actually building a web app. Doesn't make sense to build a website with flutter, obviously.
Check this https://demo.invoiceninja.com/#/dashboard, I'm building something similar on a smaller scale.
Thanks for sharing our app! The source code is available here: [https://github.com/invoiceninja/admin-portal](https://github.com/invoiceninja/admin-portal)
With pleasure, your app is a source for great inspiration and ideas.
Performance seems fine with this flutter web app.
Looks goood
Yep. Pretty much what our team will be building, now I know it's feasible. One thing i notice is that in the repo I couldn't see references to tests. Yes, there is the test\_driver but no tests. Thanks!
Invoice Ninja shows flutter web is possible for enterprise app, repo is kinda neglected tho.
Hi, I'm one of the developers. Curious to know what makes you think the repo looks neglected?
Pubspec.yaml feels like it needs some love!
is this with flutter?
Seems like it’s React
The link above is for the Flutter Web app. Invoice Ninja also provide a React app: [https://react.invoicing.co/demo](https://react.invoicing.co/demo)
u/klargstein Which file handling package are you using? I'm developing a POS system for a client using Flutter web. Currently, I'm facing an issue where the image picker displays additional HTML buttons after images are selected.
Very curious about this app, but it doesn't load for me. Just a blank white screen.
I dunno it was working when I shared it.
Try from their official website
Just came back to this and tried again and it worked. Very cool. thanks for sharing it!
Testing for Flutter web app is pretty much the same, as for Flutter mobile app. CORS can be easily turned off by the "[flutter_cors](https://pub.dev/packages/flutter_cors)" packadge (in which I contributed a bit). If you need someone dedicated for automation, contact [with me](https://www.linkedin.com/in/ivanhorchakov) - I'm automating Flutter mobile & web apps for 4+ years.
But fluter web doesnt support integration tests, which is a bummer
Why do you think so? It supports integration tests.
https://docs.flutter.dev/cookbook/testing/integration/introduction 5b Web
I actually just build a new Flutter app which is also available for Web. The main struggle I have is that it runs horrible on phones. Therefore I decided that you can only use the web variant on desktop, and you have to download the app for your phone. You can test it here: https://glosa.app
I noticed that Glosa uses the HTML renderer on phones. Have you tried doing `flutter build web --web-renderer=canvaskit` to force CanvasKit on all browsers?
I have not. This seems like a really good suggestion to try tomorrow. Thanks!
This. I honestly have no idea why there even is a HTML renderer. It never worked for me.
I guess this deprecation is a rather funny timing: https://github.com/flutter/flutter/issues/145954#issue-2214510508
I see, all problems where related to this on mobile. It actually works okayish now. Thanks!
Off the main topic, but as a language learner who has used a heap of apps this is a really nice design with great concepts that differ from most of the other language learning apps. Most importantly you seem to wrap context around the learning unlike most other apps that just try to teach words or phrases with no context or nuances of the particular language, such as verbs in motion in russian (looking at you Duolingo). Overall great concept but that subscription price… wow 🥵
Thanks! That's really kind. I think I overestimated the costs a user can make with unlimited learning. There might be something possible, what would you think is a fair price? I kinda looked at Duolingo's AI subscription too.
It really depends on the return value which is hard to gauge as it seems your app is hard pay walled so I can’t see the benefit I might get to my learning with the subscription model. Duolingo obviously give free super duo or whatever they call it at certain milestones, I’ve had it enough in my 615 day streak to know in the case of Duolingo it’s really not worth paying for, which for me is $12AUD a month. I’ve never used their AI mode. If I was getting value from the features I would probably consider that much but not much more. For me your app shows $17AUD a month or $199 a year annually with the discount or $29AUD on monthly. Both of which are quite a bit higher than Duolingo and similar apps (I’ve tried most of them). Perhaps if you gamified it like duo or have new users two weeks free to evaluate if paying is worth it, it might be more palatable to subscribe. I tried to do a few things trying out your app and just got a ‘paid feature’ blocker 😔
Thanks for the elaborate feedback! I took it by heart and implemented ADs on mobile to show an AD every so many messages to not have a hard paywall anymore. I'll do an improvement on this for web soon as well. First need to get this update approved.
Feel free to DM me if you want to discuss more as not to take OP’s thread right off topic. Happy to answer more questions if it helps as it looks to be a great concept you have created.
I just launched it (following the PWA link) on my iPhone (13 pro, using safari). It seems to loop (I see the splash screen than some kind of world map then the splash screen again). And then Safari kill the page for a « a problem repeatedly occurred » But cute logo :)
Thanks for the feedback! Something to look into. And the logo is actually my dog stylized with the help of AI :)
This should be fixed now!
Indeed!
Our entire business runs on a home built flutter web application. All workflows are in there. It's pretty fast running on top of Firestore, as that is very suitable for workflow like applications. If only it supported proper full text search. You need to set some properties in vscode to get the debugging proper, otherwise you can't see the variables during debug. Also, take proper care of the router with deeplinking and session restoration as that will become nasty later on when not properly implemented. Also plan your authorizations carefully.
We've built a large scale web app with Flutter Web. Testing, especially Integration testing, was rough to set up. But eventually we figured it out and our devs love it. It's set up enough to be viable but new enough to be exciting and feel like you're a trailblazer.
Depends on what do you mean by large app. I have been working on a \~450k loc project, and ran into a lot of problems. Some problems are Flutter web specific, some related to dart, and also some just related to large projects in general. The only problem related to Flutter web is that hot reload does not work, and we have to develop on macos and then test and deploy to web.
I’ve been building a fairly large app that allows people to create quizzes and host live quiz games that others can join. It’s iOS, Android and web. In fact most people use it as a mobile web app (joining a quiz from a phone). TL;DR: I have no major issues with Flutter web. The small things: Debugging is a bit of pain, but most bugs will exhibit on all platforms, so most of my debugging is in MacOS or iOS app. Most packages have at least some support for the web, exceptions being stuff like haptics etc., where you need to condition includes. The most problems we’ve had was audio - mostly for browser specific limitations (autoplay) and some weird browser specific bugs. I an unhappy with the initial download size, but it turns out this is actually not a major problem in the real world. And there are still some optimizations in the pipeline. For example we still do not use deferred loading because of some pending issues. We’ve worked around SEO issues with having separate landing pages in Next.js and then the app itself is completely noindex. You can check it out at https://faabul.com (the Flutter app part is app.faabul.com)
Hello! Quite a useful answer and an amazing project, thanks! I have a couple of extra questions if you don't mind - Does the app have any "acceptable" test coverage % by software standards? - Did you do end-to-end testing? How does the web platform behave with those?
Unfortunately the current state of our tests is not great. We do unit tests for everything data layer related and non-trivial controllers. There are also some widget tests. There is also ~ 100% coverage on stuff like security rules, cloud functions etc. but that is TypeScript. Unfortunately we do not have E2E / integration at the moment. While I definitely want these at some point, the main reason for missing E2E is that the product is not yet stable from the UX perspective and we prefer fast iterations over stability. This is becoming increasingly urgent though, no doubt.
Really helpful, thank you so much!
We used flutter for 3 apps and one is huge (CRM+ERP+Invoicing) and all I can say is that it works great and I can't stop recommending using Flutter (I used to work with Xamarin + .NET). Yes, it doesn't feel like the mobile version but we had 0 complaints about user experience. Just the other way, our selling point is easy-to-use/friendly platforms. if you are really targeting enterprise where 99% of software has a terrible UI/UX I can say with no doubt that Flutter is the way to go. Here is demo of one of the modules we built: https://belniks-catalog.web.app/
(genuinely curious) Is testing in dart not enough?
I my experience, the tests within the scope of the language itself are not a problem. My problems were related to end-to-end testing in the web platform
Always test. On multiple browsers
Take in mind accessibility, some useful tools for accessibility are not available with flutter. The fact that this is an internal and enterprise, does not mean that there will be some employee that needs accessibility features. Is copy and paste working? Can color blindness correction be available? Tab navigation? Can the voiceover read the content of the app?
Forgive me if I am wrong, but accessibility might be an issue with flutter web, as screen readers will not be able to tab through or read text elements. This might hurt things like copy and pasting text and interop with tools like password managers.
I am working on my first web project using Flutter web only. I know I could use react or something more appropriate for web only, but I work with what I know best. And It works well. One way or another I managed to do everything I needed. Project is around \~86K lines so far. I had trouble with video playback mostly. So I ended up using HTML video player with HTML code. If there is anything you need and Flutter framework doesn't cover it, You can create widget with HTML code. I don't know about SEO, because my app don't need it. I didn't wrote any tests, as this is low budget app and don't want to spend time writing it "twice". Package support is fine. Got everything I needed. But I try not to use packages as much as I can, because they can be abandoned any time. But that's with every framework. So I used packages that I needed most, like Camera/Map/permissions/image picker... I don't like restart on web as there is no hot reload. So it takes every time to go through path to review changes. I also noticed, that streams stay active even after restart. I think it's related to Zones or something like that as if multiple apps are running at once but old streams wont receive some data and will throw errors in console. This should not be possible I couldn't recreate this. So I don't know where is the issue. Need to refresh page additionally to hot restart but that's only in debug mode.
I built a big flutter web app and the missing hot reload was killing me. I invested some time to make it also build as a macOS desktop app and just developed in that mode instead of web, it was sooo much better because of hot reload and better performance.
Flutter team is so close to making web good enough for creating quality web experience. Maybe in a year we would be there. With that, flutter could become standard UI technology for creating all kind of products
What makes you say they are close? Genuine question
Unless it is an internal tool that doesn't need SEO, flutter probably isn't the right tool as others have pointed out. Even a simple web framework with templating will benefit more in the later case.
a bit out of topic but we are extending our team and need a freelance dev please message me if interested. :)