flutter_addons - Dart API docs

Logo Image

Issues Forks Stars Contributors

Flutter Addons is a collection of extensions and utilities designed to simplify and accelerate the development of Flutter applications. This package includes a variety of tools that help streamline common tasks, making it easier to build high-quality apps quickly and efficiently.

Features

🚀 Key Features

🎨 Soul Theme Engine: Enables structured theming with defined color palettes, typography, and component styles, ensuring a cohesive and consistent user interface.
🔧 Dart Extensions: String, Map, Boolean, Integer, and other useful extensions.
🎨 Context Helpers: Theme management, responsive layouts, and text styling.
📐 Widgets: Prebuilt flexible layouts for rows, columns, grids, and stacking.
🔄 Routing Enhancements: Advanced navigation with smooth page transitions.
🎞️ Animations: Bezier motion, fade effects, physics-based movements, and more.
⚙️ System Utilities: UI handling, network utilities, debugging, and error handling.
📊 Math & Time Helpers: Convenient functions for formatting, delays, and calculations.
🎨 Image & Color Processing: Extract dominant colors, manipulate images, and more.

📦 Getting Started

Add the dependency in your pubspec.yaml file. Simply run this command:

flutter pub add flutter_addons

⚙️ Initialize

A helper widget that initializes UIConfig to configure and manage
responsive UI scaling, text adaptation, and screen-related settings.

UIConfig(
  frame: const Size(360, 890), // Define the base design frame   
  minTextAdapt: true, // Enable minimum text adaptation
  splitScreenMode: true, // Allow scaling in split-screen mode   builder: (_, child) {
    return MaterialApp(
      home: HomeScreen(),
    );
  },
 );

ResponsiveExtension

The ResponsiveExtension provides a set of helper getters for determining the screen size category based on the width of the device. It extends BuildContext and uses MediaQuery to categorize screens into different breakpoints.

Example Usage

You can use these getters to apply conditional layouts based on screen size.

if (context.isXs) {
  print("Extra small screen");
} else if (context.isSm) {
  print("Small screen");
} else if (context.isMd) {
  print("Medium screen");
} else if (context.isLg) {
  print("Large screen");
} else if (context.isXl) {
  print("Extra large screen");
}

Breakpoints

Getter	Description	Width Range
`isXs`	Extra small screens (phones)	`< 576px`
`isSm`	Small screens (phones)	`576px - 767px`
`isMd`	Medium screens (tablets)	`768px - 991px`
`isLg`	Large screens (desktops)	`992px - 1199px`
`isXl`	Extra large screens (large desktops)	`>= 1200px`

Notes

This extension helps in making responsive UI decisions.
Use these breakpoints to adjust widget layouts dynamically.

🎨 Soul Theme Engine

Soul is a theme engine designed by me to streamline and enhance theming in apps.
It follows the Material Design Guidelines, allowing for structured theming with color palettes, typography, and component styles.
It enables dynamic theming (light/dark mode) and supports custom theme extensions.

🌟 Key Features

Material-based Theming: Uses ColorScheme to align with Material 3.
Light & Dark Modes: Supports switching between light and dark themes.
Customizable Palettes: An extendable Kolors class that allows for custom themes, supporting primary color Seed values or Material Swatch colors for flexible theming.
Consistent UI Styling: Defines colors, typography, and component themes globally.

Getting Started

Extending `Kolors`

To create a custom color palette, extend Kolors and define your colors:

class CustomTheme extends Kolors {
  @override
  Color get primaryColor => const Color(0xFF6200EE);

  @override
  Color get forground => const Color(0xFFFFFFFF);

  @override
  Color get background => const Color(0xFF121212)...

Now, use the custom theme:

final customTheme = ThemePainter(CustomTheme());

Extending `Typography`

To create a custom typography, extend Typography and define your different textStyles:

class MyTypography extends Typography {
  @override
  String get fontFamily => 'Roboto';

