DEV Community: Ivan

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!

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.