DEV Community: Parabeac

Figma to Flutter: Parabeac 4.0 Updates to Components

lily-099 — Fri, 14 Apr 2023 00:23:40 +0000

In Parabeac 4.0, Parabeac Cloud and parabeac_core’s latest update, we’ve simplified the way that components can be referenced. Now, you can directly reference a component as a child. Let’s jump into it!

Parabeac: An Overview

Parabeac Converts Figma designs to Flutter UI code. In our Components project type, you can convert reusable UI elements to Flutter code. For more information on how we do this, check out our docs.

Flutter Components: An Overview

UI components (as seen above) are pieces of UI that are reusable to build the entire front end of an application (as below). Flutter allows developers to create high-quality, natively compiled applications for mobile, web, and desktop from a single codebase. In Flutter, widgets are the building blocks of any Flutter application—the central idea is that you build your UI out of widgets. Because the word component is more universal and specific to UI, we’ve chosen to use the term component—even if the terms are used interchangeably in some spheres.

Old Component Referencing + Breakages

In the pre-Parabeac 4.0, layout builder was required to reference a component. If you have existing applications that reference components this way and make an update, this may cause breakages. All that is required to resolve this is delete layout builder and reference the component in the new, simplified way (shown below).

Parabeac 4.0+ Component Referencing

To use a component in Parabeac 4.0 or later, simply wrap your component in a size box that describes the desired dimensions of your component and reference the component as a child.

Hope this is useful and helps you to speed up and improve your UI coding process. Head to Parabeac Cloud to test it out!

Happy Coding!

Convert Material 3 Theme Designs to Flutter Code

lily-099 — Fri, 31 Mar 2023 20:07:16 +0000

Parabeac — Now compatible with Google Material Design 3 Themes

With the release of Google’s latest design system, Material Design 3, there’s been an update to the way that colors in Light and Dark Schemes are selected. Parabeac has just released support in Parabeac Cloud and parabeac_core: now you have the option to select between Material Design 3 and Material Design 2 when converting themes to Flutter code.

Take a look at our updated Figma Kickstart file here.

Converting with Parabeac Cloud

To convert a Material 3 Theme using Parabeac Cloud, the process remains the same as it was previously: simply create a Theme Project, select your GitHub branch, provide links to the Figma File, and convert. For more detailed instructions, check out our documentation.

What’s New: Color Palette

