black_hole_flutter 1.2.0 copy "black_hole_flutter: ^1.2.0" to clipboard
black_hole_flutter: ^1.2.0 copied to clipboard

A package absorbing all Flutter utility functions, including extension functions and commonly used widgets

πŸ›  A package absorbing all Flutter utility functions, including extension functions and commonly used widgets.

πŸ“„ Bottom Sheet #

Show modal bottom sheets using: context.showModalBottomSheet().

FancyBottomSheet demo

Also, this package adds a custom FancyBottomSheet with a drag indicator at the top. You can create one using context.showFancyModalBottomSheet().

πŸ— BuildContext #

In Flutter, you often see the pattern <Class>.of(context) (e.g., Theme.of(context)). This package adds extension getters on BuildContext for those classes so you can just say:

Extension Shortcut for
context.colorScheme ColorScheme.of(context)
context.defaultTextStyle DefaultTextStyle.of(context)
context.directionality Directionality.of(context)
context.form Form.of(context)
context.locale Localizations.localeOf(context)
context.materialLocalizations MaterialLocalizations.of(context)
context.mediaQuery MediaQuery.of(context)
context.overlay Overlay.of(context)
context.pageStorage PageStorage.of(context)
context.scaffold Scaffold.of(context)
context.scaffoldOrNull Scaffold.of(context, nullOk: true)
context.textTheme TextTheme.of(context)
context.theme Theme.of(context)

🎨 Colors #

Handy extensions on Brightness:

Extension Explanation
brightness.isDark ≙ brightness == Brightness.dark
brightness.isLight ≙ brightness == Brightness.light
brightness.opposite opposite Brightness
brightness.color Color representing this brightness, i.e.:
Β· Colors.white for Brightness.light
Β· Colors.black for Brightness.dark
brightness.contrastColor opposite of brightness.color (above)

isDark, isLight, and contrastColor can also be used on ThemeData directly.

Handy extensions on Color:

Extension Explanation
color.estimatedBrightness estimated Brightness based on color's luminance
color.isOpaque if opacity is 1.0
color.alphaBlendOn(Color background) resulting Color when drawing color on top of background
color.withAdditionalOpacity(double opacity) applies opacity by multiplying it to the existing opacity
color.withAdditionalAlpha(int alpha) like above, but with an integer alpha
color.hsl ≙ HSLColor.fromColor(color)
color.hsv ≙ HSVColor.fromColor(color)

And if you can't decide on a color, just use random.nextColor(), random.nextColorHsl() or random.nextColorHsv()!

Convert between alpha and opacity with int.alphaToOpacity and double.opacityToAlpha.

🌈 Material Design colors #

Material Design specifies different opacities of white and black colors to use for text of different emphases on colored backgrounds. You can now use the highEmphasisOnColor, mediumEmphasisOnColor and disabledOnColor extension getters on Color to make your text legible! The raw opacity values are also available as MaterialColors.highEmphasisTextAlpha, MaterialColors.mediumEmphasisTextAlpha, and MaterialColors.disabledTextAlpha.

🧭 Navigation #

Access your navigation-related information via extension methods:

Extension Shortcut for
context.navigator Navigator.of(context)
context.rootNavigator Navigator.of(this, rootNavigator: true)
context.modalRoute ModalRoute.of(context)

Push a new route and pop all previous routes (e.g., when signing out the user):

navigator.pushAndRemoveAll(/* new route */);
// Or using a named route:
navigator.pushNamedAndRemoveAll(/* route name */);

Log navigation events to the console:

MaterialApp(
  navigatorObservers: [LoggingNavigatorObserver()],
  // ...
)
// Prints:
// Navigator: didPush /dashboard β†’ /articles/12345
// Navigator: didPop /dashboard ← /articles/12345

Note: This uses the name of routes, so it only works with named routes.

πŸ“± Widgets #

πŸ”³ Buttons #

Did you ever want to show a progress indicator inside a button? Or were annoyed to conditionally set a Button's onPressed to disable it? Fear no more — black_hole_flutter has got you covered!

Button demo

This screenshot only shows an excerpt of all available button types and variants.

In FancyFab (a FloatingActionButton), FancyTextButton, FancyOutlinedButton, FancyElevatedButton, FancyFilledButton, and FancyIconButton, we introduce some new parameters:

πŸ₯™ FillOrWrap #

FillOrWrap demo

A layout with two different behaviors:

  • By default, all children are positioned next to each other with equal widths. This is comparable to a Row with all children wrapped in Expanded.
  • If the children are too wide to fit in a single line, or one child would become smaller than its reported minimum width, the children get positioned below each other ("wrapped"). This is similar to a Column with MainAxisSize.min.

🎯 LeftCenterRight #

A layout taking optional left, center, and right children. It will try to keep center in the center of itself, even if only one of left and right is set, or they have different widths.

🟒 Circle #

A circle with optional diameter, background color, padding, and child.

πŸ–Ό RenderObject #

When writing a custom layout, you might find this extension on ContainerRenderObjectMixin useful:

Extension Explanation
containerRenderObjectMixin.children Returns all children using firstChild and childAfter

↕ Size #

Extension Explanation
size.diagonal length of the diagonal of a rectangle with this Size
size.squaredDiagonal ≙ size.diagonal * size.diagonal
size.coerceAtLeast(Size minimum) Ensures size is not smaller than minimum in any axis
size.coerceAtMost(Size maximum) Ensures size is not larger than minimum in any axis
69
likes
160
points
3.92k
downloads
screenshot

Publisher

verified publisherwanke.dev

Weekly Downloads

A package absorbing all Flutter utility functions, including extension functions and commonly used widgets

Repository (GitHub)
View/report issues

Documentation

API reference

License

Apache-2.0 (license)

Dependencies

collection, flutter, meta

More

Packages that depend on black_hole_flutter