  @override
  TextStyle get bodyText =>
      TextStyle(fontSize: 18.sp, fontWeight: FontWeight.w500);

Now, use the typography in your theme:

🎨 Apply Theme

Initialize the theme using ThemePainter with a predefined color palette and apply on your Material App.

final darkTheme = ThemePainter(DarkSoul()).themeData;
final lightTheme = ThemePainter(LightSoul()).themeData;

You can manage and apply theme dynamically using ThemeManager.

TextStyle Extensions Usage

1. Applying Text Styles on `num`

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

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

16.t → Sets the font size to 16.
.bold → Applies bold font weight.
.italic → Makes the text italic.
.k(Colors.blue) → Changes the text color.

2. Using Predefined `TextTheme` Styles from `BuildContext`

Easily access text styles from the app's ThemeData.

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

You can use copywith for extends customization.

Spacing Extension Usage

The Spacing extension provides convenient methods to easily add margins, paddings, and SizedBox elements based on integer values. It uses w for width and h for height.

Margin

`m` - Margin on all sides

10.m  // Adds margin of 10 units to all sides (top, bottom, left, right)

`mt` - Margin on the top

10.mt  // Adds margin of 10 units to the top

`mb` - Margin on the bottom

10.mb  // Adds margin of 10 units to the bottom

`ml` - Margin on the left

10.ml  // Adds margin of 10 units to the left

`mr` - Margin on the right

10.mr  // Adds margin of 10 units to the right

`mx` - Horizontal margin (left and right)

10.mx  // Adds margin of 10 units to both left and right

`my` - Vertical margin (top and bottom)

10.my  // Adds margin of 10 units to both top and bottom

Padding

`p` - Padding on all sides

10.p  // Adds padding of 10 units to all sides (top, bottom, left, right)

`pt` - Padding on the top

10.pt  // Adds padding of 10 units to the top

`pb` - Padding on the bottom

10.pb  // Adds padding of 10 units to the bottom

`pl` - Padding on the left

10.pl  // Adds padding of 10 units to the left

`pr` - Padding on the right

10.pr  // Adds padding of 10 units to the right

`px` - Horizontal padding (left and right)

10.px  // Adds padding of 10 units to both left and right

`py` - Vertical padding (top and bottom)

10.py  // Adds padding of 10 units to both top and bottom

SizedBox

`s` - SizedBox with both height and width

10.s  // Creates a SizedBox with 10 units of height and width

Async Functions

Dart Async Utility Extension to simplify asynchronous operations

1. Safe Future Execution

String? result = await someAsyncFunction().safe(fallback: "Default Value");

2. Retry Async Calls on Failure

String data = await fetchData().retry(retries: 3, delay: Duration(seconds: 2));

3. Set a Timeout for an Async Task

String response = await fetchData().withTimeout(Duration(seconds: 5), fallback: "Timeout Error");

4. Collect Stream Data as List

List<int> numbers = await numberStream.collect();

5. Map Async Streams

Stream<String> upperCaseStream = textStream.asyncMap((text) async => text.toUpperCase());

6. Delay Stream Emissions

Stream<int> delayedNumbers = numberStream.delayEach(Duration(seconds: 1));

7. Process Data in Batches

Stream<List<int>> batches = numberStream.batch(5);

8. Await Multiple Futures Safely

List<String> results = await FutureUtils.waitAll([
  fetchData(),
  fetchOtherData(),
], ignoreErrors: true);

Date Time Extension Usage

Accessing Dates

DateTime tomorrow = DateTime.now().tomorrow;
DateTime yesterday = DateTime.now().yesterday;
DateTime today = DateTime.now().today;

Formatting Dates

String time24h = DateTime.now().time24h;
String time12h = DateTime.now().time12h;
String dateOnly = DateTime.now().dateOnly;
String formattedDate = DateTime.now().formattedDate;

Adding/Subtracting Days

DateTime nextDay = DateTime.now().nextDay;
DateTime previousDay = DateTime.now().previousDay;
DateTime add5Days = DateTime.now().addDays(5);
DateTime subtract3Days = DateTime.now().addDays(-3);

Checking Days

bool isToday = DateTime.now().isToday;
bool isYesterday = DateTime.now().isYesterday;
bool isTomorrow = DateTime.now().isTomorrow;
bool isSameDay = DateTime.now().isSameDay(DateTime.now().subtract(Duration(days: 1)));

Getting Time Ago

String timeAgo = DateTime.now().timeAgo;

Greeting Based on Time

TimeOfDayGreeting greeting = DateTime.now().greeting;

Week, Month, and Year Operations

List<DateTime> daysInMonth = DateTime.now().daysInMonth;
DateTime firstDayOfWeek = DateTime.now().firstDayOfWeek;
DateTime lastDayOfWeek = DateTime.now().lastDayOfWeek;
DateTime previousMonth = DateTime.now().previousMonth;
DateTime nextMonth = DateTime.now().nextMonth;
DateTime previousWeek = DateTime.now().previousWeek;
DateTime nextWeek = DateTime.now().nextWeek;

Leap Year and Days in Month

bool isLeapYear = DateTime.now().leapYear(2024);
int daysInFeb2024 = DateTime.now().daysInAMonth(2, 2024);

Day Names

String fullDayName = DateTime.now().fullDayName;
String shortDayName = DateTime.now().sortDayName;

Currency Conversion

Dart extension on num that converts a number into a currency format with a symbol, ensuring a fixed decimal length.

