FlutterFlow: Low-code Flutter apps
flutterflow.ioFlutterFlow cofounder here! We thought the HN crowd would want to see the generated code for FlutterMet, so here it is: https://github.com/FlutterFlow/FlutterMetSample/tree/flutter...
We try to generate clean Flutter code that follows best practices – we have a long way to go, but we couldn't be more excited.
Edit: Also, here's the video of us building it (in just under an hour): https://youtu.be/TXsjnd_4SBo
Of all the web based mobile app development services, FlutterFlow makes more sense as flutter has graduated to be a viable cross-platform development software and dart is well-suited for creating a visual programming tool.
I'm excited to see desktop applications built using FlutterFlow as desktop support for flutter is fast improving.
P.S. I've added FlutterFlow to my curated list of startup tools - https://startuptoolchain.com/ under Visual Programming. I wish you all the best.
Can you add saas pass and acmelogin under security and identity management
Sure I'll check them out, Get some feedback & then add it to StartupToolchain.
Thanks for bringing them to my notice.
Congrats!
I see the web/index.html references a service worker that doesn't exist in the repo. Is this the case or am I looking in the wrong place?
Do you have a generated service worker file you can share?
Howdy! Are you planning on Desktop support for the UI builder? I was about to hand you all my money but it doesn't like it exists yet... or at least allow me to set custom dimensions on the editor/preview.
Also, does it support rendering/previewing custom widgets?
FWIW-- I've done a fair amount iOS development and loved IB (despite all the crashes and issues) for the easy visual editing; so, I'm primarily looking at this as a way to better visualize and layout my components (I personally don't need incredibly robust desktop support).
Thanks for the work on this it looks awesome.
Yes, we plan on supporting desktop. Right now you can actually customize the canvas size. Just click on the canvas size to modify it: https://twitter.com/flutterflow/status/1389695362714071043
Love the product, this is incredible!
- Is it possible to set an API request header to include the Firebase ID token?
- Are you able to embed a webview on a page?
- Is there a pattern yet for in-app payments?
In the second one, you can use in_app_webview to do this.
It’ll be great if you had an “about us” section there so I could easily see who is behind it, instead having to google it.
Your backgrounds [1] seem very solid so why not showcase it?
congrats.
would love to see a 5-min version of this video, narrated and/or annotated, with zero formatting, or bootstrap-like default formatting.
one thing that always trips me out with UI builders is seeing how, to produce some 'simple' list, you have to stack a grid, on top of a card, on top of a row, on top of a column, on top of a cell, on top of a row, inside of a column, etc.
just seems like i should be able to drag one simple list-like component into the view, wire up the api/db query, done.
congrats on launch! just wondering since you're here - what is the roadmap now that you're launched and what key hires are you looking to make?
am always interested in how companies transition from a deep build phase into a build-and-market-what-you've-already-built phase.
thanks! we have some exciting features coming up. - deploy to app stores from FlutterFlow, via Codemagic - search functionality, via Algolia - several widgets (map/chat/pop-ups/bottom sheet)
in terms of our team, we're looking to bring on a community manager and a content strategist.
oh man, deploy to app store would be magical. looking forward to that!
if you'd like to chat with me on content strategy, you have my email :)
Hey, can I use the UI design of flutterflow for a tool I'm building.
The tool is called ui-editor and it generates code in reactjs. I'm trying to address few problems in web as an experiment here is the link to the tool https://github.com/imvetri/ui-editor
Is there a way to see FlutterMet running with Flutter-for-web in a web browser?
Hello! Congratulations. How would I hire someone who knows how to use this and could guide me? I think I’d like to hire someone to build in this.
Thanks! We're in the process of building our FlutterFlow community, which will make it easy to find and hire experts.
Where is FlutterFlow with supporting UI import from the design realm (Figma, Sketch etc) ?
Are push notifications on iOS supported?
Congrats on hitting 1.0, Alex and Abel!
I wish you success. I really like Dart and the concept of Flutter.
However: I'm still waiting for a 100% Flutter-based iOS app published in the app store that I can try to make sure that it does not have any apparent jank.
Yes, I know that Flutter 2.2 which launched a few days ago included tools designed to fight some of the sources of jank (e.g. bundling precompiled shaders) but after such a long time of promises from the Flutter team I just want to see a 100% flutter app hitting a solid 60 fps on my own phone, for real.
I think google pay[0] is entirely flutter[1] (how much is actually flutter is unknown). It does seem pretty slow, actually - it’s like it only plays every third frame when animating switching between the app’s tabs.
0: https://apps.apple.com/us/app/google-pay-save-pay-manage/id1...
1: https://developers.googleblog.com/2020/09/google-pay-picks-f...
Here's a subthread about Flutter jank/performance from the 2.0 release back in March:
https://news.ycombinator.com/item?id=26333213
Back then at least one of the "featured" apps had key screens written in e.g. ObjC. Google Pay was also discussed.
My current idea of how to do a non-javascript multi-platform app strategy:
Apple SwiftUI for iOS & macOS.
Flutter for Android, Windows, Linux and possibly a web client.
> Flutter for Android, Windows, Linux and possibly a web client.
Wouldn't Jetpack Compose make more sense for these platforms? It is native for Android and is similar to flutter for web and desktop.
You can't make desktop apps with android or jetpack compose. Find me one written with it that actually distributes their app that way vs. some emulation hack that nobody uses.
Actually you can. They have Compose for Desktop. I don't know how stable and mature it is tough.
I wonder how far you could get using something like https://github.com/carson-katri/SwiftWebUI or https://github.com/TokamakUI/Tokamak to render the Swift app to a webview for the other platforms... I’ve not tried it, I imagine there might be jank and limitations as SwiftWebUI is “a toy project” but with some work could be a legit option - I’ve run pretty bespoke and complex React Native applications as desktop apps via react-native-web and Electron and it worked incredibly well.
I do like the idea of only maintaining a single codebase, but of course it comes with significant trade offs. The idea of building for Apple-first but automatically getting a reasonable fallback for other platforms is quite appealing - as you say, for many businesses it probably makes sense to focus on having the most polished iOS experience possible.
Honestly I’ve been quite impressed with the end results we’ve got from React Native, but you are always going to be lagging behind the native platform.
I'll be frank, the developer experience of swift is horrible. Webdev with typescript, their instant response times in development, lack of compiling and lack of an update cycle (the URL is always the latest version, whether you like it or not) is way more productive than compiled iOS dev. Swift is only good for macOS and iOS effectively now.
Flutter devex is also faster and more responsive, but it just doesn't quite make as a good of a product on iOS. iOS users are higher revenue and have higher standards than android users also.
Yes in my business that I won't specify ios (last 2 revisions) + web users account for over 92% of revenue, with a whole scattering of android versions and related hardware back to 4.4 making up the rest.
A native strategy for ios is absolutely worth the investment of resources and time and flutter will never cut it or be worth the risk of even a small % of users suffering some new bug.
Android gets whatever is quick and easy just to to keep the business ticking on that side so flutter is perfect.
Users do not and should not have to care or be exposed to your cost saving strategy.
Well my logic for flutter is it's made by google, so it's support for android & google chrome will always be far better. Supposedly flutter is basically google's next gen UI toolkit for fuscia, so it will probably stick around.
Nobody focuses on windows or linux desktop, so it will be decent enough for them too. Google effectively owns the browser with chrome and flutter and chrome both use skia as their render system, so the likelihood of long standing bugs between them are reduced further.
Apple doesn't like it when their biggest direct competitor tries to commoditize them, and are not a money maker like games, so they foot drag in subtle ways to make flutter not as good of a thing.
I use iOS personally, so there is also a built in skill component there.
If the company got really big, then I would probably do a native web UI because web developers are easy to hire relative to many other types.
That seems like a smart and pragmatic strategy. Thanks for sharing that idea!
I'm waiting for Flutter to stop draining the battery. On my Mac, a single TextField with a blinking cursor inside uses somewhere between 10% and 20% CPU. This is a complete show stopper for me.
Flutter in iOS Simulator will drain my laptop's battery in an hour. It's quite frustrating. Pre-pandemic, I often worked in cafes and libraries and purchased a long power cable to use when I need to work with Flutter and can't get a seat next to an outlet.
https://github.com/flutter/flutter/issues/21445
https://github.com/flutter/flutter/issues/31865#issuecomment...
https://github.com/flutter/flutter/issues/33833#issuecomment...
I think Flutter Team (and most ppl at Google) are entirely focused on pushing out new features which they can cite on their performance review docs to get higher pay. Few of them focus on user needs. This is why Flutter built Web and Desktop support before finishing Mobile. Flutter Mobile things left undone: no high-quality location module, long-standing bug in camera module on Android, missing Cupertino widgets, a few missing Material widgets (date-time picker), critical info missing from docs, and missing non-trivial examples.
Seems with Flutter being open, the growth of flutter outside of mobile was started by others, with it's being picked up by other teams within google and outside of google.
In this podcast, Eric one of the original flutter guys,said desktop and web started by other team with in google. https://twitter.com/darkofabijan/status/1392061926407028740
Teams from Sony, Toyota and Samsung(Tizen) are giving flutter a go on their own. Also the ubuntu guys are active committers to progress flutter desktop.
There must be something else going on that you are not aware of hogging the CPU. This cannot possibly be the source of that.
I'm simply observing the CPU usage of the Flutter app when a TextField gets the focus. I don't see why it matters whatever else may be hogging the CPU as well.
I tried it on macOS as well as on the iOS simulator and on the web, but I haven't tried the latest version yet. You can try the web version here:
https://gallery.flutter.dev/#/demo/cupertino-text-field
Edit: I have now tried the latest version (2.2) and I'm seeing 12% CPU usage for an idle app with nothing but a focused TextField.
Just out of curiosity; do you see these while running in profile / release mode?
I wouldn’t discard it so easily - flutter does all drawing and compositing on its own, without using system libraries. Could easily be redrawing the whole screen.
Looks like the fix didn't make it in 2.2 :(
https://github.com/flutter/flutter/issues/32170#issuecomment...
Comment here links to before and after videos: https://github.com/flutter/flutter/issues/79298#issuecomment...
Initially this looks really nice - very much the kind of tooling I’ve thought about for Flutter since I started using it.
This product aside, though, I find it funny how the whole “reactive widget tree that gets rebuilt when data changes” and “everything is just nested objects with properties, no XML needed” trend felt like “backlash” against the UI Builders, Visual Basics, and Glades.
And yet now we’re building visual tools to control all the nested reactive component frameworks very much in that same vein.
I think neither paradigm is invalid and neither is a clear winner so fashion drifts back and forth
I think UI builders are considered as good tools, it’s the XML that is “not needed”
I checked it out - but I think most developers would be more comfortable writing Dart code to develop Flutter code. I can see that something like FlutterFlow is useful if you need snippets to e.g. get a stylized layout with little effort.
Kind of like a quick way of getting the look you want, and then pasting it back into Android Studio. Even then I'd change and improve the code - I see that the styles are a bit "hard coded" with a variety of fonts I have never seen the need to use.
The UI is a bit laggy on Safari.
Of course the UI is laggy - the web app is built with Flutter! ¯\_(ツ)_/¯
I've tried it out, registered for the premium to check out the details.
Biggest problem: querying Firebase is problematic. I can bind a collection to a ListView, but in many cases I'd like to map a field to something. For example I have a list of "purchases" and I'd like to map the "buyerId" to an email address. This can't be done, and the generated code is hard to adapt to this kind of use case.
And therein lies the complexity to be honest.
I think it'd worth $30 just as a designer. But you have to be able to code.
Thanks so much for sharing feedback!
In this scenario, your collection is "purchases" and there's a "buyerId" field in a purchase document? And you want to get the email from buyerId?
If buyerId is a uid, you can do another query to get the user document from uid and get the email address from that. I may be misunderstanding the question.
In theory, I love the idea of web builders such as this. I think creating simple CRUD apps is still surprisingly difficult but this tool seems to strike the right balance between complexity and simplicity. At least from the marketing it appears that way. I look forward to playing around with this and I hope for continued integration with as many tools as possible.
At the risk of being a grump, is this yet another thing that could probably be as good as HyperCard, but won't because monetizing these sort of heavily creative things tends not to work?
I was very interested up until I saw the pricing. $70 a month is way too much.
A big issue here is just how easy flutter is, I'd rather invest 20 hours once to build it using Dart, then to pay $800 a year.
FlutterFlow cofounder here. Thanks for your input on our pricing.
It's more than knowing how to code, we've been building with Flutter for a while now, but there's still no way we could have coded FlutterMet in under an hour. It would take us 10 hrs+ to manually do that. But it took <1 hour in FlutterFlow.
https://www.youtube.com/watch?v=TXsjnd_4SBo
Also, we allow you to push the generated code to your Github repository, so you don't have to keep paying us once you build your app. :)
To be honest this is the best selling point in my opinion.
It's a great tool for MVP scenarios and especially in business contexts that price tag is entire negligible compared to the hourly rate of most engineers! So a single hour saved will already make up for it.
May be per project pricing? Amount variable based on no of main widgets / pages used?
Anyway you can come down to maybe 30$.
Anything over $50 becomes a line item in my budget, I can't justify spending $50 a month in the hobbyist space. It's a great idea, I just don't think I can really afford it.
We have a $30/mo plan. :)
I don't think you're the target audience, then. A startup would be happy spending $70 a month (per developer) if it made their developers even 1% more productive:
$100,000 / 12 * 0.01 == $83.33
(This is a low estimate; the value an engineer delivers to an organization is generally much larger than their compensation.)
It's possible that you believe they should introduce a cheaper tier (hobbyist, open source) with a reduced feature set, but IMO $70 is probably undercharging for most tech corporations.
On the contrary, that is way too cheap. Equal to approximately 30 minutes a month of a decent iOS developers time. If the product works it should deliver 10-100 times that value.
I mean, they can always grandfather in us early adopters.
It's for a hobby $70 is a bit hard to justify.
$70/month is definitely too cheap if it delivers what it promises. Unity3D is similar in concept but for games and charges $0/yr/seat, $400/yr/seat or $1800/yr/seat depending on how much your company makes.
TBH I'm very skeptical this is usable for a business. Auto generating good code is very very hard
I'm genuinely curious how easy no-code app development has to become in order to be adopted at scale in the software industry. Right now I'm still getting the sense that most companies prefer to hire a dedicated app development team and have full control over the architecture.
Yes, you generally always run into something that the company building your low code tools will need to cater for or fix for you somehow. It gives you so much grief that you might as well write and own your tools.
its not a binary.. first of all there are tons of people who have software needs who just dont have that option. Whats the solution, hire you? you're expensive, and you have your own backlog to deal with. *they are bottlenecked by you*.
second of all flutterflow (and other code-exporting builders like webflow) generates code you can take over, so it can even be helpful to people who could code it themselves, all it has to do is save some substantial time, which as a UI builder myself a WYSIWYG tool always does.
This. I tried out Flutter Flow a few days back. I was able to do a ton of boring design work very productively, as well as the Firebase integration gamut, but I can't see myself coding app logic with the existing setup.
Awesome, thank you for this insight! Does it generate quality code?
For layouts and basic UI, definitely. But backend integration was a bit convoluted and I think difficult to decipher by design. Like if you expect to just do the stuff on the web app, then download code and make changes, nope not going to happen. You'll have to spend some time with each of the files you downloaded.
No-code is is limited.
I've read about an hospital management system implemented by low-code. So if it can be useful to that complexity levels, maybe the problem isn't technical, but more about marketing, control over the platform, or just general resistance by software developers.
So i wonder, how long do those shifts towards a much higher productivity platform take in the software industry ?
Depends on your use case. I'd say everything that is easily adaptable to a certain amount of common settings, is already there: run of the mill webshops, static websites/blogs/cms-es, forms, "info card" apps. And even with these, run if you want to think outside the box. More complex scenarios require so many knobs and switches that anyone working on them has to become a quasi-developer of a much worse and restrictive "language", akin to SAP or Liferay. So other than that above, put all the "no-code" tech besides "disruptive ai big data blockchain augmented reality platform".
IMO, the answer lies somewhere in between.
The biggest benefit I see from the low code movement is, what I hope, will be a trend in bespoke apps where devs like myself spend less time building a single user experience and more time architecting a cohesive system with bespoke “low code” tools on top, that can help enable non-engineer power users to then work within that business-specific framework to craft the screens and user experiences that the masses then use.
Essentially a way to keep the devs doing more actual engineering and architecture work while the more accessible things like “move this button” or “create a screen that shows this data we already have” can be made more accessible to more people.
That said, I think general purpose low code solutions meant for all businesses and industries will be more for the MVP / rapid prototyping stages for the most part.
But I could well be proven wrong!
Most "apps" are really replacements for simple web pages because of the way Apple is distorting computing.
I don't know where this Apple dig is coming from. Most applications are just putting a bunch of strings into database and displaying strings from a database. This has always been the case with or without Apple, and it works the same way regardless of platform.
That has been the case for most applications since green phosphor displays, just plain CRUD forms.
Works perfectly well for 90% of most businesses.
I think the point is more to take a set of common problems out of the software industry. The classic example for me here is the spreadsheet. For many of its uses, it's definitely not as good as bespoke software, but also way better than paying for a dedicated app development team.
I am conflicted about Flutter. Is it worth learning, over, say Angular (for web) or Xamarin (for mobile and cross platform stuff)?
Flutter for web was just released after a long time in beta stage. It looks like a good language and framework, but I don't see many options for customization. And frankly, the UI composition syntax is tasteless, in my view (Compared to React, which is awesome, or Angular, which is verbose and complex but still understandable)
Flutter is much much better than Xamarin imo. And imo, it has been far easier for many folks to pick up Flutter over ReactNative, especially those coming from JS backgrounds.
That being said, the jank issues with Flutter on iOS make it a showstopper. And web and Windows Flutter is like in alpha.
> And imo, it has been far easier for many folks to pick up Flutter over ReactNative, especially those coming from JS backgrounds.
Would love more context around this statement because I would have assumed the exact opposite, especially when you have to use a completely different language.
Oops, my bad. Those NOT coming from JS backgrounds.
> Xamarin (for mobile and cross platform stuff)?
As a long term (since the first dev releases of MonoTouch) dev who now uses Flutter, I would almost hysterically scream yes.
We still maintain a lot of Xamarin projects: it is always a bit of a self-peptalk to get started after coming out of Flutter.
Seconded. Flutter widget trees make JS callback hell look elegant.
I am still looking for the equivalent of Visual Basic for making modern Web and mobile apps.
It is exciting that we might finally be getting there!
There's React Studio which is free and quite complete, although has some learning curve:
Same here. VB was widely dogged, perhaps rightly so. But I've never been near as fast or productive when making a functional GUI. It's sad that fell out of favor.
The closest-ish i've come is messing with Anvil.
not affiliated, but i do go back every 3 months to find out again that the $50/mo buy-in is too high for my liking.
The framework is open source, so if you don't want to pay, you can self host! You can use the dev environment for free, then deploy on your own hardware:
https://anvil.works/open-source
(Founder here, confirming that this is a Supported Use Case :-P)
VB is 30 years old this year and we still need to re-invent for the Web, sadly.
However there is stuff like OutSystems or Oracle Apex.
By the way Xojo does support WebAssembly.
ASP.NET Web Forms + Telerik components always came really close for me for web apps. And to lesser extend Xamarin Forms for mobile as well.
I'm still looking for the equivalent of DataViews (leading GUI builder in 1998) for modern apps. I'm serious too.
> Check out an app, FlutterMet, that we built in under an hour!
That's great, but how quickly can you:
- get new developers up to speed in an existing product?
- add a new feature to an existing product?
- debug a non-trivial issue?
Does this only support Firebase for now? Are there plans to support "regular" APIs for both auth and querying?
Can it talk to a GraphQL backend ?
You can make it to. https://pub.dev/packages/graphql
It's on our list.
Is it possible to write completely custom components?
We don't support editing code in FlutterFlow atm. But this is something we want to enable.
What we see a lot of our users do now is push to Github (flutterflow branch), and merge in to their main branch where they have their custom logic.
Does it support push notifications?
Considering one has to hand write an ios approach and a material design one unless they support the Flutter Platform widgets plugins most of your would probably need to avoid this.
My bias, I am not the project lead on flutter Platform widgets but I am one of the lower end contributors.
The low-codeness is certainly impressive. Judging from the sample app though, Flutter still has a long way to go in terms of native look-and-feel (on iOS at least).
Isn't it using Material Design?
Native iOS apps that use material design don't feel sluggish or laggy.
The app looks good on an iPhone.
It looks fine, depending on your taste anyway, but there's noticeable scrolling lag and animations are stuttery the first time they play. Feels sluggish in general.
I would consider Flutter apps that have been compiled to ARM and runs on an iPhone natively (basically just using a canvas to draw pixels on) is very fast. However Flutter web is not very fast, but it's getting there.
There are currently some performance issues on iOS, this being the most well known https://github.com/flutter/flutter/issues/76180
Judging from the comment by Hixie on Feb 20 it seems like it is not trivial to fix. For now I would just avoid animations. If you're building end user applications that have high aesthetic requirements then you should be coding using iOS and Swift. I say that as a Flutter developer.