Are you working on an existing Flutter
codebase and looking to cut down on your UI development process? Well, we have a new
package in town to help you do just that! With the combination of FlutterFlow that lets you
build UI using our drag and drop interface and our Flutter package that
exposes the FlutterFlow classes, you can now export the generated UI code and add it to your existing Flutter app codebase.
Let’s take an example. Think of this Flutter Gallery app—it's
a great app around personal finance Now, say you want to add a new feature like
being able to pay bills with it. I added a button here that can make a payment page slide up
from the bottom where I can put in my card info, choose my payment method, process the
payment and my bills will be cleared. Now here’s the catch - I will not be building
the UI for this from scratch, not in Flutter, and, technically, not even in FlutterFlow.
I mean, not from scratch at least! Instead, I found this great template in FlutterFlow
which is similar to what I need and I am importing that into my FlutterFlow project.
You are free to do any changes you like, whatever suits your design vision. In my case, I am going
to update the title and subtitle and also add some entry animations for the elements in this widget.
Adding animations in FlutterFlow on Action Trigger or on Page Load is pretty
straightforward, for example, on Page Load I’m applying a Slide Up animation to our buttons
here. I will apply similar animations to other elements and once I’m happy with my final UI, I
can export the code to my Flutter Gallery app. Let’s quickly run all the animations in our
builder. And you know what's cool? I didn't even need to launch the whole project to check out
the final animation. I love how smooth that is! So now that we are happy with the final output,
let’s go to the Developer Menu and view the code. Here, you see every widget contains two files.
One is your Widget file, and another is the Model file. Model files are useful to
store page state fields such as text field controllers or in this case, the credit
card states, so it’s best to have them too. Now lets port the code. In this case, since
we need the entire code of this component, we make sure we copy the entire
widget file along with the imports. Now I’m going to go back to my IDE and I
have a folder for such components and I’m already ready with a new Dart file where I
can paste the code. As mentioned earlier, we need the model file code too.
You can drop it in the current file or start a new one, whatever fits your
project's setup. If it turns out you don't need it—maybe for a widget without
any state fields—you can delete it later and clean up any references to it.
Now the code is added but there are TONS of errors. Do not panic! This is
because they don't have access to the FlutterFlow classes. This is solved by
the new flutterflow_ui package on pub.dev Add this package to your pubspec.yaml
and run flutter pub get Now go back to your newly created file and replace
all the Flutterflow path imports with the package import. This will remove 95-99% of your errors.
After that, if you spot any leftover code bits that don't make sense for your project,
go ahead and toss them out. I just had to remove an AppState watch call from
my build method and that did the trick! Now I’m going to add some Flutter code
to open this payment screen as a bottom sheet and now we can run and see the magic!
And here we go! An entire payment info screen with credit card section, price breakdown, all
that was built in a few minutes thanks to the useful FlutterFlow templates, and exported to my
existing Flutter project in under a few steps! I can also build this entire app in FlutterFlow
but since I have an existing project, now it is 10x easier to visually build entire
new pages, components like this, or even small widget elements to add to a page and add them to
my existing codebase and streamline my workflow. Check out flutterflow_ui on
pub.dev and happy building!
