πŸ›  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:

ExtensionShortcut for
context.defaultTextStyleDefaultTextStyle.of(context)
context.directionalityDirectionality.of(context)
context.formForm.of(context)
context.localeLocalizations.localeOf(context)
context.materialLocalizationsMaterialLocalizations.of(context)
context.mediaQueryMediaQuery.of(context)
context.overlayOverlay.of(context)
context.pageStoragePageStorage.of(context)
context.scaffoldScaffold.of(context)
context.scaffoldOrNullScaffold.of(context, nullOk: true)
context.textThemeTheme.of(context).textTheme
context.themeTheme.of(context)

🎨 Colors

Handy extensions on Brightness:

ExtensionExplanation
brightness.isDark≙ brightness == Brightness.dark
brightness.isLight≙ brightness == Brightness.light
brightness.oppositeopposite Brightness
brightness.colorColor representing this brightness, i.e.:
Β· Colors.white for Brightness.light
Β· Colors.black for Brightness.dark
brightness.contrastColoropposite of brightness.color (above)

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

Handy extensions on Color:

ExtensionExplanation
color.estimatedBrightnessestimated Brightness based on color's luminance
color.isOpaqueif 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 & 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!

There are also getters on ThemeData for contrast colors on the primary, accent, background, and error colors.

🧭 Navigation

Access your navigation-related information via extension methods:

ExtensionShortcut for
context.navigatorNavigator.of(context)
context.rootNavigatorNavigator.of(this, rootNavigator: true)
context.modalRouteModalRoute.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. If you want to handle all your routing declaratively with proper deep links, check out my package 🧭 flutter_deep_linking :)

πŸ“± 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

In FancyFab (a FloatingActionButton), FancyFlatButton, FancyOutlineButton & FancyRaisedButton, we introduce some new parameters:

πŸ₯” ChipGroup

ChipGroup demo

Wraps multiple chips and can optionally show a title above these.

πŸ₯™ 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.

↔ SeparatedButtons

SeparatedButtons demo

A container wrapping multiple buttons with an interpunct (Β·) between each one. It's recommended to use FlatButtons as children.

πŸ“š TitleAndSubtitle

Did you ever want to show a subtitle (in addition to a main title) in your AppBar? Use TitleAndSubtitle (very creative name, I know):

AppBar(
  title: TitleAndSubtitle(
    title: Text('My title'),
    subtitle: Text('My optional subtitle'),
  ),
)

πŸ–Ό RenderObject

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

ExtensionExplanation
containerRenderObjectMixin.childrenReturns all children using firstChild and childAfter

↕ Size

ExtensionExplanation
size.diagonallength 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

Libraries

black_hole_flutter