A new Flutter package project.
Show some ❤️ and star the repo to support the project #
# ScreenShots |
# Screenshot |
# ScreenShots |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
# ScreenShots |
# Screenshot |
# ScreenShots |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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
]
)),
),
# 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 |
|
# 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 |
|
# Color Name |
# Color Name |
# Color Name |
hazel |
darkSkyBlue |
instagram |
jShine |
coolSky |
azureLane |
orangePinkBlue |
lunada |
|
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()
],
),
);
}
}