extensions_kit 0.0.4

extensions_kit: ^0.0.4 copied to clipboard

An essential and powerful library of dart extensions to remove the boilerplate and speed up the development process.

Installation #

1. Go to pubspec.yaml
2. Add extensions_kit and replace [version] with the latest version:

dependencies:
 extensions_kit: ^[version]

3. Click on get packages button or run flutter pub get
4. Import

import 'package:extensions_kit/extensions_kit.dart';

Available Extensions & Methods 🔥

• String Extensions
• Media Query Extensions
• Theme Extensions
• Date Extensions
• Navigation Extensions
• Number Extensions
• Widget Extensions
• Url Strategy
• Avatar Image
• Text Style Extensions
• Support
• Acknowledgments
• Bugs or Requests

String Extensions #

// Validate an email
"example@mail.com".isEmail; // true

// Capitalizes each word in the string
"hello world".capitalize; // Hello World

// Capitalizes the first word in the string
"hello world".capitalizeFirst; // Hello world

// Mocks a string that needs to be translated or changed later
"Hello world".mock; //Hello world 🧨

// Check if a string is boolean
// If `caseSensitive` is `true`, which is the default,
//The only accepted inputs are the strings `"true"` and `"false"`,
"true".isBool(); // true
"TRUE".isBool(); // false 
"TRUE".isBool(caseSensitive: false); // true 

// Convert a string into a boolean
// Throws error if the string is not a Boolean.
// If `caseSensitive` is `true`, which is the default,
//The only accepted inputs are the strings `"true"` and `"false"`,
"true".toBool(); // true
"TRUE".toBool(); // throws error 
"TRUE".toBool(caseSensitive: false); // true

// Check if the string is a number
"123".isNum; // true
"12fh".isNum; // false

// Convert a string into a number
"123".toNum; // 123

// Check if a string is a double number
"123.45".isDouble; // true

// Convert a string into a double
"123.12".toDouble; // 123.12

// Check if a string is an integer
"123".isInt; // true

// Convert a string into an integer
"123".toInt; // 123


// Remove all the whitespace from the string
"This is a test string".removeAllWhitespace; // Thisisateststring

// Check if the String matches the Regular expression
"username_10".hasMatch("r'[abcdefghijklmnopqrstuvwxyz1234567890._]"); // true

Media Query Extensions #

From the MediaQuery Access properties right in the context instance.

// Before
 Container(
     width: MediaQuery.of(context).size.width,
     height: MediaQuery.of(context).size.height,
        ),

// Now
Container(
     width: context.w(), // 100% of screen width
     height: context.h(), // 100% of screen height
        ),
Container(
     width: context.w(w: 50), // 50% of screen width
     height: context.h(h: 40.5), // 40.5% of screen height
        ),

Theme Extensions #

// Returns boolean 
context.isDarkMode; // true/false
context.isLightMode; // true/false

Date Extensions #

// Get Date only
DateTime(2023,12,16,11,40,00,0,0).dateOnly; // DateTime(2023,12,16) *time set to midnight

// Check if [DateTime] is on the same day as today
DateTime.now().isToday; // true

// Check if [DateTime] was on the same day as yesterday
DateTime.now().isYesterday; // false

// Check if [DateTime] will be on the same day as tomorrow
DateTime.now().isTomorrow; // false

// Add a certain number of DAYS to [DateTime] 
DateTime(2023,12,16).addDays(5); // DateTime(2023,12,21)

// Add a certain number of HOURS to [DateTime]
DateTime(2023,12,16,11,50,0).addHours(10); // DateTime(2023,12,16,21,50,0)

/// The day After this [DateTime]
DateTime(2017, 3, 5).nextDay; // return DateTime(2017, 3, 6)

/// The day previous this [DateTime]
DateTime(2017, 3, 5).previousDay; // return DateTime(2017, 3, 4)

// First day of the month
DateTime(2018, 9, 30).firstDayOfMonth; // returns DateTime(2018, 9, 1)

// Last day of the month
DateTime(2017, 3).lastDayOfMonth; // DateTime(2017, 3, 31)

// All days in a month, [DateTime] Array
DateTime(2017, 3).daysInMonth; // [DateTime(2017, 3, 1), DateTime(2017, 3, 2), ...]

// Whether or not two times are on the same day.
DateTime.now().isSameDay(DateTime.now()); // returns true

// Whether or not two times are on the same week.
DateTime(2017, 3, 5).isSameWeek(DateTime(2017, 3, 6));