Based on Key tones, 13 shades shades are generated ranging from 0–100. On the bottom end of the spectrum 0 is true black (#FFFFFF) and 100 is true white white (#00000). From these key tones, the derivative palette colors are selected.

Parabeac has updated its Themes Figma Kickstart file to reflect this — play with it here. To use our Figma file: edit the key tones and the palette will be generated. Then, to select the colors for the light and dark color schemes, use the dropper to choose the appropriate color from the gradient in the palette.

Accessibility and Contrast

One of the main goals of the Google Material 3 color palette is to improve accessibility. The new color palette is designed to meet the WCAG 2.1 AA standard for contrast ratio. This means that text and other important elements are more legible, making it easier for users with visual impairments to navigate and use the interface.

While there are default values, such as Primary being set to Primary40 and On Primary set to Primary100, the user can manually set what shade from the key tone palette they would like to use — though keep in mind there are specific contrast minimums set forth by Material 3.

Updates to Typography

The naming conventions for typography have also been modified as well as several new font options added.

Conclusion

Whether you’re currently using Material Design 2 or Material Design 3, we hope you use Parabeac to convert your design from Figma to Flutter Code! Head to parabeac.com to learn more or to app.parabeac.com to try it today.

Generating Flutter Themes

Lily Osorno — Fri, 21 Oct 2022 13:58:51 +0000

With Parabeac’s latest update, we now officially offer three different project types: Themes, Components and Screens. While Components and Screens have been included in previous iterations of our Figma to Flutter conversion tool, we’re excited to offer an entirely new function: Themes!

Maintaining consistent brand colors and styles is critical to making a polished and cohesive user experience. Parabeac addresses this directly with its new project type. Themes is capable of not only created ColorStyles and TextStyles, but “light” and “dark” themes (as specified in (Material Design 2)[is capable of detecting Material Design elements, as well. Having a generated list of colors and styles devs can easily reference, makes the entire process of coding an app’s UI not only easier, but faster as well.

We recently released a video demo on how this works here, but let’s dive into how to make this happen:

Create a Style Sheet in Figma

Clone our existing sample style sheet, and edit it to match your desired application colors. (or create your very own Figma file!)

Convert your Figma design to Flutter using [Parabeac] Cloud](app.parabeac.com)

The process is very similar to how we’ve converted projects in the past. All you need is the link to your Figma file and access to your Figma account (either through a personal access token or by logging in through Parabeac).

Use the themes in your project

Import the generated .g.dart files to an existing project, or build a new application on the Parabeac generated project files. If you created light or dark themes, you can call them as normal—otherwise you can call individually generated colors. As usual, all names correspond to how they were labeled in Figma.

For more tips and tricks on how to use Themes, check out this handy article written by our very own CTO, Ivan Vigalante.

For more detailed information on how themes work or how to generate them using Parabeac, check out our documentation here.

Tips and tricks to make Flutter development easier with Parabeac

Ivan — Mon, 26 Sep 2022 22:41:10 +0000

Recently Parabeac introduced Parabeac Themes, a super-simple, super-easy, and super-affordable version of our tool where developers can choose to export simple styling and theming elements.

Parabeac tools quickly and precisely convert Figma application mock-ups to Flutter code, speeding the process of implementing UI designs. The good news is that developers retain full control over how the converted code is implemented and can make continuous design updates -- any future changes made in the Figma files can generate a new pull request without disrupting any previously manually written logic.

But any tool is even more valuable with some user-driven “tips”. Here are some helpful ones to make Parabeac even easier:

Tips and Tricks

Tip #1

In Parabeac Themes, instead of creating a new Figma File containing a color palette for light/dark themes from scratch, copy the existing Parabeac file to your own drafts and edit the colors! You’ll already have all the color names, and won’t have to spend time creating light/dark categories.

Tip #2

You don’t have to use every single pre-named color in a color scheme (i.e. “shadow” in a “light” scheme). Just use whichever colors are relevant to you!

Tip #3

If you want to have your app dynamically change between light and dark mode, create the light/dark ColorSchemes and ThemeDatas via Tip #1. Then, in your main.dart file, use the generated light and dark ThemeData classes to place them in the theme and darkTheme attributes respectively. Now, Flutter will detect whether the device is in light/dark mode and adjust many widgets according to your color palettes.

Tip #4

For developers who use Parabeac for screens: when selecting a screen size in Figma, make sure to select the smallest screen size out of all devices you wish your app to be compatible with. Adding more screen real estate will add more padding around your design elements depending on how they’re anchored (ie. to the right/left side of the screen or centered, or to another element)

BONUS TIP

If you’re willing to reach out to give us feedback or request features, we will reward you with a 1-month free subscription to our Pro pricing plan! Contact us at support@parabeac.com

Happy coding!

Figma to Flutter : Convert Global Styles & ThemeData

Ivan Huerta — Thu, 07 Jul 2022 20:00:33 +0000

In the latest update to [parabeac_core v3.1]([https://bit.ly/3Ny3Cpq], your favorite continuous Figma to Flutter generator, we’ve added:

Global Styling, so you can import standardized colors and text styles set from the Figma file in your Flutter project.
Material Theming Integration (beta), so that global styling can integrate into your theme with one line of code.
Golden Tests, so devs can ensure that the UI generated scales pixel perfectly to the way it was described in Figma.

Let’s check it out!

Global Styling Support

To speed up the standardization of color styles and text styles, parabeac_core will now export a file containing those elements for developers to easily reference.

These elements are automatically detected when provided in the Figma file as seen below.

Generation of Global Colors

If detected in a Figma file, parabeac_corewill export a file containing all global colors as constants, so devs can skip manually entering color palette data.

In the example below, you can see a Figma file with globally declared colors and text styles being used to alter the counterapp’s colors.

We then simply convert using Parabeac, import the file to the .g.dart screen, and call the color names (as declared in Figma).

Generation of Global TextStyles

If detected in a Figma file, parabeac_core will export a file containing all global TextStyles as constants. These specifications include: fontSize, fontWeight, letterSpacing, fontFamily, color, and decoration.

Below, you can see an example of what Parabeac Generates for two different styles: parabeacTextStyle and newStyle.

For more detailed instructions on how to generate and import global styles, check out our new doc here!

Material Theming Integration (beta)

With the new support for styling, we also wanted to begin directly integrating these constant styles into the Flutter theme. We also now generate a file called theme.g.dart which currently supports Text Styles. The way it works is we take into account the naming set by Material 2 for text styles and automatically map that into the theme.g.dart file. The names in the standard TextTheme documentation are the names available for automatic theme integration in the Figma file:

Golden tests

Next, to help ensure Parabeac provides the most accurate product possible, we’ve added Golden Tests! But before we go over them, it is helpful to understand that there are two modes of describing layout in Figma.

The first is positional/constraint layout. As Flutter developers we understand this through the use of Stack & Positioned widgets.
The second is Autolayout. In code, we know this as “Flex-based layout” and specifically in Flutter, we know this as Columns & Rows.

With this in mind, we have created Golden Tests to match every permutation of positional layout, and as many feasible permutations of autolayout as possible.

This helps us to standardize the way code is generated, particularly when adding new features. Meaning, no surprise breakages when adding new elements or features to parabeac_core. You can see the 2 additional Figma files used as Golden Tests below. Autolayout on the top and Constraint/Positional Layout permutations on the bottom.

Bugfixes

We’re always striving to provide the most accurate code possible. With the implementation of Golden Tests, we’ve discovered and improved:

Alignment improvements
Constraints improvements

If you've made it to the end, thanks for reading! Let us know what you thought and reach out to us on our Discord server, we'd love to hear your feedback!

Figma to Dashbook - parabeac_core v2.6

Ivan Huerta — Thu, 07 Apr 2022 15:10:47 +0000

In our last article, we covered how parabeac_core has added support for component isolation & Widgetbook. We have now also added Dashbook support in parabeac_core v2.6!

What’s Dashbook?

"Dashbook is a UI development tool for Flutter, it works as a development enviroment for the project widgets and also a showcase for common widgets on the app, it is heavly inspired by Storybook library, so it should be very easy for people who has already used Storybook, to use Dashbook."

To activate this feature, edit the config file in parabeac_core, located in parabeac_core/lib/configurations/configurations.json. Set "componentIsolation" to "componentIsolation": "dashbook"

It will look like the following:

You can duplicate and use this demo project here: https://bit.ly/3NVsvfy

Then run parabeac_core as usual and you will have a Flutter project with Dashbook ready to test your component package.

Note: Parabeac only generates dashbook/widgetbook stories & use case code for Figma Components.

You can then run it using:

flutter run project_name/lib/main_dashbook.g.dart

Next? Start adding the logic needed for this component package. Learn here! - https://bit.ly/3DUxb0v

How I added animation to my generated Flutter website using Parabeac

Ivan — Tue, 29 Mar 2022 22:09:27 +0000

While making a personal website, I wanted to add a Down Arrow that moves up and down infinitely, to indicate to the user to scroll down.

This can be easily done in Flutter by using the AnimatedPositioned widget. In this post, I’ll go over how to achieve this effect using Parabeac.

The UI mockup of my site, created in Figma:

Preparing your Figma file

Custom Tags

The first step to creating the animation was to name the element I wanted to convert with a <custom> tag as seen in the image below:

Doing this allowed me to customize the logic attached to the UI element without having to modify the UI itself once I generated the Flutter code.

Editing the Dimensions of the Figma Element

Secondly, because Parabeac takes the dimensions given in Figma and translates them to Flutter, I needed to resize the Figma element boundary to take up roughly as much space as I wanted the animation to take up. See below:

As seen in the image, I increased the height of the element in order for it to be able to freely move up and down in the code itself.

Editing Position Constraints

In my case, I wanted the arrow to stick to the bottom-center of the screen as it resizes. To translate this into Flutter, I specified these constraints as seen on the right-bar of the image below.

Generating the code

Once my Figma file was ready to go, I went to app.parabeac.com to generate my code. Next, I created a Pull Request (PR) into my GitHub repo. If you want more details on how to do this, check out:

https://www.youtube.com/shorts/PCUN3OcPAKs

Once the PR was successful, I pulled the parabeac-generated branch in VSCode and was ready to add my logic.

Adding logic

Since I tagged the Down Arrow in Figma with <custom>, Parabeac created a file inside the controllers directory of my Flutter project named down_arrow_custom.dart. This file wraps the arrow’s UI and allows for logic to be injected. The generated file looked as follows:

The widget.child item is the UI of the arrow. Initially, by default, the custom tags will return the UI with no logic.

The DownArrowCustom class is what allows me to add logic to the UI, or to completely override it. In my case, all I wanted to do was to wrap widget.child with an AnimatedPositioned widget that infinitely moves up and down.

Initializing animation variables

In order to pull off this animation, I need a couple of things:

Timer that triggers a change every X milliseconds
AnimatedPositioned widget that wraps widget.child
A boolean variable to tell the AnimatedPositioned widget when to change positions

Timer and Duration

For my down-arrow, I needed the timer to start as soon as the state was initialized in order to trigger the animation right when the page loads. Therefore, I defined the duration as a constant variable, and defined a late Timer that would be initialized on initState. In addition, I had to cancel() the timer inside the dispose method to avoid errors and unwanted behavior when the screen is no longer being rendered.

See below how I set up my timer:

class _DownArrowCustomState extends State<DownArrowCustom> {
  late Timer _timer;

  /// Duration of the animation and how often it should
  ///change positions.
  final _duration = const Duration(milliseconds: 700);

  @override
  void initState() {
    /// Timer that triggers the callback
    /// function every 700 seconds. 
    _timer = Timer.periodic(
      _duration,
      (timer) {
        /// Temporary print call for illustration purposes
        print('callback!');
      }, 
    );
    super.initState();
  }

  @override
  void dispose() {
    /// Make sure to properly dispose of _timer!
    _timer.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return widget.child!;
  }
}

AnimatedPositioned

Next, I set up an AnimatedPositioned widget that wraps widget.child as follows:

class _DownArrowCustomState extends State<DownArrowCustom> {
  late Timer _timer;

  /// Duration of the animation and how often it should
  ///change positions.
  final _duration = const Duration(milliseconds: 700);

  @override
  void initState() {
    ...
  }

  @override
  void dispose() {
    ...
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        AnimatedPositioned(
          width: 60,
          height: 80,
          bottom: 0, /// Need to update this value every time Timer triggers callback
          left: 0,
          child: widget.child!,
          duration: _duration,
        ),
      ],
    );
  }
}

As seen above, I created a Stack that will be constrained automatically by the parent .g.dart file based on the Figma constraints I provided. I then wrapped widget.child (the UI of the arrow) with an AnimatedPositioned widget.

Notice that the duration of the animation and how often the timer triggers the callback is the same. This is to ensure that the arrow changes positions at the same time the animation is finished (i.e. there is continuous movement, no pauses).

However, the position won’t change yet because there is no trigger that will change the bottom value of the AnimatedPositioned. To achieve this, I need to add a boolean variable that tells the AnimatedPositioned widget when to update.

Boolean Update Variable

I then added a boolean, class variable named _update that changes value every time the _timer calls the callback method. See below for the final result:

class _DownArrowCustomState extends State<DownArrowCustom> {
  bool _update = true;
  late Timer _timer;

  /// Duration of the animation and how often it should
  ///change positions.
  final _duration = const Duration(milliseconds: 700);

  @override
  void initState() {
    _timer = Timer.periodic(
      _duration,
      (timer) {
        /// Set state and change the boolean so the 
        ///position changes.
        setState(() => _update = !_update);
      },
    );
    super.initState();
  }

  @override
  void dispose() {
    _timer.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        AnimatedPositioned(
          width: 60,
          height: 80,
          bottom: _update ? 0 : 25, /// Push arrow 25 pixels up/down depending on state.
          left: 0,
          child: widget.child!,
          duration: _duration,
        ),
      ],
    );
  }
}