  double price = 1234.567;
  print(price.toDollar());       // Output: $1234.57
  print(price.toEuro());         // Output: €1234.57
  print(price.toRupee());        // Output: ₹1234.57
  print(price.toBangladeshiTaka()); // Output: ৳1234.57

Animation

Enum for available animations

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

Navigate using `Context`

context.navigator

`to(Widget page)`

context.to(MyPage());

`toNamed(String name)`

context.toNamed('/myRoute');

`back()`

context.back();

`toReplace(Widget page)`

context.toReplace(MyPage());

`go(BuildContext context)`

MyPage().go(context);

This extension adds animation effects to Flutter's Widget class, allowing for easy animations like fade, scale, slide, rotation, bounce, spring, and more.

Example Usage

Text("Hello, Flutter!").animate(),  // Fade + Scale + Slide
SizedBox(height: 20),
Icon(Icons.star, size: 50, color: Colors.amber).spring(),  // Spring Bounce
SizedBox(height: 20),
ElevatedButton(
  onPressed: () {},
  child: Text("Shake Me"),
).shake(repeat: true, intensity: 5),  // Shaky Button
SizedBox(height: 20),
Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: List.generate(5, (index) => Icon(Icons.circle, size: 20).staggered(index)),  // Staggered effect
),

Available Animations

Here’s a table summarizing the available animations and their parameters:

Animation Type	Description	Key Parameters
Combined Animation	Fade, scale, and slide effects combined.	`duration`, `delay`, `repeat`, `inverse`, `scaleBegin`, `scaleEnd`, `slideX`, `slideY`, `opacityBegin`, `opacityEnd`
Fade In	A fade-in effect with optional delay, repeat, and inverse animation.	`duration`, `delay`, `repeat`, `inverse`
Scale In	A scale effect with optional repeat, inverse, and delay.	`duration`, `delay`, `repeat`, `inverse`, `begin`, `end`
Slide In From Left	A slide-in effect from the left with repeat and inverse options.	`duration`, `delay`, `repeat`, `inverse`, `offset`
Rotation	A rotation effect with repeat, inverse, and delay options.	`duration`, `delay`, `repeat`, `inverse`, `begin`, `end`
Bounce	A bounce effect with optional repeat, inverse, and delay.	`duration`, `delay`, `repeat`, `inverse`, `begin`, `end`
Spring (Bounce Effect)	A spring animation with bounce effects.	`duration`, `delay`, `repeat`, `inverse`, `begin`, `end`
Staggered	Applies animation with a staggered delay effect.	`index`, `duration`
Shake	A randomized shake effect with optional repeat, inverse, and intensity.	`duration`, `delay`, `repeat`, `inverse`, `intensity`

This table provides a concise overview of the animation types, their descriptions, and key parameters that can be adjusted for each animation effect.

These extensions provide easy-to-use methods to enhance widgets by applying different effects like padding, margins, gestures, and more.

`center()` - Wraps a widget in a `Center` widget.

Text("Hello, world!").center();

`withPadding()` - Adds padding to the widget.

Text("Hello").withPadding(EdgeInsets.all(16));

`withMargin()` - Adds margin to the widget.

Text("Hello").withMargin(EdgeInsets.symmetric(horizontal: 16));

`onTap()` - Adds a `GestureDetector` with an `onTap` function.

Text("Tap me!").onTap(() => print("Tapped"));

`withBorderRadius()` - Clips the widget with a `BorderRadius`.

Text("Hello").withBorderRadius(BorderRadius.circular(8));

`withDecoration()` - Adds a `BoxDecoration` to the widget.

Text("Hello").withDecoration(BoxDecoration(color: Colors.blue));

`visible()` - Conditionally makes a widget visible or hidden.

Text("This is visible").visible(true);

`sizedBox()` - Wraps widget in a `SizedBox` with fixed size.

Text("Hello").sizedBox(width: 100, height: 50);

`withTooltip()` - Adds a tooltip to the widget.

Icon(Icons.info).withTooltip("Info Icon");

`asColumn()` - Converts widget into a `Column`.

Text("This is a single column").asColumn();

`withAnimatedOpacity()` - Wraps widget with `AnimatedOpacity`.

Text("Fade In").withAnimatedOpacity(opacity: 1.0, duration: Duration(seconds: 1), curve: Curves.easeIn);

`withBoxShadow()` - Adds a shadow effect to the widget.

Text("Hello").withBoxShadow(color: Colors.blue, blurRadius: 10);

`withShape()` - Clips the widget with a custom shape.

Container(color: Colors.red).withShape(RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)));