Navigation Extensions #

From the Navigator Access properties right in the context instance.

// Before
Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => SecondScreen()),
  );

// Now

// for push
context.push(SecondScreen());
context.pushNamed('/home');

// For back, you can also add back result data
context.pop();

// for push replacement
context.pushReplacement(SecondScreen());
context.pushReplacementNamed('/home');

// popUntil
context.popUntil('/login');

// with rootNavigator
context.push(SecondScreen(), rootNavigator: true);
context.pushReplacement(SecondScreen(), rootNavigator: true);
context.popUntil('/login', rootNavigator: true);

Number Extensions #

// Get number into its English ordinal representation
1.ordinal; // 1st
3.ordinal/ // 3rd
234.ordinal; // 234th

// Get a string with comma separator like `1,233,15` if the String is '123315'
1234.currency; // 1,234
142343.currency; // 142,343

// You can also specify your pattern
142343.currencyWithPattern("#,##,###"); // 1,42,343

// Check if the number is between the given numbers
45.between(40,60); // true
23.between(10,20); // false

// Check if the number is outside the given numbers
60.outside(40,65); // false
23.outside(10,20); // true

An easy way to specify a border radius

// Before
Container(
   height: 100,
   width: 100,
   decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(25),
   ),
)

// Now
Container(
   height: 100,
   width: 100,
   decoration: BoxDecoration(
      borderRadius: 25.circular(),
   ),
)

An easy way to specify padding to a Padding widget

// Before
Padding(
   padding: EdgetInsets.all(15),
   child: Text("Text"),
)

// Now
Padding(
   padding: 15.padAll(),
   child: Text("Text"),
)

Similar available padding extensions to numbers are:

• padAll() Creates insets from offsets from all sides.
• padHrz() Creates insets from offsets from horizontal sides.
• padVert() Creates insets from offsets from vertical sides.
• padTop() Creates insets from offsets from the top side.
• padBottom() Creates insets from offsets from the bottom side.
• padLeft() Creates insets from offsets from the left side.
• padRight() Creates insets from offsets from the right side.
• padOnly() Creates insets from offsets from the given sides only.

Widget Extensions #

These widget extensions will help you to reduce boilerplate code and increase your productivity

SizeBox

// Before
SizedBox(
    height : 20
   )

// Now
// makes space of 20 height
20.heightBox; 

// for width
20.widthBox

Padding

// Before
Padding(
  padding: const EdgeInsets.all(8.0),
  child: Text("text"),
);

// Now
Text("text").padAll(8.0),

Similar available padding extensions to widgets are:

• padAll() Creates insets from offsets from all sides.
• padHrz() Creates insets from offsets from horizontal sides.
• padVert() Creates insets from offsets from vertical sides.
• padTop() Creates insets from offsets from the top side.
• padBottom() Creates insets from offsets from the bottom side.
• padLeft() Creates insets from offsets from the left side.
• padRight() Creates insets from offsets from the right side.
• padOnly() Creates insets from offsets from the given sides only.

Alignment

// Before
Align(
  alignment: Alignment.centerLeft,
  child: Text("text"),
);

// Now
Text("text").leftAlign,

Similar available Alignment extensions are:

• center Aligns the widget to the center.
• leftAlign Aligns the widget to the center left.
• rightAlign Aligns the widget to the center right.
• topAlign Aligns the widget to the top center.
• topLeftAlign Aligns the widget to the top left.
• topRightAlign Aligns the widget to the top right.
• bottomAlign Aligns the widget to the bottom center.
• bottomLeftAlign Aligns the widget to the bottom left.
• bottomRightAlign Aligns the widget to the bottom right.

Flexible #

/// Before
Flexible(
  child: Text("text"),
)

// Now
Text("text").flexible

Similar available widget extensions are:

• unfocus Will [Unfocus] focused text field, It's better to use it on the main parent widget of the screen e.g. Scaffold
• tooltip() Will wrap the widget with a Tooltip widget
• flexible() Will wrap the widget with a Flexible widget
• expanded() Will wrap the widget with an Expanded widget
• withOpacity() Will wrap the widget with an Opacity widget
• onDoubleTap() Will wrap the widget with a GestureDetector and accept an onDoubleTap function
• onTap() Will wrap the widget with a GestureDetector and accept an onTap function
• onLongPress() Will wrap the widget with a GestureDetector and accept an onLongPress function
• positionTop() Will wrap the widget with a Positioned widget and accept top position
• positionBottom() Will wrap the widget with a Positioned widget and accept bottom position
• positionTB() Will wrap the widget with a Positioned widget and accept top & bottom position
• positionLT() Will wrap the widget with a Positioned widget and accept left & right position
• positionLRTB() Will wrap the widget with a Positioned widget and accept left,right,top & bottom position
• sizedBox(width,height) Will wrap the widget with a SizedBox of given height and width
• heightBox(height) Will wrap the widget with a SizedBox of a given height
• widthBox(height) Will wrap the widget with a SizedBox of a given width

