Awesome Flutter Extensions

Awesome flutter extensions to remove boilerplate

Installation

1. Install using the Terminal:

flutter pub add awesome_flutter_extensions

2. Install adding the dependency in the pubspec.yaml:

dependencies:
  awesome_flutter_extensions: ^1.0.0 # Use the latest version from pub.dev

3. Install using Pubspec Assist (VSCode extensions):

Open the command palette:

• (⇧ ⌘ P) on Mac
• (Ctrl ⇧ P) on Windows

Then type Pubspec assist.. until you'll get Pubspec Assist: Add/Update dependencies.

Here type the name of the package: awesome_flutter_extensions and press ENTER ↵.

Get Started

First of all, let's import the extensions with:

import 'package:awesome_flutter_extensions/awesome_flutter_extensions.dart';

Usage

There are many extensions in this library. So I decided to break them up into groups. The groups currently available are:

• sizes
• textStyles
• colors
• themes
• platform
• string
• navigator
• miscellaneous

Why this split? After creating extensions upon extensions, I admit that with context you could access an infinite number of things. That's why I decided to split them up.

Sizes

To get the width of the screen, use:

// before
MediaQuery.sizeOf(context).width
// after
context.sizes.width;

All the extensions available are:

• width
• maybeWidth
• height
• maybeHeight
• padding
• maybePadding
• viewInsets
• maybeViewInsets
• systemGestureInsets
• maybeSystemGestureInsets
• viewPadding
• maybeViewPadding
• devicePixelRatio
• maybeDevicePixelRatio
• textScaler
• maybeTextScaler

You can also add padding easily

// before
Padding(padding: EdgeInsets.symmetric(horizontal: 16))
// now
Padding(padding: 16.paddingHorizontal())

All the edge insets available are:

• paddingAll
• paddingHorizontal
• paddingVertical
• paddingTop
• paddingLeft
• paddingRight
• paddingBottom

TextStyles

To get the titleLarge text style use:

// before
Theme.of(context).textTheme.titleLarge!
// after
context.textStyles.titleLarge

All the extensions available are:

• displayLarge
• displayMedium
• displaySmall
• headlineLarge
• headlineMedium
• headlineSmall
• titleLarge
• titleMedium
• titleSmall
• bodyLarge
• bodyMedium
• bodySmall
• labelLarge
• labelMedium
• labelSmall

You can also change the font weight directly using:

context.textStyles.titleLarge.semiBold

All the font weights available are:

• thick
• extraBold
• bold
• semiBold
• medium
• regular
• light
• extraLight
• thin

You can also change the font style directly using:

context.textStyles.titleLarge.italic

All the font weights available are:

• normal
• italic

Colors

To get the primaryColor from the theme use:

// before
Theme.of(context).primaryColor
// after
context.colors.primary

You can also get the colorScheme colors using:

// before
Theme.of(context).colorScheme
// after
context.colors.scheme

All the extensions available are:

• primary
• primaryLight
• primaryDark
• canvas
• scaffoldBackground
• card
• divider
• focus
• hover
• highlight
• splash
• unselectedWidget
• disabled
• secondaryHeader
• dialogBackground
• indicator
• hint
• shadow
• scheme

Themes

To get the appBarTheme, use:

// before
Theme.of(context).appBarTheme
// after
context.themes.appBar;

All the extensions available are:

• button
• toggleButtons
• text
• primaryText
• inputDecoration
• icon
• primaryIcon
• slider
• tabBar
• tooltip
• card
• chip
• appBar
• scrollbar
• bottomAppBar
• dialog
• floatingActionButton
• navigationRail
• cupertinoOverride
• snackBar
• bottomSheet
• popupMenu
• banner
• divider
• buttonBar
• bottomNavigationBar
• timePicker
• textButton
• elevatedButton
• outlinedButton
• textSelection
• dataTable
• checkbox
• radio
• switchTheme
• badge
• drawer
• dropdownMenu
• expansionTile
• extensions
• filledButton
• iconButton
• listTile
• menu
• menuBar
• menuButton
• navigationBar
• navigationDrawer
• pageTransitions
• progressIndicator
• segmentedButton

Platform

To detect in which platform the app is running:

final isMacOS = context.platform.isMacOS

All the parameters available are:

• isAndroid
• isWeb
• isMacOS
• isWindows
• isFuchsia
• isIOS
• isLinux

To detect the target platform (e.g. the app is running on Web but from an iOS device):

final isIOS = context.targetPlatform.isIOS;

• isAndroid
• isFuchsia
• isIOS
• isLinux
• isMacOS
• isWindows

String

Various extension on String, for example:

Capitalize each word

final s = 'hello world';
print(s.capitalize()); // Hello World

Capitalize first word

final s = 'hello world';
print(s.capitalizeFirst()); // Hello world

Mock word

Use it when you need to change the string later or you need to remember to translate it.

final s = 'hello world';
print(s.mock); // hello world 🧨

isNum

final s = '2.0';
print(s.isNum()); // true

final s2 = 'hi';
print(s2.isNum()); // false

All the extensions available are:

• capitalize
• capitalizeFirst
• mock
• isBool(caseSensitive = true)
• toBool(caseSensitive = true)
• isNum
• toNum
• isDouble
• toDouble
• inInt
• toInt
• removeAllWhitespace
• hasMatch

Miscellaneous

Additional extensions.

Log object

// before
import 'dart:developer' as devtools show log;
devtools.log(MyClass.toString());
// now
MyClass.log();

Separated Column or Row

Do you want to separate your Column or Row with the same widget like ListView.separated? Use separatedBy:

// before
Column(
    children: [
        FirstWidget(),
        SizedBox(height: 8),
        SecondWidget()
        SizedBox(height: 8),
        ThirdWidget(),
    ],
),
// now
Column(
    children: [
        FirstWidget(),
        SecondWidget()
        ThirdWidget(),
    ].separatedBy(SizedBox(height: 8)),
),

Convert number to Duration

// before
final twoDays = Duration(days: 2);
// now
final twoDays = 2.days;

All available extensions are:

• microseconds
• milliseconds
• seconds
• minutes
• hours
• days
• months
• quarters
• quadrimesters
• years

Future delayed

// before
await Future.delayed(Duration(seconds: 5));
// now
await 5.seconds.future();

Navigator

To push a page you can use:

// before
Navigator.of(context).push(
    MaterialPageRoute(
    builder: (context) => const SecondPage(),
  ),
);
// after
context.navigator.push(
    MaterialPageRoute(
    builder: (context) => const SecondPage(),
  ),
);
// or even shorter
context.navigator.pushMaterial(const SecondPage()),

All the extensions available are:

• canPop

• maybePop

• pop

• popUntil

• push

• pushMaterial

• pushCupertino

• popAndPushNamed

• pushAndRemoveUntil

• pushNamed

• pushNamedAndRemoveUntil

• pushReplacement

• pushReplacementMaterial

• pushReplacementCupertino

• pushReplacementNamed

• removeRoute

• removeRouteBelow

• replace

• replaceRouteBelow

• Contributing

Contributions are welcomed!

Here is a curated list of how you can help:

• Report bugs
• Report parts of the documentation that are unclear
• Update the documentation / add examples
• Implement new features by making a pull-request

---

If you enjoyed the library, like it.

• My Twitter Profile
• GitHub repo