`scrollable()` - Makes the widget scrollable.

Column(children: [Text("Hello"), Text("World")]).scrollable();

15. Add Separator Between Items in Iterable

`separatedBy()` - Adds separator between items of the iterable.

final widgets = [Text('Item 1'), Text('Item 2'), Text('Item 3')];
final separator = Divider(color: Colors.black);
final separatedWidgets = widgets.separatedBy(separator);

`circular()` - Clips widget to a circular shape.

Image.network("https://example.com/image.jpg").circular(radius: 100);

`rounded()` - Clips widget to a rounded shape.

Image.network("https://example.com/image.jpg").rounded(borderRadius: 20);

`blur()` - Adds a blur effect with an optional border and background.

Text("Hello with blur effect").blur(
  blurRadius: 10,
  borderWidth: 4,
  borderColor: Colors.blue,
  backgroundColor: Colors.black,
  opacity: 0.4,
);

🪄 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:

Debug.bug("This is a bug message");   // Logs a bug message
Debug.info("This is an info message"); // Logs an informational message
Debug.warning("This is a warning message"); // Logs a warning message
Debug.error("This is an error message"); // Logs an error message
Debug.success("This is a success message"); // Logs a success message

Alternatively, for a more generic logging approach:

log('This is a log message');

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

📬 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. I am currently open to freelance and full-time opportunities. Feel free to contact me for inquiries, collaborations, or job offers.

If you find Flutter Addons valuable, please consider giving the repository a ⭐️ to show your support!

Features

🚀 Key Features

📦 Getting Started

⚙️ Initialize

ResponsiveExtension

Example Usage

Breakpoints

Notes

🎨 Soul Theme Engine

🌟 Key Features

Getting Started

