awesome_extensions

Description:

awesome extensions

Awesome Extensions #





Let get started 💪 #

Go to pubspec.yaml
add a awesome_extensions and replace [version] with the latest version:

dependencies:
awesome_extensions: ^[version]
copied to clipboard

click the packages get button or flutter pub get

See awesome_extensions for docs & samples #

Awesome Extensions

Let get started 💪
See awesome_extensions for docs & samples
About
Theme Extensions

TextStyle
Text
Theme


Media Query Extensions For Responsive Layout
Navigation Extensions
Widget Extensions

SizeBox
Padding
Opacity
Expanded
Flexible
Shimmer Effect
Nil Widget
SliverToBoxAdapter
Other


Date Extensions
Number Extensions

Future & Duration


String Extensions
Async Extensions
Color Extensions

Darken
Lighten


Url Strategy
Avatar Image
Support
❤️❤️❤️



About #
An extension to the widget helps reduce the boilerplate and adds some helpful methods. and you can make a responsive design.
Theme Extensions #
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.labelSmall),
// OR
Text('Hello World',style: context.displaySmall),
// If you want to bold text then
Text('Hello World',style: context.labelSmall?.bold),
copied to clipboard
FontWeight extensions that apply font weights on TextStyle:

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

Similar 2021 TextStyle are:

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

Text
If you dont want use theme, then we have some other methods:
Text('Hello World')
.bold()
.fontSize(25)
.italic();
copied to clipboard
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

Theme
From the Theme class. Access your themes right in the context instance.

context.theme
context.textTheme
context.primaryTextTheme
context.bottomAppBarTheme
context.bottomSheetTheme
context.appBarTheme
context.backgroundColor
context.primaryColor
context.primaryColorLight
context.primaryColorDark
context.focusColor
context.hoverColor
context.dividerColor
context.scaffoldBackgroundColor

Media Query Extensions For Responsive Layout #
From the MediaQuery Access properties right in the context instance.
// Before
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.width,
)
// After
Container(
width: context.width,
height: context.width,
)
copied to clipboard
Similar extensions are:

context.height /// Height of the Screen,
context.width // Width of Screen
context.mediaQuerySize
context.orientation
context.mediaQueryPadding
context.alwaysUse24HourFormat
context.devicePixelRatio
context.platformBrightness
context.textScaleFactor
context.isLandscape
context.isPortrait
context.mediaQueryViewPadding
context.mediaQueryViewInsets
context.mediaQueryShortestSide
context.showNavbar // True if width be larger than 800
context.isPhone // True if the shortestSide is smaller than 600p
context.isTablet // True if the current device is Tablet
context.isSmallTablet // True if the shortestSide is largest than 600p
context.isLargeTablet // True if the shortestSide is largest than 720p

MediaQuery as Inherited Model
Old Way X
MediaQuery.of(context).size;
MediaQuery.of(context).padding; MediaQuery.of (context). orientation;
By calling MediaQuery.of(context).size, the widget will rebuild when any of the MediaQuery properties change (less performant).
New Way ✓
MediaQuery.sizeof(context);
MediaQuery.paddingOf(context); MediaQuery.orientation of (context);
By calling MediaQuery.sizeof(context), the widget will rebuild only when the size changes, avoiding unnecessary rebuilds.

context.mqSize // The same of MediaQuery.sizeOf(context)
context.mqHeight // The same of MediaQuery.sizeOf(context).height
context.mqWidth
context.mqPadding // similar to [MediaQuery.paddingOf(context)]
context.mqViewPadding
context.mqViewInsets
context.mqOrientation
context.mqAlwaysUse24HourFormat
context.mqDevicePixelRatio
context.mqPlatformBrightness
context.mqTextScaleFactor

//Check in what platform the app is running
MyPlatform.isAndroid
MyPlatform.isIOS
MyPlatform.isMacOS
MyPlatform.isWindows
MyPlatform.isLinux
MyPlatform.isFuchsia

//Check the device type
MyPlatform.isMobile
MyPlatform.isDesktop
//All platforms are supported independently in web!
//You can tell if you are running inside a browser
//on Windows, iOS, OSX, Android, etc.
MyPlatform.isWeb


// Returns a value<T> according to the screen size
// can give value for:
// mobile: if the shortestSide is smaller than 600
// tablet: if the shortestSide is smaller than 1200
// desktop: if width is largest than 1200
context.responsiveValue<T>(
T? mobile,
T? tablet,
T? desktop,
),

// Example
Container(
child: context.responsiveValue(
mobile: Container(
color: Colors.yellow,
width: context.width,
height: context.height,
),
tablet: Container(
color: Colors.green,
width: context.width,
height: context.height,
),
desktop: Container(
color: Colors.black,
width: context.width,
height: context.height,
)),
)
copied to clipboard
Navigation Extensions #
From the Navigator Access properties right in the context instance.
// Before
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondScreen()),
);

// After

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

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

// for replace
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);

context.routeSettings;
context.routeName;
context.routeArguments;
copied to clipboard
Widget Extensions #
This extension is reduced more code.
SizeBox
// Before
SizedBox(
height : 20.0
)
// After
// make space of 20.0 height
20.0.heightBox

// for width
20.0.widthBox
copied to clipboard
Padding
// Before
Padding(
padding: const EdgeInsets.all(8.0),
child: Text("text"),
);