Final result

After updating the custom file, this was the final result when running my Flutter project:

Github repo: https://github.com/ivan-015/flutter-portfolio-site

Deployed website (needs a sec. to load, currently in development👷🏾‍♂️😅): https://y.at/👁️🚚❤️💻

How I generated my personal landing page with Figma & Flutter using Parabeac

Ivan — Thu, 24 Mar 2022 20:07:08 +0000

In this post, I’ll share how I used Parabeac to create my portfolio website by converting my Figma design file to Flutter code and deploying the project using GitHub Pages.

When working on a product, it’s easy to get lost in the myriad of features, bugs, and refactors to implement. Getting tunnel vision means you lose sight of what is useful to the user and what is not. Because of this, I decided to put myself in our users’ shoes and try to build my portfolio website using Parabeac.

Setting up design file

I created a new Figma Project and decided to start with the Landing Page. I knew my website was going to have a minimalist, terminal style with dark colors accentuated by bright greens. Then, I re-watched The Matrix to inspire my design (and because I love the movie). Finally, after looking at a few websites, I started designing and (tried 😅) using Figma best practices to design the page:

Although the design was to my liking, I did not want the UI to be static. Rather, I wanted the green text that says Software Developer to change to some hobbies: Movie Enthusiast, and Gamer 😎. The logic of animating and changing text cannot be generated by Parabeac, so I labeled the text with <custom> in Figma as follows:

