Flutter Addons is a powerful micro-extension framework built to accelerate Flutter app development. Designed with responsiveness, theming, and developer productivity in mind, it lets you build scalable, pixel-perfect, and theme-aware applications with minimal boilerplate.

By providing intuitive extensions, responsive layout tools, and advanced theming capabilities, Flutter Addons helps you reduce development time by up to 7×, so you can focus on delivering beautiful user experiences faster.

⚡ Boost your Flutter workflow and unlock greater productivity with the Flutter Addons VS Code Extension.

---

Key Features

• Seamless Responsiveness: Effortlessly adapt your UI across devices with ResponsiveScope and smart scaling utilities.
• Powerful Theming: Define consistent colors, typography, and style systems with the Soul Theme Engine.
• Dart Extensions: Clean and readable syntax helpers for common types like String, Map, bool, and more.
• Context Helpers: Easy access to media queries, theme data, text styles, and more from the BuildContext.
• Flexible Layout Widgets: Ready-to-use rows, columns, grids, and stacks that simplify complex UI arrangements.
• Smooth Navigation & Animations: Built-in routing helpers paired with elegant transition effects.
• Utility Toolkit: Debugging aids, network helpers, error handling, math & time utilities all in one place.
• Image & Color Processing: Extract dominant colors, apply filters, and manipulate images effortlessly.
• Error & DPI Awareness: Customizable error screens and density-aware layouts for flawless rendering.

⚙️ 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)=>  MobileApp(),
);

---

📐 Responsive Units

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

Extension	Purpose	Example	Description
.ph, .pw	Percent	24.ph	Percent Based
.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

⚡ Check out the example app for a quick understanding: View Example App.

💎 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! 🚀