// After
Text("text").paddingAll(8.0),
copied to clipboard
Similar padding extensions are:

paddingAll Creates insets from offsets from all side.
paddingOnly Creates insets with only the given values non-zero.
paddingLTRB Creates insets from offsets from the left, top, right, and bottom.
paddingSymmetric Creates insets with symmetrical vertical and horizontal offsets.
paddingFromWindowPadding Creates insets that match the given window padding.

Opacity #
// Before
Opacity(
opacity: 0.5,
child: Text("text"),
)

// After
Text("text").setOpacity(0.5)
copied to clipboard
Expanded #
/// Before
Expanded(
child: Text("text"),
)

// After
Text("text").expanded()
copied to clipboard
Flexible #
/// Before
Flexible(
child: Text("text"),
)

// After
Text("text").flexible()
copied to clipboard
Shimmer Effect

Container(height: 50,width: 50,).applyShimmer();
copied to clipboard
you can also change color of shimmer using Color baseColor, Color highlightColor.
Nil Widget
Sometimes, according to a condition, we want to display nothing. Usually when we can't return null, we would return something like const SizedBox() for example.
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 which 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()).
// Good
text != null ? Text(text) : const Container()
// Better
text != null ? Text(text) : const SizedBox()
// BEST
text != null ? Text(text) : nil
or
if (text != null) Text(text)
copied to clipboard
SliverToBoxAdapter #
Text(text).sliver;
// is same as
SliverToBoxAdapter(
child: Text(text),
);
copied to clipboard
Other
Now we can just add round corners, shadows, align, and added gestures to our Widgets.
Container(
height: 100,
width: 100,)
.withRoundCorners(backgroundColor: Colors.grey)
.withShadow()
.alignAtCenter()
.toCenter()
.withTooltip('My Tooltip')
.paddingOnly(left: 10)
.paddingAll(20)
.onTap(() => print('tap'))
.onLongPress(() => print('long press'))
copied to clipboard
Automatic detect platform and show material and cupertino dialog
context.showAlertDialog(title: 'title',
message: 'message',)
copied to clipboard
Date Extensions #
// for check two date are same or not
date.isSameDate(otherdate); // its return bool (true/false)

// for check date is today's date
date.isToday // its return bool (true/false)

// for check this date is yesterday's date
date.isYesterday // its return bool (true/false)
copied to clipboard
Number Extensions #
Future & Duration
Utility to delay some callback (or code execution).
print('+ wait for 2 seconds');
await 2.delay();
print('- 2 seconds completed');
print('+ callback in 1.2sec');
1.delay(() => print('- 1.2sec callback called'));
copied to clipboard
Easy way to make Durations from numbers.
print(1.seconds + 200.milliseconds);
print(1.hours + 30.minutes);
print(1.5.hours);

5.isLowerThan(4);
5.isGreaterThan(4);
5.isEqual(4);
copied to clipboard
String Extensions #
//your name => Your Name,
'your name'.capitalize();
//your name => Your name,
'your name'.capitalizeFirst();
//your name => yourname
'your name'.removeAllWhitespace();

// match any RegExp
'dsts'.hasMatch("'r'[A-Z]");
//return bool if match RegExp
'123'.isNumericOnly();
'dsf'.isAlphabetOnly();
'Ajh'.hasCapitalletter();
'true'.isBool();
copied to clipboard
Async Extensions #
An extention to help dealing with all the possible states of an AsyncSnapshot in a StreamBuilder / FutureBuilder.
Reduces boilerplate code signifigantly by moving each possible state into it's own function.
StreamBuilder(
stream: incomingMessagesStream,
builder: (context, snapshot) {
snapshot.when(
data: (data, isComplete) {
return Column(
children: [
Text('Latest Message: $data'),
if (isComplete) Text('No More Message'),
]
);
},
error: (error, stackTrace) {
return Text('We have an error');
},
loading: () {
return CircularProgressIndicator();
},
);
},
);
copied to clipboard
also you can use maybeWhen, Similar to [when], but allows [data] callback to be optional.
Color Extensions #
Darken
The darken method darkens the color by a specified percentage. The percentage should be between 0 and 100. By default, the color is darkened by 10%.
Color darkRed = Colors.red.darken(20); // Darkens the red color by 20%
copied to clipboard
Lighten
The lighten method lightens the color by a specified percentage. The percentage should be between 0 and 100. By default, the color is lightened by 10%.
Color lightRed = Colors.red.lighten(20); // Lightens the red color by 20%
copied to clipboard
Also Added Some Extra color extensions like: string hax to color, brightness, and change specific RGB color value.
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());
}
copied to clipboard
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,
),
copied to clipboard





Properties
Description




child
type of [Widget], which can have text , icon etc


backgroundColor
Color to fill the background of avatar


foregroundColor
Color to change the textColor inside the avatar


radius
size of the avatar


minRadius
minimum size of the avatar


maxRadius
maximun size of the avatar


size
size of the avatar i.e ImageSize.large, ImageSize.medium, ImageSize.small


shape
shape of the avatar i.e, AvatarImageShape.standard, AvatarImageShape.circle, AvatarImageShape.square


borderRadius
extra radius to avatar shapes, not applicable to circular avatar



Support #
You liked this package? then give it a star. If you want to help then:

Start this repository
Send a Pull Request with new features
Share this package
Create issues if you find a Bug or want to suggest something

❤️❤️❤️ #
Supported by JetBrains Open Source