Utility package for web developers in Flutter

Harun Karahan — Sun, 19 May 2024 20:02:41 +0000

[

In this article, I will share how flutter_gg can improve your coding process and why you should prefer it in your next project.
Before we start, here are key benefits you can expect from flutter_gg.

Modular styling
Simplifying complex layouts that often involve many widgets in Flutter. ( Coding everything in one gg block as we do in web. )
Reducing the time required to learn widgets and to adapt the framework for new Flutter developers.

Let's break down why we need flutter_gg. If you need opacity, padding, and a click event, you'll see something like this.
List the problems we need to solve here.

The developer has to learn all these widgets to be able to code it.
Reading code becomes difficult for developers. All these widgets affect text widgets and it's not easy to realize (imagine it's a bigger widget).
Whenever you need to edit the styling of your widget, you have to cut/paste a lot of times.
To keep your code clean, you will create hundreds of widgets.

And we are going to improve the coding experience with flutter_gg.

The first thing we are going to do is unify all of our styles into one variable.

In order to achieve modular styling, we are going to create a style file for each of our screens.

And here's the result. We made the code more readable and scalable in the long term. We can even use the same styles for different widgets without having to create additional custom widgets.

You can find more details in the flutter_gg repo.

https://github.com/karahanharunn/flutter_gg

Check out the more detailed example I've created in Git Hub.

https://github.com/karahanharunn/flutter_gg_card

In this article, I discussed a problem I encountered and shared my alternative solution with you!

I hope you found it useful! Your insights and feedback are invaluable to me, thank you in advance for engaging with my content.

Feel free to contact me on LinkedIn if you have any questions or require assistance.

Harun Karahan | LinkedIn

https://github.com/karahanharunn/

Why styled-system is so powerful

Harun Karahan — Sat, 17 Feb 2024 07:05:53 +0000

Definition of problem

Last week, while working on a personal project, I wanted to use Tailwind CSS to enhance the design of my components, which were built with styled-components. Tailwind CSS is popular for its user-friendly design classes that make web development more efficient. However, I ran into a problem. Styled-components, the tool I used for creating my component library, didn’t work well with Tailwind CSS.

Here’s why: styled-components applies styles directly to elements (inline styles), while Tailwind CSS applies styles through classes. This means you can’t easily use Tailwind’s classes to override styles created with styled-components.

Additionally, when you want to make something customizable with styled-components, you often have to define each property individually, which can be something will make you tired in long term.

I bet many of us have encountered similar codebases in various projects! :)

Most well-known solutions

First, let’s list the pros and cons of the two most well-known approaches: Tailwind and Styled-Components. Then, I will introduce you to an alternative approach that is easier to use while still maintaining organization.

Pros of Tailwind CSS:

Rapid Development: Tailwind’s utility-first approach makes it quicker to style components directly in your markup, speeding up the development process.
Customizable: It offers deep customization options, allowing you to tailor the framework to fit your project’s specific needs.

Cons of Tailwind CSS:

Verbose HTML: Your HTML can become cluttered with many class names, making it harder to read and maintain.
Over-reliance on Utilities: There’s a risk of becoming too reliant on utility classes, which can lead to challenges in implementing more complex, custom designs that require traditional CSS.
Limited Flexibility with Other Libraries: Tailwind’s class-level operation can limit its compatibility and flexibility when integrating with other libraries or frameworks that rely on different styling approaches.

Our second option is styled-components. Even though it’s more clean approach, you should spend important amount of time to make it custom and to gain typescript support.

Pros of Styled Components:

Component-Level Styling: Allows for individual styling of components, making it easier to reuse and maintain them.
Dynamic Styling: Facilitates the application of dynamic styles using props or themes, directly integrating with JavaScript logic.
CSS in JS: Keeps styling closely associated with components, aiding in organization and minimizing styling conflicts.

Cons of Styled Components:

Performance Overhead: The dynamic styling approach may lead to slight performance drops.
TypeScript Support: While it offers TypeScript support, integrating styled-components with TypeScript can sometimes be complex and require additional typings.
Cluttered JavaScript: Embedding CSS within JavaScript can clutter components, particularly in larger projects, making the code harder to read.

And here is why styled-system is so powerful
This tool can speed up your component building process and allows for easy style changes without updating your component library.

We did not define any types or properties ourselves and thanks to styled system for we can still update any property we want.

In this article, I discussed a problem I encountered and shared my alternative solution with you! I hope you found it useful!

Your insights and feedback are invaluable to me, thank you in advance for engaging with my content.

Feel free to contact me on LinkedIn if you have any questions or require assistance.

Github

DEV Community: Harun Karahan

Utility package for web developers in Flutter

Why styled-system is so powerful

Definition of problem

Most well-known solutions