By doing this, Parabeac will create a file where I can add logic and change the text dynamically once the code is generated.

Generating the Code Using Parabeac Nest

Once my Figma file was ready to generate, I went to Github, created a new repo, and initialized it with a main branch. Then, I went to app.parabeac.com to start my new project. I followed the prompts, crossed my fingers, and began the conversion. After a few minutes, I got the success message:

After I saw this success message, I immediately cloned the Git Repo, checked out the generated branch, and opened it in VSCode:

I modified the main.dart file to open the Landing page (as seen above), and ran it with the following result:

Not bad! Next, let’s make the text dynamic.

Customizing logic

The first thing I do when I want to add some logic to my Flutter UI code is look it up on YouTube and hope there’s a Widget of the Week video on it. I searched “flutter animated text”, crossed my fingers once again, and hit the jackpot. This was the first video in the search:

https://www.youtube.com/watch?v=foQTKCQqVWk

After reading the docs, I decided this was exactly what I wanted, so I went to my terminal and ran flutter pub add animated_text_kit on my project. Then, I went to the file software_developer_custom.dart, named after the text element in Figma, which had this boilerplate:

Rather than returning widget.child, which is the static text that displays Software Developer, I want to use the package I just installed to make the text dynamic. I replaced the build method as follows:

As you can see, I added the AnimatedTextKit widget, which will animate the texts I provided in a loop. Here’s the final result:

And there it is! My landing page is mostly ready. There are still some easter eggs I want to implement, but I first need to design the rest of the website.

As a final touch, I set up GitHub pages and deployed the site. Click here to see the Github repo and source code, and here to see the website.

DISCLAIMER: no .g.dart files were modified during the making of this article.

Figma + Flutter Complex Fills, Drop Shadows, SVGs and Borders - parabeac_core v2.5

Ivan Huerta — Wed, 23 Mar 2022 15:02:18 +0000

As parabeac_core matures as a continuous Figma to Flutter generator, we wanted to add more robust support for styling. In the latest release (parabeac_core v2.5) we did exactly that. Some of the support we added were:

Complex Fill Support
- Mixed Solid Color
- Image
- Linear Gradients
Rectangle and Text Drop Shadow Support
Border Support
- Border Radius
- Border Thickness
- Border Color
Image Vectors map to SVG

Let’s walk through how some of this works!

If you’d like to test any of this out, feel free to duplicate this Figma file: https://www.figma.com/file/25pZ3AFZH0rGBwOMoB7l1W/parabeac_core-v2.5-Styling-Tests?node-id=0%3A1

Complex Fill Support

Mixed Color

Remember in grade school when the teacher asked you to mix 2 colors to make a new color? Well that’s exactly what we added support for in Figma. If you mix blue & red, you now get a magenta color in Flutter.

Container(
    width: 197.000,
  height: 120.000,
  decoration: BoxDecoration(
    color: Color(0x70991d66),
  ),
),

Image Fill

Say you wanted to add an image to this mix. Good news! We make this easy by converting this fill into an image with a mixed green fill, so you’ll never have to miss out on the rock staring at you ;)

Image.asset(
  'assets/images/imagewithtint.png',
  package: 'foo',
  width: 197.000,
  height: 120.000,
  fit: BoxFit.none,
),

Gradient Fill

For the first time we’re adding support for Gradients, you can use Linear Gradient and we’ll convert the code directly. Diamond and Radial gradients are not supported directly yet but we do generate an image for them so that the output is still correct.

Linear Gradient:

Container(
  width: 197.000,
  height: 124.000,
  decoration: BoxDecoration(
    gradient: LinearGradient(
      begin: Alignment(1.0000000596046466, -0.999999849557967),
      end: Alignment(-1.0, 1.0000002100466796),
      colors: <Color>[
        Color(0xffff0000),
        Color(0x00c4c4c4),
      ],
      stops: [
        0.0,
        1.0,
      ],
      tileMode: TileMode.clamp,
    ),
  ),
),

Radial/Diamond Gradients get converted to images for now.

Rectangle and Text Drop Shadow Support

