5 extra packages to use with Flutter 3.22 in 2024

With the exciting release of Flutter 3.22 during Google I/O 2024 and of course the love the previous article about my favorite packages during developing Flutter apps, I decided to share some extras I use in most of my apps. Today I am sharing 5 Flutter packages to help you not only make great apps but also keep your code clean and organized.

1. gap

A lot of times you need to add some spaces in your UI, weather it is a Row or a Column and we already have options to do so like using Padding or a SizedBox. But both of these options are a bit verbose for my liking. So here comes Gap to fix this. Gap is like a SizedBox but it is clean, works inside Scrollable and also comes with MaxGap to fill the available space in a Column or a Row.

It is also really easy to use:

Column(
  children: [
    Container(color: Colors.red, height: 20),
    const Gap(20), // Adds an empty space of 20 pixels.
    Container(color: Colors.red, height: 20),
  ],
);

As I said before, I like my code organized and clean, so I usually add the Gaps to be used in a styles.dart file that contains all the Styling for the app like this:

const kGap0 = Gap(0);
const kGap5 = Gap(5);
const kGap8 = Gap(8);
const kGap10 = Gap(10);
const kGap15 = Gap(15);
const kGap20 = Gap(20);
const kGap25 = Gap(25);
const kGap30 = Gap(30);
const kGap35 = Gap(35);
const kGap40 = Gap(40);
const kGap50 = Gap(50);
const kGap60 = Gap(60);
const kGap100 = Gap(100);

This way you can refactor the spaces in your app quickly if the UI Specs change.

You can check the package here.

2. Skeletonizer

Everyone hates boring loadings or even worse when they don’t exist at all and as a user you have no idea what is going on. Is the data loading? Is the app crashing? What is happening? I use skeletonizer to add skeleton loaders in my apps and enhance the user experience. Skeleton UI offers a simple placeholder UI that gives the illusion your data has already loaded. A lot of popular apps use this technique and users are familiar with it. It’s also super easy to add in your apps

You can check the package here.

*A simpler but now old alternative named Skeletons can be found here. This is an honorable mention as it was the first I used and still exists in at least 8 of my apps.

3. toastification

Talking about beautiful UIs and good user experience, I couldn’t leave out of this list my personal favorite toast notifications package. I have been using my own “toast notification” implementation for a while until I came across this super customizable and easy to use package. I mostly use toasts to inform users about something happening in the app like “Your post awaits approval” or “Oh no something went wrong”.

You can check the package here.

4. linkfy_text

This package, though small and simple, proves to be incredibly useful in various applications. It transforms plain text into clickable elements by detecting patterns such as URLs, email addresses, hashtags, and more. I frequently utilize this package across several of my apps, including:

• Push Notifications: Ensuring that any links within the notification text are clickable.
• In-App About Screens: Converting any potential links into interactive elements, enhancing user experience.
• User Posts: Particularly in social apps, making mentions and hashtags interactive, facilitating user engagement and navigation.

Using this package is straightforward. It’s as simple as replacing the Text() widget with LinkifyText(), allowing you to effortlessly add interactivity to your app's text content.

By integrating this package, you can enhance the functionality and user experience of your apps with minimal effort.

You can check the package here.

5. flutter_native_splash

Last but not least comes a package to help you make native splash screens for your apps. I know there are other ways to do it, not even using a package, just following the native way, but what can I say, I am lazy… This package is highly customizable and allows to make any kind of splash screen you need both for Android and iOS. Not only that but you can keep it in site while app initializes for a smoother transition.

You can check the package here.

This concludes the second part of my previous post about by favorite and most used packages while developing Flutter apps. With the coming of Flutter 3.22 I expect a lot of exciting new packages to come to life to help us make even better apps.