Launch HN: FlutterFlow (YC W21) – Build Apps Visually

[abelsm]

Hey HN! It’s Abel and Alex here to share what we’ve been working on for just over a year: FlutterFlow (https://flutterflow.io). It’s like WebFlow, but for Flutter.

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

[xrd]

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!

[cweagans]

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.

[swyx]

@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.

[asgreaves]

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.

[fredgrott]

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.

[agucova]

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.

[agucova]

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.

[abelsm]

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!

[vanillax]

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.

[asgreaves]

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.

[quadcore]

What happens if I want anchor a view to the bottom of the screen in a stack?

You can use Align for that.

[plahteenlahti]

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?

[abelsm]

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 :)

[kkjjkgjjgg]

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...

[er4hn]

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.

[abelsm]

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.

[ZeroCool2u]

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!

[abelsm]

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

[quadcore]

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 :)

[quadcore]

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)

[Zanfa]

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.

[vanillax]

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...

[aristofun]

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)?

[dkobia]

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.

[ignoramous]

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

[farmin]

I want visual basic style UI builder for flutter but still want to code the business logic. Is that what this can do?

[abelsm]

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

[ibdf]

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.

[abelsm]

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

[herval]

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 :-)

[mwcampbell]

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?

[asgreaves]

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.

[polishdude20]

Does this provide access to the Bluetooth API?

[asgreaves]

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.

[pitchups]

Looks great. But is it restricted to building mobile apps only or can it also help you build web apps in Flutter?

[swyx]

congrats Alex and Abel! was wowed when I first checked you guys out coming out of YC, and have been absolutely nothing but impressed by your product momentum and marketing capability throughout 2021. Really excited for you and going to try building along to see whats new!

[abelsm]

thank you!

[T3RMINATED]

Where can I find the source code for flutterflow?

[matchbok]

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.