Extending Kolors

Extending Typography

🎨 Apply Theme

TextStyle Extensions Usage

1. Applying Text Styles on num

2. Using Predefined TextTheme Styles from BuildContext

Spacing Extension Usage

Margin

m - Margin on all sides

mt - Margin on the top

mb - Margin on the bottom

ml - Margin on the left

mr - Margin on the right

mx - Horizontal margin (left and right)

my - Vertical margin (top and bottom)

Padding

p - Padding on all sides

pt - Padding on the top

pb - Padding on the bottom

pl - Padding on the left

pr - Padding on the right

px - Horizontal padding (left and right)

py - Vertical padding (top and bottom)

SizedBox

s - SizedBox with both height and width

Async Functions

1. Safe Future Execution

2. Retry Async Calls on Failure

3. Set a Timeout for an Async Task

4. Collect Stream Data as List

5. Map Async Streams

6. Delay Stream Emissions

7. Process Data in Batches

8. Await Multiple Futures Safely

Date Time Extension Usage

Accessing Dates

Formatting Dates

Adding/Subtracting Days

Checking Days

Getting Time Ago

Greeting Based on Time

Week, Month, and Year Operations

Leap Year and Days in Month

Day Names

Currency Conversion

Navigation Extension Usage

Animation

Navigate using Context

to(Widget page)

toNamed(String name)

back()

toReplace(Widget page)

go(BuildContext context)

Animated Widget Extensions

Example Usage

Available Animations

Widget Extension Usage

1. Center the Widget

center() - Wraps a widget in a Center widget.

2. Add Padding to Widget

withPadding() - Adds padding to the widget.

3. Add Margin to Widget

withMargin() - Adds margin to the widget.

4. Apply onTap Gesture to Widget

onTap() - Adds a GestureDetector with an onTap function.

5. Apply Border Radius to Widget

withBorderRadius() - Clips the widget with a BorderRadius.

6. Apply Decoration to Widget

withDecoration() - Adds a BoxDecoration to the widget.

Extending `Kolors`

Extending `Typography`

1. Applying Text Styles on `num`

2. Using Predefined `TextTheme` Styles from `BuildContext`

`m` - Margin on all sides

`mt` - Margin on the top

`mb` - Margin on the bottom

`ml` - Margin on the left

`mr` - Margin on the right

`mx` - Horizontal margin (left and right)

`my` - Vertical margin (top and bottom)

`p` - Padding on all sides

`pt` - Padding on the top

`pb` - Padding on the bottom

`pl` - Padding on the left

`pr` - Padding on the right

`px` - Horizontal padding (left and right)

`py` - Vertical padding (top and bottom)

`s` - SizedBox with both height and width

Navigate using `Context`

`to(Widget page)`

`toNamed(String name)`

`back()`

`toReplace(Widget page)`

`go(BuildContext context)`

`center()` - Wraps a widget in a `Center` widget.

`withPadding()` - Adds padding to the widget.

`withMargin()` - Adds margin to the widget.

`onTap()` - Adds a `GestureDetector` with an `onTap` function.

`withBorderRadius()` - Clips the widget with a `BorderRadius`.

`withDecoration()` - Adds a `BoxDecoration` to the widget.

`visible()` - Conditionally makes a widget visible or hidden.

`sizedBox()` - Wraps widget in a `SizedBox` with fixed size.

`withTooltip()` - Adds a tooltip to the widget.

`asColumn()` - Converts widget into a `Column`.

`withAnimatedOpacity()` - Wraps widget with `AnimatedOpacity`.

`withBoxShadow()` - Adds a shadow effect to the widget.

`withShape()` - Clips the widget with a custom shape.

`scrollable()` - Makes the widget scrollable.

`separatedBy()` - Adds separator between items of the iterable.

`circular()` - Clips widget to a circular shape.

`rounded()` - Clips widget to a rounded shape.

`blur()` - Adds a blur effect with an optional border and background.