With the release of Flutter 3.22 at Google I/O 2024 and the positive feedback on my previous article about Flutter packages, I decided to share more tools I frequently use. Here are five additional packages to help you create great apps while keeping your code clean and organized.
With the exciting release of Flutter 3.22 during Google I/O 2024, and inspired by the positive feedback on my previous article about favorite Flutter packages, I decided to share some additional packages I frequently use in my apps. Today, I’ll highlight five Flutter packages that will help you create great apps while keeping your code clean and organized.
Often, you need to add spaces in your UI, whether in a Row
or a Column
. While options like Padding
or SizedBox
exist, they can be a bit verbose. Enter Gap, a cleaner alternative. Gap works inside scrollables and includes MaxGap
to fill available space in a Column
or Row
.
Using Gap is straightforward:
Column(
children: [
Container(color: Colors.red, height: 20),
const Gap(20), // Adds an empty space of 20 pixels.
Container(color: Colors.red, height: 20),
],
);
To keep my code organized, I usually define Gaps in a styles.dart
file containing all the app’s styling:
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 approach allows for quick refactoring if UI specifications change.
Check out the Gap package here.
Loading indicators are crucial for user experience. Skeletonizer enhances user experience by adding skeleton loaders, providing a simple placeholder UI that mimics the final content. This technique is widely used in popular apps, making it familiar to users.
Check out the Skeletonizer package here.
Honorable Mention: A simpler, older alternative is Skeletons, which I used initially and still use in several apps.
Good user experience often involves providing feedback through toast notifications. toastification
is a customizable and easy-to-use package for toast notifications.
I use it to inform users about app events, such as “Your post awaits approval” or “Something went wrong.”
Check out the Toastification package here.
This small but powerful package transforms plain text into clickable elements, detecting patterns like URLs, email addresses, and hashtags. It’s useful in various scenarios:
Using this package is simple: just replace Text()
with LinkifyText()
.
Check out the Linkify_Text package here.
Creating native splash screens can be cumbersome, but flutter_native_splash
makes it easy. This package is highly customizable, supporting both Android and iOS, and ensures a smoother transition during app initialization.
Check out the Flutter_Native_Splash package here.
This concludes my second installment on favorite and most-used Flutter packages. With Flutter 3.22, I anticipate many exciting new packages to enhance our app development process. Stay tuned for more recommendations as the Flutter ecosystem continues to grow.
Also read:
Embracing AI: A Global Trend Among Business Leaders
Title | Content |
---|---|
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 inspired by the positive feedback on my previous article about favorite Flutter packages, I decided to share some additional packages I frequently use in my apps. Today, I’ll highlight five Flutter packages that will help you create great apps while keeping your code clean and organized. |
Gap | Often, you need to add spaces in your UI, whether in a Row or a Column . While options like Padding or SizedBox exist, they can be a bit verbose. Enter Gap, a cleaner alternative. Gap works inside scrollables and includes MaxGap to fill available space in a Column or Row . Using Gap is straightforward: dart Column( children: [ Container(color: Colors.red, height: 20), const Gap(20), // Adds an empty space of 20 pixels. Container(color: Colors.red, height: 20), ], ); To keep my code organized, I usually define Gaps in a styles.dart file containing all the app’s styling: dart 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 approach allows for quick refactoring if UI specifications change. Check out the Gap package here. |
Skeletonizer | Loading indicators are crucial for user experience. Skeletonizer enhances user experience by adding skeleton loaders, providing a simple placeholder UI that mimics the final content. This technique is widely used in popular apps, making it familiar to users. Check out the Skeletonizer package here. Honorable Mention: A simpler, older alternative is Skeletons, which I used initially and still use in several apps. |
Toastification | Good user experience often involves providing feedback through toast notifications. toastification is a customizable and easy-to-use package for toast notifications. I use it to inform users about app events, such as “Your post awaits approval” or “Something went wrong.” Check out the Toastification package here. |
Linkify_Text | This small but powerful package transforms plain text into clickable elements, detecting patterns like URLs, email addresses, and hashtags. It’s useful in various scenarios: – Push Notifications: Making links in notification text clickable. – In-App About Screens: Converting potential links into interactive elements. – User Posts: In social apps, making mentions and hashtags interactive. Using this package is simple: just replace Text() with LinkifyText() . Check out the Linkify_Text package here. |
Flutter_Native_Splash | Creating native splash screens can be cumbersome, but flutter_native_splash makes it easy. This package is highly customizable, supporting both Android and iOS, and ensures a smoother transition during app initialization. Check out the Flutter_Native_Splash package here. |
Conclusion | This concludes my second installment on favorite and most-used Flutter packages. With Flutter 3.22, I anticipate many exciting new packages to enhance our app development process. Stay tuned for more recommendations as the Flutter ecosystem continues to grow. |
Join Our Whatsapp Group
Join Telegram group
The Gap package is designed to add spaces in your UI elements in a cleaner and less verbose way compared to traditional methods like Padding
or SizedBox
. It works well inside scrollable views and includes MaxGap
to fill available space in a Column
or Row
.
Using the Gap package is straightforward. You can add it to your Column
or Row
widgets like this:
Column(
children: [
Container(color: Colors.red, height: 20),
const Gap(20), // Adds an empty space of 20 pixels.
Container(color: Colors.red, height: 20),
],
);
To keep your code organized, you can define Gaps in a styles.dart
file:
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);
Skeletonizer enhances user experience by adding skeleton loaders, which are placeholder UIs that mimic the final content. This technique keeps users informed that data is loading and is widely used in popular apps.
To implement Skeletonizer, you simply need to add it to your project and configure it to show skeleton loaders for your data:
// Example usage of Skeletonizer
SkeletonLoader(
builder: (context, index) => YourWidget(),
itemCount: 10, // Number of skeleton items to display
)
Toastification is used to provide toast notifications in your app. These notifications inform users about events or actions, like “Your post awaits approval” or “Something went wrong.”
Integrating Toastification is simple. Add the package to your project, then use it to show toast notifications:
Toastification.show(
message: "Your post awaits approval",
context: context,
);
Linkify_Text transforms plain text into clickable elements by detecting patterns such as URLs, email addresses, and hashtags. It’s useful for making content interactive in push notifications, in-app screens, and user posts.
To use Linkify_Text, replace the Text()
widget with LinkifyText()
:
LinkifyText(
"Check out https://flutter.dev",
linkTypes: [LinkType.url],
style: TextStyle(color: Colors.blue),
)
Flutter_Native_Splash simplifies the creation of native splash screens for your apps. It supports both Android and iOS and ensures a smooth transition during app initialization.
To set up Flutter_Native_Splash, configure the package in your pubspec.yaml
and customize the splash screen settings:
flutter_native_splash:
color: "#42a5f5"
image: assets/images/splash.png
This configuration will automatically generate the necessary files for both platforms.
If you have more questions about using these packages with Flutter 3.22, feel free to reach out or explore the documentation linked for each package. Happy coding!
In honor of the International Day of Family Remittances (IDFR) 2024, Flutterwave, Africa's leading payment…
PadhAI, a groundbreaking AI app, has stunned the education world by scoring 170 out of…
Vector databases are essential for managing high-dimensional data efficiently, making them crucial in fields like…
Welcome to the whimsical world of Flutter app development services! From crafting sleek, cross-platform applications…
Flutter, Google's UI toolkit, has revolutionized app development by enabling developers to build natively compiled…
SQL (Structured Query Language) is a powerful tool for managing and manipulating databases. From converting…