flutter_gradient_colors 2.1.1 copy "flutter_gradient_colors: ^2.1.1" to clipboard
flutter_gradient_colors: ^2.1.1 copied to clipboard

it's provide you more than 100 predefined Gradient Colors.

flutter_gradient_colors #

A new Flutter package project.

Show some ❤️ 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()
        ],
      ),
    );
  }
}

93
likes
120
pub points
88%
popularity

Publisher

unverified uploader

it's provide you more than 100 predefined Gradient Colors.

Repository (GitHub)
View/report issues

Documentation

API reference

License

unknown (license)

Dependencies

flutter

More

Packages that depend on flutter_gradient_colors