Launch HN: FlutterFlow (YC W21) – Build Apps Visually
63 comments
This looks super exciting. As an Android developer who has not yet built a Flutter app, I'm intrigued if this can be a stepping stone to ramping up on flutter.
I looked over the video. It is nice to see a compressed video, but it was still hard to understand what to pay attention to inside a 20 minute video. It would be great if you added callouts to the important moments so people could easily jump to the important items.
Is Firebase a requirement? I tried to create a sample app and was immediately told I needed to setup Firebase. I didn't see a way to skip that step, but perhaps it is because I used a sample template? I would prefer to use GraphQL as a backend, and am not sure if the full Firebase stack (auth, storage, realtime) are used, or if you can swap pieces in and out when desired.
Congratulations on your launch!
I looked over the video. It is nice to see a compressed video, but it was still hard to understand what to pay attention to inside a 20 minute video. It would be great if you added callouts to the important moments so people could easily jump to the important items.
Is Firebase a requirement? I tried to create a sample app and was immediately told I needed to setup Firebase. I didn't see a way to skip that step, but perhaps it is because I used a sample template? I would prefer to use GraphQL as a backend, and am not sure if the full Firebase stack (auth, storage, realtime) are used, or if you can swap pieces in and out when desired.
Congratulations on your launch!
Highly recommend the appbrewery flutter bootcamp (it’s a video course). It’s $10 and will get you up and running quickly. I have no affiliation with them other than as a happy customer.
I took the Appbrewery course and it seemed extremely basic and also not updated for latest Flutter versions. I found the free Flutter Apprentice on Ray Wenderlich site much better.
I took it last year, the woman has a mesmerizing voice! (and the course is great too :D)
If you're an experienced software dev it's a bit basic.
I like Flutter a lot, but I'm not a fan of Dart. It's a false friend, it makes you believe it's simple and mostly a copy of your favorite language, but once you start to dig a little deeper it feels like something bolted on, hacky, not designed.
I come from the .net world which is the exact opposite: C# is a superb language but every UI framework MS has ever produced is sub par. Now if I could get Flutter with C# I would be a happy man.
I like Flutter a lot, but I'm not a fan of Dart. It's a false friend, it makes you believe it's simple and mostly a copy of your favorite language, but once you start to dig a little deeper it feels like something bolted on, hacky, not designed.
I come from the .net world which is the exact opposite: C# is a superb language but every UI framework MS has ever produced is sub par. Now if I could get Flutter with C# I would be a happy man.
I am slowly trying to make this happen https://hydro-sdk.io/
Flutnet[1] - either a dream come true, or a nightmare.
[1] https://www.flutnet.com/
Just learn native flutter and dart. If you cant learn a new lang, you shouldn't be developing.
Huh. I really enjoy Dart and found a lot of it very elegant. What about it did you not like?
Of course it's highly subjective but here are a few examples:
There's too much syntactic sugar for my taste to the point it gets diabetic.
Callable classes really? For example you can write MyClass()();
Underscore to mark a variable or a function private, but you can still use an underscore to declare a variable inside a function so it muddles the comprehension. Are we going to lose some precious milliseconds if we have to write private in front of a variable?
There's also the need to use buildrunner for almost everything since the language wasn't thought out for modern use cases. It works, but this is very inelegant IMHO. When I peak at the generated code I don't feel fluent in Dart quite the opposite.
Then there's the ultra strict linter that won't let me add an empty new line where I want. The resulting code is very compact and is harder to read.
There's too much syntactic sugar for my taste to the point it gets diabetic.
Callable classes really? For example you can write MyClass()();
Underscore to mark a variable or a function private, but you can still use an underscore to declare a variable inside a function so it muddles the comprehension. Are we going to lose some precious milliseconds if we have to write private in front of a variable?
There's also the need to use buildrunner for almost everything since the language wasn't thought out for modern use cases. It works, but this is very inelegant IMHO. When I peak at the generated code I don't feel fluent in Dart quite the opposite.
Then there's the ultra strict linter that won't let me add an empty new line where I want. The resulting code is very compact and is harder to read.
yes, we've been writing a lot of Dart over the last couple of years and also enjoy it quite a lot. interested in hearing what issues GP faced.
@abelsm i also tried out your sample app https://app.flutterflow.io/run/ByqwG33rw80qyN39ooNq and think i found a small bug - when i go to customize my name before joining, and hit Continue, nothing happens.
Thanks! Many of our users have found it to be a good way to learn Flutter basics :)
Firebase is not required, but it is the easiest way to get started. We also support 3rd party API integrations, so that users are free to use whatever backend they prefer.
Firebase is not required, but it is the easiest way to get started. We also support 3rd party API integrations, so that users are free to use whatever backend they prefer.
if you are coming from Android native dev, its not as deep of learning curve...
Think of it this way, where Android has every view as stateful or stateless, instead in Flutter it's broken up into Stateful widgets and stateless widgets.
The only increase in time is that in the data binding side as it's not prettied up with libraries that automate that side.
Think of it this way, where Android has every view as stateful or stateless, instead in Flutter it's broken up into Stateful widgets and stateless widgets.
The only increase in time is that in the data binding side as it's not prettied up with libraries that automate that side.
This looks awesome, but sadly, your education plan is practically unusable for most of Latin America, where .edu (or .ac) email addresses are very rare. I'm a college student and I can't apply because my university uses our country TLD.
I hope you can reconsider this policy and begin using university domain lists [1] instead of just checking for TLDs.
[1]: See https://github.com/Hipo/university-domains-list, by example.
I hope you can reconsider this policy and begin using university domain lists [1] instead of just checking for TLDs.
[1]: See https://github.com/Hipo/university-domains-list, by example.
Also, please consider NGO/non-profit pricing. I work as a volunteer on a local NGO working on government transparency. We're severely underfunded, and we'd love to be able to use tools such as these, but it's a pretty difficult cost to bear.
Thanks for your feedback! The reason we don't have this yet is only because we're a small team, but we're growing and will definitely have NGO/non-profit discounts!
Thank you! I did notice the regional discount, which I really appreciate (not sure if it's based on PPPs, but it's refreshing to see from LatAm).
We're allow-listing domains for any educational institutions that's not on our list. Thanks for sending that link, we'll take a look!
Integrating with https://education.github.com/pack/ might be easier as GitHub takes care of all the verification processes. (and it allows high-school students too)
I've been trying to use this product for a personal app I'm making. its really good until its not. There needs to be better controls for mock data in listviews, I don't want to hook up to API in the tool, I have my own data, but I need the listview to aleast pretend theres data there.
Also the lack of positioned widgets in conjunction with stack views makes it hard to transfer the flutterflow experience to the actual app. What happens if I want anchor a view to the bottom of the screen in a stack? I cant without positioned widget. Imagine I have this view https://github.com/o1298098/Flutter-Movie/blob/master/srceen... and I want the bottom white part to be the "top" of the stack. This image isnt the best example because the poster is the entire background, imagine instead I had a column and I wanted to stack the bottom white card over it.
These kind of details make me have to abandon a almost perfect tool, but its utility is not quite 100% that is causes me to have to throw it all out.
I really wish I could use this tool with all the native widget, not just some.
Also the lack of positioned widgets in conjunction with stack views makes it hard to transfer the flutterflow experience to the actual app. What happens if I want anchor a view to the bottom of the screen in a stack? I cant without positioned widget. Imagine I have this view https://github.com/o1298098/Flutter-Movie/blob/master/srceen... and I want the bottom white part to be the "top" of the stack. This image isnt the best example because the poster is the entire background, imagine instead I had a column and I wanted to stack the bottom white card over it.
These kind of details make me have to abandon a almost perfect tool, but its utility is not quite 100% that is causes me to have to throw it all out.
I really wish I could use this tool with all the native widget, not just some.
Hey! Thanks so much for the feedback.
You're right that there's currently no way to simulate the mock data view without actually adding a Firestore query or API call. That's a useful suggestion.
For the positioned issue, you can set the alignment of items in a Stack (same as the Align widget in Flutter). In our experience this tends to cover the vast majority of cases, however you're right that we don't currently support the Positioned widget! (For absolute positioning in pixels). And in general there are plenty of other widgets we still want to support. We're adding more and more widgets every week so we can deliver as much of the power of Flutter to folks.
You're right that there's currently no way to simulate the mock data view without actually adding a Firestore query or API call. That's a useful suggestion.
For the positioned issue, you can set the alignment of items in a Stack (same as the Align widget in Flutter). In our experience this tends to cover the vast majority of cases, however you're right that we don't currently support the Positioned widget! (For absolute positioning in pixels). And in general there are plenty of other widgets we still want to support. We're adding more and more widgets every week so we can deliver as much of the power of Flutter to folks.
Mock Data or even some way to wrap say a container and list it as the data model view. Then you can say repeat this 5-10 times... That way I can copy the code over directly to VScode and not have to remove the temporary duplicated "fake" widgets. This is the type of feedback I want to give because its almost a perfect tool, but then when I have to strip out all this duplicated code, the tool almost isnt saving me time. I dont feel like I can use it without having to go out of my way to make the tool work. I think this tool has alot of potential. I really hate how flutter native tooling has no UI preview.
What happens if I want anchor a view to the bottom of the screen in a stack?
You can use Align for that.
You can use Align for that.
I didnt see a way to do this if the column is starting TOP to BOTTOM. I specifically want to set the second item in the stack ( ie the one on top ) to be anchored to bottom of the physical screen. I didnt see a way to do this with flutter flow's drag and drop.
Looks great! Reminds me very much of AppGyver, which is a tool I've been using in few client projects. It uses react native under the hood, allowing for example creating logic using either the node-based logic builder or plain JavaScript. Interested to hear where do you see your advantage over AppGyver and similar tools?
One pain point of mine in visual app builders is the not being able to search the "code", for example when I've built a logic for fetching and mutating data in one view and now need to change it but can't remember where it is. Have you come across this problem and have you already solved it/have a plan for solving it?
One pain point of mine in visual app builders is the not being able to search the "code", for example when I've built a logic for fetching and mutating data in one view and now need to change it but can't remember where it is. Have you come across this problem and have you already solved it/have a plan for solving it?
Re: AppGyver, one big difference is the ability to generate clean code that can be exported. And there's also Flutter, which we think is the framework that will finally make low-code app builders work.
Being able to easily search and find where your network requests, custom function calls, conditional variables, etc are used is definitely something that has come up. We've started making progress by adding visual elements that help you identify them. For instance, you can see what element on the widget tree has a query (or action) on it based on an icon + color. We plan on adding toggles for overlays of different views, along with the ability to see where an API call is used (from the API configuration page), or where a specific collection is read (from the Firestore configuration page). It's definitely solvable, and we'll keep talking to users and iterating till we get there :)
Being able to easily search and find where your network requests, custom function calls, conditional variables, etc are used is definitely something that has come up. We've started making progress by adding visual elements that help you identify them. For instance, you can see what element on the widget tree has a query (or action) on it based on an icon + color. We plan on adding toggles for overlays of different views, along with the ability to see where an API call is used (from the API configuration page), or where a specific collection is read (from the Firestore configuration page). It's definitely solvable, and we'll keep talking to users and iterating till we get there :)
Is Flutter still a promising bet? Haven't heard much about it lately, but in principle I find it very interesting.
Edit: wow, I am surprised, according to statista it is the most popular mobile cross platform framework (roughly on par with React Native): https://www.statista.com/statistics/869224/worldwide-softwar...
Edit: wow, I am surprised, according to statista it is the most popular mobile cross platform framework (roughly on par with React Native): https://www.statista.com/statistics/869224/worldwide-softwar...
I've been using this myself and really enjoying it.
I haven't been focusing too much on building a full app via this, but it is fantastic for building a mock up of what something would look like in Flutter.
It's easier to use and looks more like an app than anything you would build in Balsamic or Figma, since it is basically a drag n' drop Flutter UX. At the end, you get the code used for building it which is awesome for moving from mockup -> the actual app.
I haven't been focusing too much on building a full app via this, but it is fantastic for building a mock up of what something would look like in Flutter.
It's easier to use and looks more like an app than anything you would build in Balsamic or Figma, since it is basically a drag n' drop Flutter UX. At the end, you get the code used for building it which is awesome for moving from mockup -> the actual app.
Thanks! We're gonna work hard to get it to a place where the set up you love and are used to is also available in FF (or vice versa), and that you get the best of both worlds.
I was a beta tester for Flutter Flow. While I didn't end up publishing an app, (Product-market fit wasn't where we wanted and we pivoted hard where an app wasn't needed), myself and coworkers went through a few iterations using it and really enjoyed my experience. The code export feature and overall business model make this a really great and fair tool for small development teams.
Congrats on the launch and best of luck folks!
Congrats on the launch and best of luck folks!
Great to hear from an early access user, thanks so much and very glad you enjoyed the experience!
Wish you the best of luck as well
Wish you the best of luck as well
Congrats on the launch. Ive switched from webflow to flutter for the website Im building (for my startup project). Flutter is awesome (though I still "wonder what the result is gonna be" but way less than with css) and I believe youre betting on a great horse. I dont know if youve noticed but when you browse a flutter website with chrome on a desktop computer, it offers you to install the app natively! Like you said: super cross-platform. Initially I was using webflow because I dont understand a thing to css and I find the paradigm sux overall. But then as a consequence webflow isnt my taste as well. I was building my android app with flutter and I thought I should just do the website with it as well. Best of luck, I think youre a hot startup. Ps: maybe you should consider to market it for website as well, not only apps (sry if you do already). Im no expert to say it will be convincing for this end but Im never going back to html5 and its derivative frameworks lemme tell you that :)
I've taken a look at the generated code very quickly. You're using a lot of paddings in columns for example where I would use a SizedBox with no child in between the elements. Or even better, expandables. It makes for less nested elements, plus padding used like that feels like a translation of css to flutter. I rarely need padding but maybe its just me. Also you may have a good reason for doing so.
Also I think the standard is to prefix class members with a _ - although I dont like that since it hinders readability (maybe you dont like it either and want to instore your own standard)
I would definitely work at having the fewest levels of nested elements as possible as its a main thing that average prog dont like in flutter. Also eliminate the need to hardcode sizes whenever possible (expandables, percentages - using layoutbuilder is the example of top of my head, etc)
Also I think the standard is to prefix class members with a _ - although I dont like that since it hinders readability (maybe you dont like it either and want to instore your own standard)
I would definitely work at having the fewest levels of nested elements as possible as its a main thing that average prog dont like in flutter. Also eliminate the need to hardcode sizes whenever possible (expandables, percentages - using layoutbuilder is the example of top of my head, etc)
Thanks for the suggestions! Yes, there's definitely room for improvement with the generated code ... I think the padding -> SizedBox conversion at least in some cases (only when main-axis padding is added) can be automated. We can experiment with code improvement features such as that and see how it works.
Expanded + Percentages for widths are possible already
Expanded + Percentages for widths are possible already
At the risk of seeming a little bit nitpicky here, thing is: the end user shouldnt even use padding in this case. What Im saying is that when I look at a tool like that, what I will look for is how well you embrace the paradigm of the framework. Cause its greater than html5 imo - for the use cases were talking about. It should lead to fewer editor UI, fewer buttons, fewer basic options. Padding in this case should probably be only cross axial (or whatever) and then it becomes rarely used and then leads to better editor UI. Fewer hardcoded values as well - remember its "super cross platform". Should be hard to enter values.
Im only saying this to inspire you - not sure what the solution should ultimately be.
:D
Im only saying this to inspire you - not sure what the solution should ultimately be.
:D
Agreed, making it more natural to create apps in a way that follows Flutter best practices is a desirable end goal. There's so much to improve, it's exciting :-)
The example app doesn’t work on latest iOS Safari on iPhone SE 2020. After 2 long loading screens you can progress through the app until you need to pick categories, but that screen is unscrollable, so you’re stuck. Trying to go back breaks navigation and dumps you on a login page after a while.
It would be great if this tool also had better theming options. Perhaps more pre-configured themes that auto apply. I feel like you could take all these pallets and just make them auto-selectable themes. https://material.io/design/color/the-color-system.html#color...
Great job!
Be happy if you can satisfy my technical curiosity:
- Do you render native flutter web view when in WYSIWIG editing mode? If so - how do you support drag-n-drop over it? If not - how do you make it look the same as web preview app?
- I don't see in free plan any data/network related source code — is it hidden in your libs or all the machinery is transparent in the source code (as long as i download it)?
Be happy if you can satisfy my technical curiosity:
- Do you render native flutter web view when in WYSIWIG editing mode? If so - how do you support drag-n-drop over it? If not - how do you make it look the same as web preview app?
- I don't see in free plan any data/network related source code — is it hidden in your libs or all the machinery is transparent in the source code (as long as i download it)?
Absolutely fantastic. I’m a big Flutter fan and I figured it was just a matter of time before someone conjured this up. Well done lads.
How do you find flutter's resource use (CPU/RAM) and general UI performance compared to native equivalents?
There have been charged arguments on HN over the past few months over it.
Ex: https://news.ycombinator.com/item?id=26335062
There have been charged arguments on HN over the past few months over it.
Ex: https://news.ycombinator.com/item?id=26335062
It's not quite an apples-to-apples comparison, but the memory use of FlutterFlow is comparable to WebFlow. Our landing page is built using WebFlow, and I compared memory use of that to a comparably sized project in FF.
Performance could certainly be improved (especially for Web), but it's gotten much better over the last year.
Performance could certainly be improved (especially for Web), but it's gotten much better over the last year.
I want visual basic style UI builder for flutter but still want to code the business logic. Is that what this can do?
There are 3 ways you can use custom code for business logic:
- Custom Functions: https://www.youtube.com/watch?v=CbNtmue0ZZo
- Custom Widgets: https://community.flutterflow.io/c/whats-new-in-flutterflow/...
- Custom Actions: https://community.flutterflow.io/c/whats-new-in-flutterflow/...
The reason there are 3 different kinds of custom code is so that it can easily integrate with the visual builder ... for instance a "Custom Action" function will show up when you add an action on a Button Tap, or TextField submit. A "Custom Widget" can be dragged in and passed parameters, and a "Custom Function" can be used to set values. Would love any feedback
- Custom Functions: https://www.youtube.com/watch?v=CbNtmue0ZZo
- Custom Widgets: https://community.flutterflow.io/c/whats-new-in-flutterflow/...
- Custom Actions: https://community.flutterflow.io/c/whats-new-in-flutterflow/...
The reason there are 3 different kinds of custom code is so that it can easily integrate with the visual builder ... for instance a "Custom Action" function will show up when you add an action on a Button Tap, or TextField submit. A "Custom Widget" can be dragged in and passed parameters, and a "Custom Function" can be used to set values. Would love any feedback
I tried using the custom widget, they dont work. I kept getting errors using and there's no helpful tool tips or any messaging why it doesnt work. Providing boilder plate/sample custom widget code would be helpful.
There were a lot of issues with custom widgets when we first launched the feature, we've deployed several fixes since then. But there's still more to do on our end to make it clear what errors you're getting. Thanks for the suggestion!
That's cool. Ill dig in bit further. Sorry I have not read the above links yet. But follwup question may be answered in them. I noticed a github connect feature. Is that for being able to pull the code into your own IDE and develop locally or does all code need to be added inside FlutterFlow?
Yep, you can push the latest changes directly to Github. We always use a specific branch "flutterflow". Users can then merge in changes, as long as the changes on the main branch are not changing the layout visuals significantly, Git handles the merge nicely.
Ofc you can't import code into FF from your main branch, at least at the moment. But it's still been working well for our users
Ofc you can't import code into FF from your main branch, at least at the moment. But it's still been working well for our users
This looks great. I signed up for a free account to test it out. My only complaint so far is the assumed integration with Firebase, perhaps this is because it's Flutter and they use everything google? Is there a way to integrate other DBs? I see the API feature is only available for premium plans.
The reasons we prioritized Firebase is because it works really well with Flutter and was also what most of our early users preferred. FlutterFlow itself is in fact a Flutter+Firebase app. We take the best ways we know how to build Flutter+Firebase apps and make it easy to do, in a browser.
We definitely want to support more DBs in the future, just a matter of time. Meanwhile, we see some users achieve that goal using API integrations and code export
We definitely want to support more DBs in the future, just a matter of time. Meanwhile, we see some users achieve that goal using API integrations and code export
Beautiful product!
As the saying goes, the best "enterprise" products are borne out of frustration you experience while trying to build your own consumer product - sounds like this was exactly how you landed on FlutterFlow :-)
As the saying goes, the best "enterprise" products are borne out of frustration you experience while trying to build your own consumer product - sounds like this was exactly how you landed on FlutterFlow :-)
Congrats on your launch. Have you taken any steps to help app developers using this tool make their apps accessible with a screen reader, e.g. prompting them to add text labels to image buttons?
Thanks! Some screen reader features will work out of the box (thanks to the magic of Flutter!), but we're also going to add labels for actions soon (so e.g. buttons will tell the user what it will do). Adding labels to images is another item we could add to the list.
Does this provide access to the Bluetooth API?
We don't have an explicit plugin for Bluetooth yet, but it is possible as you can add custom code inside the platform! That way, you can still use FlutterFlow even if one or two small features you need aren't explicitly supported yet.
Looks great. But is it restricted to building mobile apps only or can it also help you build web apps in Flutter?
Where can I find the source code for flutterflow?
Flutter. Remember, it exists so Google can ram more ads and tracking down our throats (and eventually replace HTML and an open web).
Don't use it.
Don't use it.
Flutter is an open source framework for building cross platform applications. FlutterFlow combines a UI builder with pre-built templates and Firebase/API integrations, generates clean Flutter code, and allows you to deploy to app stores directly from your browser. This enables extremely fast iteration, from product idea concepts and designs to working Flutter apps. As an example of what’s possible, we built an internal app for playing trivia games by using the jservice.io API and Firebase all in under 2 hours:
Time lapse of building the app: https://youtu.be/Fm4jjpuKM1E
Link to live version of the app: https://app.flutterflow.io/run/ByqwG33rw80qyN39ooNq
Exported source code: https://github.com/FlutterFlow/ff-trivia/tree/flutterflow
Alex and I, along with a friend of ours from Google, quit our jobs in 2019 to work on a cross-platform mobile app that ultimately failed. It was a learning opportunity, and it also led us to feel the pain of the slow iteration process every time we wanted to roll out a new experience. We were able to experiment with various landing pages within hours, but building new screens and app experiences took weeks or even months. For over a year now, we’ve been tirelessly working on fixing this problem.
I first fell in love with coding by pure luck as a kid in Ethiopia. My father, who at the time owned an internet cafe, decided to start taking night classes in CS in the late 90s. Ultimately he didn’t use his degree professionally, but I ended up with learning materials and a compiler, Turbo C++ 3.0. As I grew older, eventually ending up as an engineer at Google, I started to appreciate that as engineers we were often tasked with solving problems even when the solution didn’t necessarily involve writing code. Alex comes from a physics background, doing his undergrad at Stanford, and transitioned to study CS and AI there as well. In 2016 he joined the team I was on, a small ML group within Google Maps. He’ll often admit he had underestimated the amount of skill involved in building beautiful, fast and functional apps. And he certainly didn’t expect to love building with Flutter as much as he does, having been entrenched in ML for most of his career. Yet here we are.
There has recently been a healthy amount of skepticism towards no-code tools, mainly due to concerns of extensibility and scalability. This is definitely the case for some apps - a good example is a tool such as FlutterFlow itself. It would be very difficult to build all of FlutterFlow recursively. We do use it internally for many of our pages, but using a visual builder to implement our code generator seems far fetched. This doesn’t imply however that there isn’t a middle ground that enables fast iteration in a visual builder, coupled with the ability to write code that seamlessly integrates with the overall experience. We’re not quite there yet, but we believe this is the right direction.
Finally, we believe Flutter is going to be the catalyst that drives this movement. It’s composability, the fact that it’s super cross-platform (Android/iOS/Web/Desktop/Embedded), and the vibrant and passionate community it fosters give it a unique advantage. Whether we do it or someone else, the application builder of the future will be built on Flutter. Huge thanks to our users, the Flutter team and the Flutter community.
We’d love for you to give it a try and share your thoughts. What do you think the future of application development is going to be?
p.s. we were on HN when we announced our launch back in May: https://news.ycombinator.com/item?id=27238381 We’ve made a lot of progress since then, enabling app store deployment, payments, ability to add custom code and much more: https://community.flutterflow.io/c/whats-new-in-flutterflow