Export FlutterFlow UI code to your Flutter project

When you already have a Flutter project, rebuilding it from scratch in FlutterFlow may not be the most ideal option as of now. Maybe you prefer focusing on the core aspects rather than spending too much time coding UI elements. Good news! We've got you covered. You can use FlutterFlow's drag-and-drop interface to effortlessly create UI components or screens with animations and easily export that UI code right back into your Flutter project, saving you time and effort.

Introducing the FlutterFlow UI package

Check out this new pub.dev package here.

We've introduced a new package that contains all the necessary FlutterFlow code to run a UI screen generated in FlutterFlow. When you copy the FlutterFlow generated code to your Flutter project, the package will automatically include all the required imports, making it easy to run the UI code in your Flutter project.

Let's dive into an example:

1. First, create your account on app.flutterflow.io and set up a project for your Flutter UI.

2. In this example, we'll use templates, but remember, you have the flexibility to tweak templates or build your own UI components and screens from scratch.

3. Now, let's go ahead and create a new component.

Create a new component

4. Scroll down and select the "Header 04 - Insurance Cards" template. You can either use your own custom theme or stick with the template's original theme.

Select a template from the Component Templates

Now, you're ready to copy the component's generated code directly into your Flutter project. But before you do that, take a moment to examine the widget tree of the template.

You'll notice that the containers are repeated within the ListView, and this setup isn't very reusable. To make it cleaner and more maintainable, let's convert the first container into another reusable component. We'll give it the name "QuoteCard" for now.

Next, we'll generate the ListView's children from a variable. You can use either a random List or an App State variable that's a List. This change will modify the generated code, switching it to a ListView.builder. Here's how the widget tree will look afterward, ensuring that the code you copy is cleaner and easier to maintain.

Preparing your Flutter project

Add dependency of flutterflow_ui package

In your Flutter project, open your pubspec.yaml file and add flutterflow_ui under dependencies:

dependencies:
  flutterflow_ui: <latest_version>

Remember to run flutter pub get

Copy the generated code to your project

Time to copy the generated code to your project! Go to the Developer Menu at the top right corner and click on "View Code." This opens the Code Viewer for the generated code.

When working with the FlutterFlow UI package, you need to copy both the widget code and model code. Sometimes, there might be some page state variables in your Model file. So, make sure to include both.

You've referenced the "QuoteCard" widget in your main component, so you'll also need to copy the widget and model code for "Quote Card" to your Flutter project. Ensure that the import to that file is set correctly.

Talking about imports, after you copy the code, you'll see a bunch of flutter_flow/flutter_flow... imports that are usually present in a FlutterFlow generated project. With the new package import, you can resolve these errors. Remove such imports:

import '/flutter_flow/flutter_flow_animations.dart';
import '/flutter_flow/flutter_flow_icon_button.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';

And replace it with the package import.

import 'package:flutterflow_ui/flutterflow_ui.dart';

Clean up unnecessary code & update variables

If you encounter the line context.watch<FFAppState>(); at the beginning of the build method, you can safely remove it, as it might not be relevant to your Flutter project's state management.

If you're not using the Provider package for state management in your project, you can remove the import statement related to it as well.

Lastly, double-check that your model file, if it's in a separate file, is correctly imported.

For the ListView.builder, update the code to fetch data from the correct source based on your project's needs. For example, I have a helper method to fetch the data.

Calling getCompanyList() from the project's data source

With these adjustments, you're ready to run the FlutterFlow-generated code in your Flutter project.

Add FlutterFlow animations to your card

One of the great things about using FlutterFlow is the ease of adding animations using its visual builder. Now, let's bring that convenience to your FlutterFlow-generated widgets and components!

Let's start by adding a "Slide in" animation to your QuoteCard. This animation will apply a slide effect to your list of cards when the page loads, creating a neat entry animation.

Now, to add this animation to your Flutter project, all you need to copy from the generated code is the animationsMap variable. In the current scenario, it looks like this:

final animationsMap = {
    'quoteCardOnPageLoadAnimation': AnimationInfo(
      trigger: AnimationTrigger.onPageLoad,
      effects: [
        MoveEffect(
          curve: Curves.easeInOut,
          delay: 0.ms,
          duration: 600.ms,
          begin: Offset(37, 0),
          end: Offset(0, 0),
        ),
      ],
    ),
  };

To trigger the animation when the page loads, you can simply call the animateOnPageLoad(animationsMap['....']) extension method on your QuoteCard widget, like this:

return ListView.builder(
  padding: EdgeInsets.zero,
  primary: false,
  shrinkWrap: true,
  scrollDirection: Axis.horizontal,
  itemCount: quoteList.length,
  itemBuilder: (context, quoteListIndex) {
    final quoteListItem = quoteList[quoteListIndex];
    return QuoteCardWidget(
      key: Key(
          'Key49j_${quoteListIndex}_of_${quoteList.length}'),
      companyName: quoteListItem,
    ).animateOnPageLoad(animationsMap['quoteCardOnPageLoadAnimation']!);
  },
);

Voilà! The animation is now applied to your widget, and the card slides in on page load.

The best part? You can apply this animation to any widget you want. As long as your sequence of animations remains the same, you can reuse it in other widgets too.

And there you have it! You've just learned how to efficiently create your UI components in FlutterFlow and seamlessly incorporate them into your Flutter project. With this knowledge, you'll be able to enhance your Flutter projects with ease.

Keep up the great work in your coding journey!