[HN Gopher] Launch HN: FlutterFlow (YC W21) - Build Apps Visually
___________________________________________________________________
Launch HN: FlutterFlow (YC W21) - Build Apps Visually
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
Author : abelsm
Score : 105 points
Date : 2021-12-20 19:07 UTC (3 hours ago)
| vanillax wrote:
| 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 wrote:
| 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 wrote:
| _What happens if I want anchor a view to the bottom of the
| screen in a stack?_
|
| You can use Align for that.
| farmin wrote:
| I want visual basic style UI builder for flutter but still want
| to code the business logic. Is that what this can do?
| abelsm wrote:
| 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
| vanillax wrote:
| 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.
| abelsm wrote:
| 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!
| farmin wrote:
| 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?
| abelsm wrote:
| 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
| ZeroCool2u wrote:
| 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 wrote:
| 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
| ibdf wrote:
| 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 wrote:
| 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
| mwcampbell wrote:
| 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 wrote:
| 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.
| T3RMINATED wrote:
| Where can I find the source code for flutterflow?
| plahteenlahti wrote:
| 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 wrote:
| 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 :)
| polishdude20 wrote:
| Does this provide access to the Bluetooth API?
| asgreaves wrote:
| 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, folks can still use FlutterFlow even if one or two small
| features they need aren't explicitly supported yet.
| xrd wrote:
| 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!
| fredgrott wrote:
| 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.
| asgreaves wrote:
| 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.
| cweagans wrote:
| 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.
| sprite wrote:
| 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.
| jmnicolas wrote:
| 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.
| faldore wrote:
| cweagans wrote:
| Huh. I really enjoy Dart and found a lot of it very
| elegant. What about it did you not like?
| abelsm wrote:
| 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.
| voidmain0001 wrote:
| Flutnet[1] - either a dream come true, or a nightmare. [1]
| https://www.flutnet.com/
| swyx wrote:
| 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!
| agucova wrote:
| 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.
| abelsm wrote:
| 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!
| agucova wrote:
| 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 wrote:
| 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!
| agucova wrote:
| 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).
| er4hn wrote:
| 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 wrote:
| 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.
| quadcore wrote:
| 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 wrote:
| 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)
| abelsm wrote:
| 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
___________________________________________________________________
(page generated 2021-12-20 23:00 UTC)