gradient_like_css

Description:

gradient like css

gradient_like_css #
The gradient_like_css package for Flutter allows you to experience CSS-like gradients in your Flutter app.

Installing #
1. Depend on it #
Add this to your package's pubspec.yaml file:
dependencies:
gradient_like_css: ^1.0.0
copied to clipboard
2. Install it #
You can install packages from the command line:
with Flutter:
$ flutter pub get
copied to clipboard
3. Import it #
Now in your Dart code, you can use:
import 'package:gradient_like_css/gradient_like_css.dart';
copied to clipboard

Usage #
To import CssLike:
import 'package:gradient_like_css/gradient_like_css.dart';
copied to clipboard
To use CssLike with the BoxDecoration:
BoxDecoration(
gradient: linearGradient(-225, ['#69EACB', '#EACCF8 48%', "#6654F1"]),
);
copied to clipboard

Example #
CssLike.linearGradient() #
🎨 Gradient at the default angle

with CSS:
background: linear-gradient(#e66465, #9198e5);
copied to clipboard
with Flutter:
Container(
height: 300,
width: 300,
decoration: BoxDecoration(
gradient: linearGradient(null, ['#e66465', '#9198e5']),
),
);
copied to clipboard

*Note: If the first argument is null, a 180 degree angular gradient is created.


🎨 Gradient at a 45-degree angle

with CSS:
background: linear-gradient(45deg, red, blue);
copied to clipboard
with Flutter:
Container(
height: 300,
width: 300,
decoration: BoxDecoration(
gradient: linearGradient(45, ['red', 'blue']),
),
);
copied to clipboard

*Note: The color argument can use X11/CSS3 color names.


🎨 Gradient that starts at 60% of the gradient line

with CSS:
background: linear-gradient(135deg, orange, orange 60%, cyan);
copied to clipboard
with Flutter:
Container(
height: 300,
width: 300,
decoration: BoxDecoration(
gradient: linearGradient(135, ['orange', 'orange 60%', 'cyan']),
),
);
copied to clipboard

*Note: You can add a color-stop points using the stop argument. It can be used with % such as 'orange 60%'.


🎨 Gradient with multi-position color stops

with CSS:
background: linear-gradient(to right,
red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);
copied to clipboard
with Flutter:
Container(
height: 300,
width: 300,
decoration: BoxDecoration(
gradient: linearGradient(Alignment.centerRight,
['red 20%', 'orange 20% 40%', 'yellow 40% 60%', 'green 60% 80%', 'blue 80%']),
),
);
copied to clipboard

*Note: The first argument can be Alignment as well as angle.


WebColors / X11Colors #
To use X11Colors:
Container(
color: X11Colors.MediumSpringGreen.color,
);
copied to clipboard
To use WebColors by X11/CSS3 color names:
Container(
// Can be used in lowercase too
color: WebColors.of('MediumSpringGreen').color,
);
copied to clipboard

Features #

radialGradient()
conicGradient() ( sweepGradient )


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 on GitHub and I'll look into it. Pull request are also welcome.