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.
Table of Contents
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.
1. 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:
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.
2. 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.
3. 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.
4. 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.
5. 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.
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
Information in Table format
| 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
FAQs for Using Extra Packages with Flutter 3.22 in 2024
What is the purpose of the Gap package?
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.
How do I use the Gap package in my Flutter project?
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);What does the Skeletonizer package do?
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.
How can I implement Skeletonizer in my Flutter app?
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
)What is the Toastification package used for?
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.”
How do I integrate Toastification into my app?
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,
);What does the Linkify_Text package do?
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.
How can I use Linkify_Text in my app?
To use Linkify_Text, replace the Text() widget with LinkifyText():
LinkifyText(
"Check out https://flutter.dev",
linkTypes: [LinkType.url],
style: TextStyle(color: Colors.blue),
)What is Flutter_Native_Splash used for?
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.
How do I set up Flutter_Native_Splash in my project?
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.pngThis 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!