DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for How I generated my personal landing page with Figma & Flutter using Parabeac
Ivan for Parabeac

Posted on

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

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:

Figma Design

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:

Custom Text

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:

PR Success

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

VSCode Project

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

First Conversion

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:

Custom File 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:

Adding Text

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

Website Gif

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.

Top comments (2)

Collapse
 
fyodorio profile image
Fyodor

Doesn’t work on mobile at all 😞

Collapse
 
ivan015 profile image
Ivan

Correct, you have to make the website responsive using a Flutter package or the LayoutBuillder widget to create and render different screens on different devices. For now, I'm only doing web to keep the article short, but will set breakpoints for different devices in the future 😁

Need better DEV posts?

You can set your approximate experience level in settings which can help improve the relevance of your DEV Home Feed.