Now by adding a drop shadow in Figma to Rectangles and Text, we print that out directly to the code, see below:

(Text)

AutoSizeText(
  'Howdy',
  style: TextStyle(
    fontFamily: 'Roboto',
    fontSize: 12.0,
    fontWeight: FontWeight.w400,
    letterSpacing: 0.0,
    color: Colors.black,
    shadows: [
      Shadow(
        color: Color(0xe5000000),
        offset: Offset(0.0, 4.0),
        blurRadius: 4.0,
      ),
    ],
  ),
  textAlign: TextAlign.left,
)),

(Rectangle)

Container(
  width: 197.000,
  height: 120.000,
  decoration: BoxDecoration(
    color: Color(0x99378c59),
    border: Border.all(
      color: Color(0xff0085ff),
      width: 3.0,
    ),
    boxShadow: [
      BoxShadow(
        color: Color(0x40000000),
        spreadRadius: 4.0,
        blurRadius: 4.0,
        offset: Offset(-5.0, 4.0),
      ),
    ],
  ),
),

Border Support

Previously, our border support was limited, but we now support border color, border radius, and border thickness. Here’s how it works:

Container(
  width: 197.000,
  height: 120.000,
  decoration: BoxDecoration(
    color: Color(0x99378c59),
    borderRadius: BorderRadius.all(Radius.circular(5.0)),
    border: Border.all(
      color: Color(0xff0085ff),
      width: 3.0,
    ),
  ),
),

Image Vectors Map To SVG

Lastly, previously complex shapes convert to images, but when scaling these images, they tend to be low quality images. With our latest update, these are now turned into & used as SVGs so that you have pixel-perfect scaling!

If you’re reading this, thanks for checking this out! We’d love to hear your thoughts & feedback. Be sure to join our community on Discord or email us for support at support@parabeac.com😎

Figma to Widgetbook - parabeac_core v2.4

Ivan Huerta — Fri, 25 Feb 2022 23:00:19 +0000

Hey everyone, recently we added support for component isolation in our Figma to Flutter converter parabeac_core which was a big step in helping developers generate code in a large scale application where it is necessary to isolate UI components into their own packages.

Many development teams creating component packages in other frameworks will use tools like Storybook.js for testing. For Flutter, Widgetbook is one of the best options which is why parabeac_core now has the option to export the code to be immediately testable in Widgetbook. Here's how!

Note: We also have our video guide here: https://youtu.be/aKsmXR1vF2M

In the config file of parabeac_core, (parabeac_core/lib/configurations/configurations.json) set "componentIsolation" to "componentIsolation": "widgetbook"

Run parabeac_core as usual and viola, you have a Flutter project with Widgetbook ready to test your component package.
You can duplicate and use this demo project here:

https://www.figma.com/file/R7GBEc0mfXsJi6B7y3lITe/Parabeac-Widgetbook-Example?node-id=0%3A1

You can then run it by running:
flutter run project_name/lib/main_widgetbook.g.dart

Next? Start adding the logic needed for this component package. Learn here! - https://docs.parabeac.com/docs/how-to-guides/component-isolation

Calling All Africa Flutter Developers & Figma Designers!

Ivan Huerta — Sat, 12 Feb 2022 08:06:57 +0000

In partnership with our Parabeac Africa Chapter led by Will Odia, we are throwing our first challenge where you can win up to $300 USD by building an app prototype or component package using Figma, Flutter & Parabeac! You can use parabeac_core which is our open-source tool that converts Figma files into Flutter code or Parabeac Nest which is a web app that enables you to take the design file, generate code, and merge it into a Github repo.

To participate in the challenge, create an app prototype or a component package using Parabeac and submit your video(s) here: https://airtable.com/shrq1fHwJtTs1mu9v
There are two challenges available:

Video Submission: Judged by Parabeac team members; We will select 1st ($300), 2nd, ($200) & 3rd ($100) place winners based on the video submitted and a review of the codebase. (3 min max)

TikTok Submission ($100): The video with the most views highlighting the prototype/package built with Parabeac will be the winner. (Be sure to use the #parabeac hashtag)

Be sure to watch this video to help give you ideas on submissions!
https://www.youtube.com/watch?v=FmopfwIzVIU&t=2

Good luck!

Generating Isolated Component Packages for Flutter

Ivan Huerta — Thu, 03 Feb 2022 01:10:45 +0000

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?

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.

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

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!