flutter_gradient_colors
A new Flutter package project.
Show some :heart: and star the repo to support the project
100 New Colors Added
| # ScreenShots |
# Screenshot |
# ScreenShots |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
|
|
| # ScreenShots |
# Screenshot |
# ScreenShots |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
|
Types of Gradient Color class
1. GradientColor class: In this Gradient color class we use two colors for gradient color, so use only two value for stop otherwise you will face error.
eg. Container(
margin: EdgeInsets.only(top: 10.0),
width: MediaQuery.of(context).size.width - 10,
height: 140,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: GradientColors.blue,
stop:[
0.6,
0.7
]
)),
),
2. MoreGradientColor class: In this Gradient color class we use three colors for gradient color, so use only three value for stop otherwise you will face error.
eg. Container(
margin: EdgeInsets.only(top: 10.0),
width: MediaQuery.of(context).size.width - 10,
height: 140,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: MoreGradientColors.instagram,
stop:[
0.3,
0.6,
0.9
]
)),
),
New Colors List (GradientColors)
| # Color Name |
# Color Name |
# Color Name |
| warmFlame |
nightFade |
springWarmt |
| juicyPeach |
ladyLips |
sunnyMorning |
| rainyAshville |
frozenDreams |
winterNeva |
| dustyGrass |
temptingAzure |
heavyRain |
| amyCrisp |
meanFruit |
lightBluee |
| ripeMalinka |
cloudyKnoxville |
malibuBeach |
| newLife |
trueSunset |
morpheusDen |
| rareWind |
wildApple |
plumPlate |
| everlastingSky |
happyFisher |
blessingGet |
| sharpeyeEagle |
liadogaBottom |
lemonGate |
| itmeoBranding |
zeusMiracle |
deepBlue |
| happyAcid |
awesomePine |
newYork |
| mixedHopes |
flyHigh |
freshMilk |
| snowAgain |
februaryInk |
kindSteel |
| softGrass |
grownEarly |
sharpBlues |
| shadyWater |
dirtyBeauty |
greatWhale |
| teenNotebook |
politeRumors |
redSalvation |
| nightParty |
skyGlider |
heavenPeach |
| purpleDivision |
aquaSplash |
redLove |
| cleanMirror |
premiumDark |
cochitiLake |
| summerGames |
passionateRed |
mountainRock |
| desertHump |
jungleDay |
phoenixStart |
| octoberSilence |
farawayRiver |
alchemistLab |
| overSun |
marsParty |
eternalConstance |
| japanBlush |
summerGames |
smilingRain |
| cloudy |
bigMango |
healthyWater |
| amour |
strongStick |
blackGray |
| paloAlto |
happyMemories |
midnightBloom |
| crystalline |
partyBliss |
confidentCloud |
| leCocktail |
riverCity |
rozenBerry |
| childCare |
flyingLemon |
hiddenJaguar |
| nega |
seashore |
marbleWall |
| cheerfulCaramel |
nightSky |
youngGrass |
| nega |
seashore |
marbleWall |
| colorfulPeach |
gentleCare |
plumBath |
| happyUnicorn |
glassWater |
|
Colors List (GradientColors)
| # Color Name |
# Color Name |
# Color Name |
| blue |
pink |
orange |
| indigo |
white |
black |
| piggyPink |
coolBlues |
eveningSunshine |
| darkOcean |
gradeGrey |
dimBlue |
| ver |
lightBlue |
lightGreen |
| mango |
royalBlue |
skyLine |
| darkPink |
purplePink |
purplePink |
| skyBlue |
seaBlue |
noontoDusk |
| red |
lightBrown |
harmonicEnergy |
| radish |
sunny |
teal |
| purple |
green |
yellow |
| orangePink |
aqua |
sunrise |
| cherry |
mojito |
juicyOrange |
| mirage |
violet |
lightBlack |
| facebookMessenger |
winter |
cloud |
| grey |
beautifulGreen |
|
Colors List (MoreGradientColors)
| # Color Name |
# Color Name |
# Color Name |
| hazel |
darkSkyBlue |
instagram |
| jShine |
coolSky |
azureLane |
| orangePinkBlue |
lunada |
|
Example
class ContainerWidget extends StatelessWidget {
final List<Color> colors;
final String colorName;
const ContainerWidget(
{Key key, @required this.colors, @required this.colorName})
: super(key: key);
@override
Widget build(BuildContext context) {
return Center(
child: Stack(
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 10.0),
width: MediaQuery.of(context).size.width - 10,
height: 140,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: colors,
)),
),
Positioned(
bottom: 0,
left: 0,
right: 0,
child: Container(
height: 30.0,
child: Center(
child: Text(
"$colorName",
style: TextStyle(color: Colors.white, fontSize: 20.0),
),
),
color: Color.fromRGBO(0, 0, 0, 0.3),
),
)
],
),
);
}
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Flutter Gradient Color",
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text("Flutter Gradient Color"),
),
body: BodyPart(),
),
);
}
}
class BodyPart extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CupertinoScrollbar(
child: ListView(
children: <Widget>[
ContainerWidget(
colorName: "Blue",
colors: GradientColors.blue,
),
ContainerWidget(
colorName: "Cool Blue",
colors: GradientColors.coolBlues,
),
ContainerWidget(
colorName: "Pink",
colors: GradientColors.pink,
),
ContainerWidget(
colorName: "Orange",
colors: GradientColors.orange,
),
ContainerWidget(
colorName: "Indigo",
colors: GradientColors.indigo,
),
ContainerWidget(
colorName: "White",
colors: GradientColors.white,
),
ContainerWidget(
colorName: "Black",
colors: GradientColors.black,
),
ContainerWidget(
colorName: "Piggy Pink",
colors: GradientColors.piggyPink,
),
ContainerWidget(
colorName: "Evening Sunshine",
colors: GradientColors.eveningSunshine,
),
ContainerWidget(
colorName: "Dark Ocean",
colors: GradientColors.darkOcean,
),
ContainerWidget(
colorName: "Grade Grey",
colors: GradientColors.gradeGrey,
),
ContainerWidget(
colorName: "Dim Blue",
colors: GradientColors.dimBlue,
),
ContainerWidget(
colorName: "Ver",
colors: GradientColors.ver,
),
ContainerWidget(
colorName: "LightBlue",
colors: GradientColors.lightBlue,
),
ContainerWidget(
colorName: "Lunada",
colors: MoreGradientColors.lunada,
),
ContainerWidget(
colorName: "Light Green",
colors: GradientColors.lightGreen,
),
ContainerWidget(
colorName: "Violet",
colors: GradientColors.violet,
),
ContainerWidget(
colorName: "Light Black",
colors: GradientColors.lightBlack,
),
ContainerWidget(
colorName: "Facebook Messenger",
colors: GradientColors.facebookMessenger,
),
ContainerWidget(
colorName: "Winter",
colors: GradientColors.winter,
),
ContainerWidget(
colorName: "Cloud",
colors: GradientColors.cloud,
),
ContainerWidget(
colorName: "Grey",
colors: GradientColors.grey,
),
ContainerWidget(
colorName: "Beautiful Green",
colors: GradientColors.beautifulGreen,
),
ContainerWidget(
colorName: "Mango",
colors: GradientColors.mango,
),
ContainerWidget(
colorName: "Royal Blue",
colors: GradientColors.royalBlue,
),
ContainerWidget(
colorName: "Sky Line",
colors: GradientColors.skyLine,
),
ContainerWidget(
colorName: "Dark Pink",
colors: GradientColors.darkPink,
),
ContainerWidget(
colorName: "Purple Pink",
colors: GradientColors.purplePink,
),
ContainerWidget(
colorName: "Sky Blue",
colors: GradientColors.skyBlue,
),
ContainerWidget(
colorName: "Sea Blue",
colors: GradientColors.seaBlue,
),
ContainerWidget(
colorName: "Hazel",
colors: MoreGradientColors.hazel,
),
ContainerWidget(
colorName: "Noon To Dusk",
colors: GradientColors.noontoDusk,
),
ContainerWidget(
colorName: "Red",
colors: GradientColors.red,
),
ContainerWidget(
colorName: "Light Brown",
colors: GradientColors.lightBrown,
),
ContainerWidget(
colorName: "Harmonic Energy",
colors: GradientColors.harmonicEnergy,
),
ContainerWidget(
colorName: "Radish",
colors: GradientColors.radish,
),
ContainerWidget(
colorName: "Sunny",
colors: GradientColors.sunny,
),
ContainerWidget(
colorName: "Teal",
colors: GradientColors.teal,
),
ContainerWidget(
colorName: "Purple",
colors: GradientColors.purple,
),
ContainerWidget(
colorName: "Green",
colors: GradientColors.green,
),
ContainerWidget(
colorName: "Yellow",
colors: GradientColors.yellow,
),
ContainerWidget(
colorName: "Orange Pink",
colors: GradientColors.orangePink,
),
ContainerWidget(
colorName: "Aqua",
colors: GradientColors.aqua,
),
ContainerWidget(
colorName: "Sunrise",
colors: GradientColors.sunrise,
),
ContainerWidget(
colorName: "Cherry",
colors: GradientColors.cherry,
),
ContainerWidget(
colorName: "Mojito",
colors: GradientColors.mojito,
),
ContainerWidget(
colorName: "juicy Orange",
colors: GradientColors.juicyOrange,
),
ContainerWidget(
colorName: "Mirage",
colors: GradientColors.mirage,
),
Divider(),
Center(child: Text("More Gradient Color")),
ContainerWidget(
colorName: "Dark Sky Blue",
colors: MoreGradientColors.darkSkyBlue,
),
ContainerWidget(
colorName: "Instagram",
colors: MoreGradientColors.instagram,
),
ContainerWidget(
colorName: "JShine",
colors: MoreGradientColors.jShine,
),
ContainerWidget(
colorName: "Cool Sky",
colors: MoreGradientColors.coolSky,
),
ContainerWidget(
colorName: "Azure Lane",
colors: MoreGradientColors.azureLane,
),
ContainerWidget(
colorName: "Orange Pink Teal",
colors: MoreGradientColors.orangePinkTeal,
),
Divider()
],
),
);
}
}
