What can we do with FlutterFlow?

Introduction

FlutterFlow is a web service that allows us to build the UI of a flutter app using components that are visual representations of widgets. It looks similar to design tools such as xd and figma, but in reality, it is a visualization of coding. All the parts provided are the same as the behavior of widgets, so we cannot build the UI without knowing the behavior of widgets. For example, if we want to place a button at 20px from the top and 20px from the left, we can use existing design tools to place the button component at that location by mouse operation. FlutterFlow can’t do that (Stack widget can). FlutterFlow uses the widget feature to place the button widgets, so we have to wrap the button widgets with the Container widget and set the top to 20px and the left to 20px using the Container’s padding property. If we have ever implemented a flutter app, we know that expressing a design with widgets becomes more difficult the more complex the design is. FlutterFlow has the same difficulty. If we have ever used a widget, we know that the more complex the design, the more difficult it becomes to express it. If we want to make coding as easy as possible, this is the right choice for you. However, this service is still in its infancy, so I hope it will continue to grow into a good service and make flutter more exciting. If you are interested in FlutterFlow, please take a look at this article.

We can use Firebase Auth without coding.

This is one of the most surprised thing in FlutterFlow. We can achieve sign up and sign in , sign out of Firebase Auth without coding, really.

Select the Firebase tab in the Settings menu, enter the Firebase Project ID we want to connect to in Firebase Project ID, and press the connect button.

We can use Firebase Auth without coding.

Oops, I got pissed because FlutterFlow doesn’t have access to the Firebase Project.

We can use Firebase Auth without coding.

Let’s go to the Firebase console, which is a separate site, select the Users and Permissions tab, and register firebase@flutterflow.io as an editor in email address.

We can use Firebase Auth without coding.

We can use Firebase Auth without coding.

Press the connect button again. This time, there is no error. Next, press Auto Generate Files.

We can use Firebase Auth without coding.

Then Android and iOS apps will be created in Firebase, and google-services.json and GoogleService-Info.plist will be registered in FlutterFlow. It’s much easier than when developing normally.

We can use Firebase Auth without coding.

In order to use Firebase Auth, check Authentication Enable in the Authentication tab.

We can use Firebase Auth without coding.

Since we will be using email authentication, please select the Sign-in method tab in the Authentication menu in the Firebase console and select email/password.

We can use Firebase Auth without coding.

Activate the email/password. This completes the configuration.

We can use Firebase Auth without coding.

Select the sign up button and select the Action tab, and select On Tap in Add Action.

We can use Firebase Auth without coding.

Set the Action Type to Authentication and Create Account, and the Auth Provider to Email. To specify the values to be used, set the Email Field, Password Field, and Confirm Password Field. Now, when we click the Sign up button, we can sign up using our email and password. That’s all we need to sign up!

We can use Firebase Auth without coding.

We want to have a screen transition after sign up, so we will set the screen transition again in Add Action. Now, the screen transition will be performed after the sign up. If we look at the source code, we can see that it will await the sign up, and if the sign up fails, it will display an error message in toast.

We can use Firebase Auth without coding.

Finally, specify the pre-login page and the logged-in page. This will handle the initial display screen according to the login status. We can easily create a login screen by implementing the same way.

We can use Firebase Auth without coding.

We can configure common settings . For example Color and etc.

We can set and continue to use things that we want to use commonly in our project, such as Project color and Navigation Transition.

Colors that are commonly used can be set.

If we set it, it will appear as a selectable color when we place the widget.

Colors that are commonly used can be set.

We can register common Widgets and use them easily.

We can create and share a common widget by making the Login button a common widget, selecting the Login button, and then selecting a gem.

We can register common Widgets and use them easily.

Enter a name for the common widget and click Add Component. The registration is now complete.

We can register common Widgets and use them easily.

It is registered in Components and can be used as a common Widget.

We can register common Widgets and use them easily.

We can upload our app to App Store Connect very easily and rapidly.

Uploading to App Store Connect is very easy and is configured in the Deployment tab.

We can register common Widgets and use them easily.

Get an Identifier from Apple’s developer site.

We can register common Widgets and use them easily.

Select the Keys tab in Users and Access in App Store Connect to get ourIssure ID.

We can register common Widgets and use them easily.

Press the plus button next to Avtive to create an API Key.

We can register common Widgets and use them easily.

Specify the name and role.

We can register common Widgets and use them easily.

Get the KEY ID of the API Key we created and the Private key of the API Key.

