Launch HN: FlutterFlow (YC W21) – Build Apps Visually
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 ...
63 comments
[ 3.4 ms ] story [ 139 ms ] threadCongrats on the launch and best of luck folks!
Wish you the best of luck as well
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!
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.
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.
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.
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.
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?
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 :)
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 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.
- 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
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
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)
Expanded + Percentages for widths are possible already
Im only saying this to inspire you - not sure what the solution should ultimately be.
:D
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
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.
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 can use Align for that.
There have been charged arguments on HN over the past few months over it.
Ex: https://news.ycombinator.com/item?id=26335062
Performance could certainly be improved (especially for Web), but it's gotten much better over the last year.
Don't use it.
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 :-)
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...
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)?