Container Extensions

Now we can just add round corners, shadows, align, and add gestures to our Widgets.

Container(
      height: 100,
       width: 100,)
         .withRoundCorners(backgroundColor: Colors.grey)
         .withShadow()

Shimmer Effect

Container(height: 50,width: 50,).applyShimmer();

You can also change the color of the shimmer using baseColor & highlightColor.

Alert Dialog Box

Automatically detect Platform and show Material and Cupertino dialog

context.showAlertDialog(title: 'title', message: 'message',)

Nil Widget

Sometimes, according to a condition, we need to display nothing. Usually, when we can't return null, we would return something like const SizedBox().

This is good, but it has some performance impacts since SizedBox creates a RenderObject. The RenderObject lives in the render tree and some computations are performed on it, even if it paints nothing on the screen.

We can do better, we can have a widget that does not create a RenderObject while being still valid. The Nil widget is the minimal implementation for this use case. It only creates an Element and does nothing while it's building. Because the optimal way to use it, is to call const Nil(), it also comes with a nil constant that you can use everywhere (which is a const Nil()).

// Before
text != null ? Text(text) : const SizedBox()

// Now
text != null ? Text(text) : nil
or
text != null ? Text(text) : const Nil()

TextStyle

From the TextStyle Access properties right in the context instance.

// Before
Text('Hello World',style: Theme.of(context).textTheme.labelSmall),

Text('Hello World', style: TextStyle(color: Colors.grey, fontWeight: FontWeight.bold, fontSize: 40))

// After
Text('Hello World',style: context.textStyles.labelSmall),
// OR
Text('Hello World',style: context.textStyles.displaySmall),
// If you want to bold text then 
Text('Hello World',style: context.textStyles.labelSmall.bold),   

Similar fontWeights are:

• thick The most thick - FontWeight.w900
• extraBold Extra-bold - FontWeight.w800
• bold Bold - FontWeight.bold - FontWeight.w700
• semiBold Semi-bold - FontWeight.w600
• medium Medium - FontWeight.w500
• regular Regular - FontWeight.w400
• light Light - FontWeight.w300
• extraLight Extra-light - FontWeight.w200
• thin Thin, the least thick - FontWeight.w100

Similar TextStyles are:

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

Text

If you do not want use theme textsyles, then there are methods that you can use on a Text widget

Text('Hello World')
    .bold()
    .fontSize(25)
    .italic();

Similar methods are:

• textScale() TextScale
• bold() Bold Text
• italic() Italic Text
• fontWeight() Specific FontWeight
• fontSize() Specific FontSize
• letterSpacing() Specific LetterSpacing
• wordSpacing() Specific WordSpacing
• fontFamily() Specific FontFamily
• textShadow() Specific TextShadow
• textColor() TextColor
• textAlignment() Specific TextAlignment
• withUnderLine() TextUnderLine

Url Strategy #

With a simple call of setPathUrlStrategy, your Flutter web app does not have a leading # in the URL anymore 🚀

void main() {
// Here we set the URL strategy for our web app.
// It is safe to call this function when running on mobile or desktop as well.
setPathUrlStrategy();
runApp(MyApp());
}

Avatar Image #

AvatarImage(
   backgroundImage: NetworkImage(
    'https://mdbootstrap.com/img/Photos/Avatars/img%20%281%29.jpg'),
     shape: AvatarImageShape.standard,
     size: ImageSize.LARGE,
     child: Text('Lucky'),
          backgroundColor: Colors.red,
      ),

AvatarImage(
    shape: AvatarImageShape.circle,
    child: Text('JP'),
    backgroundColor: Colors.red,
      ),

Support #

If this package helped you please leave a like and share it with your friends.

Acknowledgments #

This package has a lot of extensions that are originally from another package awesome_extensions, do check it out too.

Bugs or Requests #

If you encounter any problems feel free to open an issue. If you feel the library is missing a feature, please raise a ticket. Pull requests are also welcomed.