DEV Community

Cover image for Generating Isolated Component Packages for Flutter
Ivan Huerta for Parabeac

Posted on

11 11

Generating Isolated Component Packages for Flutter

Our open-source Figma to Flutter converter has been used across various projects. While many developers will include UI directly in their Flutter project, we learned that for other companies and projects, the best use case of Parabeac was generating components, particularly for projects looking to scale. With the uptrend of tools like Storybook & Component Isolation that help test & scale UI, we decided to add changes to parabeac_core that enables this development workflow.

So what does a component package look like?

Component Package

It's relatively simple, but the main idea is to completely isolate your UI code from your application code. The code & assets generated from parabeac_core are now prepared to be used as a package.

Component Isolation with Parabeac

To use the component package in your Flutter app, you'll want to:

  • Add Base BLoC to the component package
  • Push to Github
  • Import into Flutter Project
  • Override BLoC with application logic in the Flutter Project

You can import the component package as easy as doing the following the pubspec.yaml:

example_project:
    git: git@github.com:<gh_username>/example_component_package.git
Enter fullscreen mode Exit fullscreen mode

You can learn how to create your own component package by following the steps in our developer guide here: https://docs.parabeac.com/docs/how-to-create-a-component-package

Thanks for reading! We'd love to hear your feedback so that we can continue improving the project. Leave a comment or reach out to us on our Discord server!

AWS Q Developer image

Your AI Code Assistant

Generate and update README files, create data-flow diagrams, and keep your project fully documented. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay