flutter_addons 2.2.1

Supercharge your development workflow with Flutter Addons — the ultimate toolkit for building sleek, responsive Flutter apps effortlessly. Packed with powerful theme engines, seamless scaling tools, a [...]

Flutter Addons is a powerful toolkit designed to streamline responsive Flutter development. It includes theming engines, layout utilities, scaling extensions, and animation helpers—everything you need to build polished, adaptive apps faster. Whether you're working with Figma designs or coding pixel-perfect UIs, Flutter Addons keeps your code clean, consistent, and scalable.

⚡ Supercharge your Flutter workflow and become 10x more productive with the Flutter Addons VS Code Extension.

---

🚀 Key Features

• ⚡ Easy Integration: Just wrap with ResponsiveScope and enjoy.
• Soul Theme Engine: Structured colors & typography for cohesive UI.
• Dart Extensions: Helpers for String, Map, bool, int, etc.
• Context Helpers: Easy access to theme, media, and text styles.
• Prebuilt Widgets: Rows, columns, grids, stacks—flexible layouts.
• Routing & Animations: Smooth navigation with rich effects.
• Utilities: Network, debug, error handling, and UI tools.
• Math & Time: Formatting, delays, calculations simplified.
• Image & Color: Extract colors, filters, image processing.
• Responsive Scaling: Based on design frames with device/orientation detection.
• Error Screens & DPI: Stylish fallbacks and density-aware layouts.

---

⚙️ Initialization

ResponsiveScope( // 👈  ResponsiveScope — VERY Important: Manages layout scaling, orientation lock, and global error handling
  enableDebugLogging: true, // Enable debug logs for responsive layout changes
  screenLock: AppOrientationLock.none, // No orientation restriction
  errorScreen: ErrorScreen.blueCrash, // Custom error screen for uncaught Flutter errors
  designFrame: const Frame(width: 390, height: 844), // Base design frame for scaling (e.g., iPhone 13)
  scaleMode: ScaleMode.design, // Use design-based scaling for consistent UI
  layoutBuilder: (ui) {
    // Handle layout changes based on screen size/orientation
    if (ui.isLandscape) {
      throw UnimplementedError(
        'Landscape layout is not implemented yet. '
        'Please handle different screen orientations.',
      );
    }
    return const MobileApp();
  },
);

---

📐 Unified Responsive UX

Smooth scaling across devices. Use one mode globally for consistency.

Extension	Purpose	Example	Description
.h	Height	24.h	Auto-scaled height
.r	Radius / Scale	12.r	Based on shortest side (width vs height)
.sp	Font size	14.sp	Auto-scaled font size (like sp)
.w	Width	16.w	Auto-scaled width

💎 Effortless Theming with Soul — Quickstart Guide

1. Create Custom Colors
   Extend ThemeKolors and override colors:

   class CustomColors extends ThemeKolors {
     @override
     Color get primaryColor => Color(0xFF4A90E2);
     // override other colors...
   }```
   

2. Create Custom Typography Extend AppTypo and define text styles:

   class CustomTypography extends AppTypo {
     @override
     String get fontFamily => 'Montserrat';
     @override
     TextStyle get bodyText => TextStyle(fontSize: 16.sp);
     // define more styles...
   }
   

3. Generate Theme Use ThemeMaker.makeTheme with your custom classes:

   ThemeData get lightTheme =>
      ThemeMaker.makeTheme(AppLightColors(), typography: AppFonts());
   
   

🎨 Apply the Theme

Use your custom theme in MaterialApp. By Extending ThemeManager create your own controller that handles theme state and switching logic more easily. See the example app.

class Themer extends ThemeManager {
 static const _themeKey = 'selected_theme';

 Themer() {
   _loadThemeFromPrefs(); // Load theme on initialization
 }

 @override
 ThemeData get lightTheme =>
     ThemeMaker.makeTheme(AppLightColors(), typography: AppFonts());

 @override
 ThemeData get darkTheme =>
     ThemeMaker.makeTheme(AppDarkColors(), typography: AppFonts());
}

---

1. Applying Text Styles

You can use the extension on num to apply various text styles directly.

Text(
  "Hello, World!",
  style: 16.t.bold.italic.k(Colors.blue),
);

---

2. Using Predefined TextTheme Styles from BuildContext

Easily access text styles from the app's ThemeData.

Text(
  "Title Text",
  style: context.titleLarge,
);

📏 Spacing Extension Reference

The Spacing extension provides quick, expressive syntax for margins, paddings, and spacing widgets based on integer values.

Syntax	Margin Description	Margin Example	Padding Description	Padding Example
.m	Margin on all sides	10.m	Padding on all sides	10.p
.mt	Margin on top	10.mt	Padding on top	10.pt
.mb	Margin on bottom	10.mb	Padding on bottom	10.pb
.ml	Margin on left	10.ml	Padding on left	10.pl
.mr	Margin on right	10.mr	Padding on right	10.pr
.mx	Horizontal margin (left & right)	10.mx	Horizontal padding (left & right)	10.px
.my	Vertical margin (top & bottom)	10.my	Vertical padding (top & bottom)	10.py

🔁 Async utility extension:

Method	Description
safe(fallback: T)	Safely executes a future with a fallback value on error
retry(retries: int, delay: Duration)	Retries an async call on failure with delay intervals
withTimeout(Duration, fallback: T)	Sets a timeout on a future with a fallback result
collect()	Collects all data emitted by a stream into a list
asyncMap(Future<T> Function)	Maps a stream asynchronously with a function
delayEach(Duration)	Delays each emission in a stream by a specified duration
batch(int)	Processes stream data in batches of specified size
FutureUtils.waitAll(List<Future>, ignoreErrors: bool)	Awaits multiple futures safely, optionally ignoring errors

📅 DateTime Extension Overview

Method	Description	Method	Description
.tomorrow	Gets tomorrow’s date	.nextDay	Moves to the next day
.yesterday	Gets yesterday’s date	.previousDay	Moves to the previous day
.today	Gets today’s date without time	.addDays(int)	Adds or subtracts days
.time24h	Returns time in 24h format	.isToday	Checks if the date is today
.time12h	Returns time in 12h format	.isYesterday	Checks if the date is yesterday
.dateOnly	Returns date in yyyy-MM-dd format	.isTomorrow	Checks if the date is tomorrow
.formattedDate	Full formatted date string	.isSameDay(DateTime)	Checks if two dates are the same day
.timeAgo	Returns human-readable "time ago" string	.greeting	Returns a greeting enum based on time
.daysInMonth	Returns list of all days in current month	.firstDayOfWeek	First day of the current week
.lastDayOfWeek	Last day of the current week	.previousMonth	Gets the previous month’s date
.nextMonth	Gets the next month’s date	.previousWeek	Gets date of the previous week
.nextWeek	Gets date of the next week	.leapYear(int year)	Checks if the given year is a leap year
.daysInAMonth(month, year)	Number of days in a specific month and year	.fullDayName	Returns full name of the day
.sortDayName	Returns abbreviated day name

---

💱 Currency Conversion Extensions

Method	Symbol	Description	Example Output
.toDollar()	$	Converts to USD format	$1234.57
.toEuro()	€	Converts to Euro format	€1234.57
.toRupee()	₹	Converts to Indian Rupee format	₹1234.57
.toBangladeshiTaka()	৳	Converts to Bangladeshi Taka format	৳1234.57

---

Navigation Extension Usage

Available animations

enum AnimationType { fade, slideFromRight, slideFromLeft, scale, rotate,rotatescale }

Method/Property	Description	Example Usage
_navigator	Gets the NavigatorState for the current context	context._navigator
navigator	Provides NavigatorHelperAddons with animations	context.navigator
go(Widget page)	Pushes a widget page with animation	context.go(MyPage())
goName(String name)	Pushes a named route with animation	context.goName('/home')
goReplace(Widget page)	Replaces current route with widget page with animation	context.goReplace(MyPage())
pop()	Pops current route if possible	context.pop()
popToRoot()	Pops all routes until the root	context.popToRoot()
launch(BuildContext context)	Pushes this widget onto navigation stack with animation	MyWidget().launch(context)

---

🪄 Avoid Using Print Statements

Instead of using print for debugging, leverage a dedicated logging system for clearer, more structured output. Below is an example using a custom Debug class to log messages with different severity levels:

Method	Description
Debug.bug()	Logs a bug message
Debug.info()	Logs an informational message
Debug.warning()	Logs a warning message
Debug.error()	Logs an error message
Debug.success()	Logs a success message
debug()	Logs a generic message

Using a structured logging system allows better control and visibility over your app’s runtime behavior, making it easier to debug and maintain.

📚 Learn More

• 🎨 Soul Theme Engine – Custom theming, typography, and dynamic themes.
• 📐 Responsive System – Scale UI across devices based on design frame.
• 🎞️ Animation Utils – Physics, curves, transitions, and more.
• 🧩 Widget Extensions – Margin, padding, size, and layout extensions.

📬 Contributions & Support

Contributions are welcome! If you have any feature requests, bug reports, or suggestions,
feel free to submit an issue or a pull request on GitHub.

👨‍💻 Author

Flutter Addons is actively maintained by AR Rahman. For questions, suggestions, or collaboration opportunities, feel free to reach out.

If you find this package helpful, please consider giving it a ⭐️ on GitHub — your support is greatly appreciated! 🚀