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: ^0.0.1 # 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';

or

import 'package:awesome_flutter_extensions/all.dart';

To learn the differences between them, continue reading.

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.

Hey, but a library to avoid boilerplate and I have to write so much code? If you prefer to have all extensions available directly with the context, import this instead:

import 'package:awesome_flutter_extensions/all.dart';

To push a page you can use:

// before
Navigator.of(context).push<void>(
    MaterialPageRoute(
    builder: (context) => const SecondPage(),
  ),
);
// after
context.navigator.push<void>(
    MaterialPageRoute(
    builder: (context) => const SecondPage(),
  ),
);
// with the `all.dart` import
context.push<void>(
    MaterialPageRoute(
    builder: (context) => const SecondPage(),
  ),
);

All the extensions available are:

  • canPop
  • maybePop
  • pop
  • popUntil
  • push
  • popAndPushNamed
  • pushAndRemoveUntil
  • pushNamed
  • pushNamedAndRemoveUntil
  • pushReplacement
  • pushReplacementNamed
  • removeRoute
  • removeRouteBelow
  • replace
  • replaceRouteBelow

Sizes

To get the width of the screen, use:

// before
MediaQuery.of(context).size.width
// after
context.sizes.width;
// with the `all.dart` import
context.width

All the extensions available are:

  • width
  • height
  • padding
  • viewInsets
  • systemGestureInsets
  • viewPadding
  • devicePixelRatio
  • textScaleFactor

TextStyles

To get the headline1 text style use:

// before
Theme.of(context).textTheme.headline1!
// after
context.textStyles.h1
// with the `all.dart` import
context.h1

All the extensions available are:

  • h1
  • h2
  • h3
  • h4
  • h5
  • h6
  • bodyText1
  • bodyText2
  • caption
  • button
  • overline
  • subtitle1
  • subtitle2

You can also change the font weight directly using:

// normally
context.textStyles.h1.semiBold
// with the `all.dart` import
context.h1.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:

// normally
context.textStyles.h1.italic
// with the `all.dart` import
context.h1.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
// with the `all.dart` import
context.primaryColor

You can also get the colorScheme colors using:

// before
Theme.of(context).colorScheme
// after
context.colors.scheme
// with the `all.dart` import
context.colorScheme

All the extensions available are:

  • primary
  • primaryLight
  • primaryDark
  • accent
  • canvas
  • shadow
  • scaffoldBackground
  • bottomAppBar
  • card
  • divider
  • focus
  • hover
  • highlight
  • splash
  • selectedRow
  • unselectedWidget
  • disabled
  • button
  • secondaryHeader
  • background
  • dialogBackground
  • indicator
  • hint
  • error
  • toggleableActive
  • scheme

In the all.dart file the names have the Color word after them, except for scheme which becomes colorScheme.

Themes

To get the appBarTheme, use:

// before
Theme.of(context).appBarTheme
// after
context.themes.appBar;
// with the `all.dart` import
context.appBarTheme

All the extensions available are:

  • button
  • toggleButtons
  • text
  • primaryText
  • accentText
  • inputDecoration
  • icon
  • primaryIcon
  • accentIcon
  • slider
  • tabBar
  • tooltip
  • card
  • chip
  • appBar
  • scrollbar
  • bottomAppBar
  • dialog
  • floatingActionButton
  • navigationRail
  • snackBar
  • bottomSheet
  • popupMenu
  • banner
  • divider
  • buttonBar
  • bottomNavigationBar
  • timePicker
  • textButton
  • elevatedButton
  • outlinedButton
  • textSelection
  • dataTable
  • checkbox
  • radio
  • switchTheme
  • cupertinoOverride

In the all.dart file the names have the Theme word after them, except for switchTheme that is equal.

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

all
awesome_flutter_extensions