Awesome Flutter Extensions

Awesome flutter extensions to remove boilerplate

Installation

  1. Install using the Terminal:
flutter pub add awesome_flutter_extensions
  1. Install adding the dependency in the pubspec.yaml:
dependencies:
  awesome_flutter_extensions: ^1.0.0 # Use the latest version from pub.dev
  1. 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:

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();

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.

Libraries

awesome_flutter_extensions
Export the library