We can register common Widgets and use them easily.

We can register our Issure ID, Key ID, Private key, and App ID to FlutterFlow, then click Deploy to App Store to create an ipa file and upload it to App Store Connect. It is very easy and does not require xcode.

We can register common Widgets and use them easily.

Set the app’s icon to App Assets.

We can register common Widgets and use them easily.

Uploading to the play store is not yet provided.

We can see source code of app creating on FlutterFlow.

We can view the source code of the UI We have created.

We can see source code of app creating on FlutterFlow.

We can see it, but we can’t modify it. There doesn’t seem to be a dedicated FlutterFlow package used.

We can see source code of app creating on FlutterFlow.

We can see the pubspec.yaml. We cannot edit it either.

We can see source code of app creating on FlutterFlow.

We can download APK file and source code of app creating on FlutterFlow.

We cannot upload to the play store, but we can download the apk.

We can download APK file and source code of app creating on FlutterFlow.

We can create collections and documents of Firebase Firestore.

We can create Firestore collections and documents. Anything we create here will be synced to Firestore and can be viewed in the Firestore console, but anything we enter in the Firestore console will not be reflected in FlutterFlow.

We can create collections and documents of Firebase Firestore.

We can use google font.

For font, we can use google font. The default setting can be set in the configuration page as shown in the attached image. We cannot edit pubspec.yaml, so we cannot use any font other than google font.

use google font

We can use many templates arranged by FlutterFlow.

There are many templates available. We can use them as a reference for our design.

We can use many templates arranged by FlutterFlow.

We can use Third-party APIs.

Open the API Configuration menu, and tap the Add API Call button.

We can use Third-party APIs.

Enter the API Call Name, Method Type, and API URL, as well as the Headers and Body. The API registration is now complete.

We can use Third-party APIs.

We can use Third-party APIs.

Next, create a Widget that we want to reflect the response of the API. Set the API Call to this Widget.

We can use Third-party APIs.

For Call Name, specify the name of the API we just created.

We can use Third-party APIs.

Next, specify the values we want to display in the API response by tapping Set from Variable.

We can use Third-party APIs.

Select ‘HelloWorld Response (from text)’.

We can use Third-party APIs.

Since the json_path package is available, set the value we want to display according to the format of the json_path. In this case, we set $.body.

We can use Third-party APIs.

Run the app, and we will see a string with ‘Hello!’ added to the ‘taro yamada’ included in the API request. This is the API response. Also, an indicator is displayed during the API call.

We can use Third-party APIs.

We can implement and user a custom function.

We can create a Function to modify the display of the Widget. Select the Custom Functions menu to create a function, and click the Create Function button.

We can implement and user a custom function.

Enter the Function Name, Return Type, and Function Arguments.

We can implement and user a custom function.

Tap the Code tab and write our code. It is not possible to import packages other than ‘dart:math’. So, what you can do may be limited. In this case, we will replace the ‘Hello’ character with a space character.

We can implement and user a custom function.

Set the created Function to Widget by selecting TextWidget and tapping Set from Variable.

We can implement and user a custom function.

Select ‘Custom Function’ for Source, and select the Function we created for Function Name. Next, tap SetFunction Arguments.

We can implement and user a custom function.

As the value to be passed to the Function, specify the response of the API we just created.

We can implement and user a custom function.

We can see that the Hello character is now displayed as a blank string, indicating that the API response is being edited in the Function.

We can implement and user a custom function.

Conclusion

Good Points
・Super easy to upload to app store
・One-click apk creation and download
・We can create widget trees faster than We can write code
・There is no mystery code in the generated code(It exists in xd)

Bad Points
・(Fatal)Can’t use package freely, can’t edit pubspec.yaml
・It’s all going to be a stateful class
・Mixing views and business logic in a stateful class
・Unable to switch projects in firebase
・Can’t test the actual device without downloading the source.
・Unable to edit xcode or build.gradle

What we can do with no code
・Using firebase auth, signup, login, logout (I haven’t tried it, but we can also login with google or facebook)
・API call to draw the retrieved json to the UI
・Use a function to dynamically change the drawing content.

Need a code
・Easy function implementation

If we let the APIs do the business logic, we might be able to create an app with no code, but in reality, I thought it would be better to use FlutterFlow to create the widget tree and authentication, download the source, and implement the rest myself.
However, if you want to make an app version of your corporate website, you can use only FlutterFlow.

extra

The official documentation is quite meticulous.