ducafecatFlutter 生态导航
FLUTTER ECOSYSTEM

skaran921/flutter_gradient_colors

flutter_gradient_colors 提供了大量渐变颜色

在 GitHub 查看 ↗
flutter_gradient_colors 项目封面
Stars
17
Forks
4
最近推送（UTC）
2022年10月31日
项目状态
未归档
Karan Soni GitHub avatar
GITHUB User

Karan Soni ↗

Application Developer

Ellenabad, Haryana, India
语言DartObjective-CJavaShellSwiftKotlin

技术话题

# hacktoberfest# flutter-gradient-colors# flutter-app# flutter# color-palette

此仓库发布的插件

使用的依赖

依赖清单 2 项
  • flutter{"sdk":"flutter"}
  • flutter_test开发依赖{"sdk":"flutter"}

原始 README

以下为英文项目原文快照，最新内容请访问 GitHub。

展开 / 收起项目 README

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
https://raw.githubusercontent.com/skaran921/flutter_gradient_colors/HEAD/screenshots/newColors/1.jpg https://raw.githubusercontent.com/skaran921/flutter_gradient_colors/HEAD/screenshots/newColors/2.jpg https://raw.githubusercontent.com/skaran921/flutter_gradient_colors/HEAD/screenshots/newColors/3.jpg
https://raw.githubusercontent.com/skaran921/flutter_gradient_colors/HEAD/screenshots/newColors/4.jpg https://raw.githubusercontent.com/skaran921/flutter_gradient_colors/HEAD/screenshots/newColors/5.jpg https://raw.githubusercontent.com/skaran921/flutter_gradient_colors/HEAD/screenshots/newColors/6.jpg
https://raw.githubusercontent.com/skaran921/flutter_gradient_colors/HEAD/screenshots/newColors/7.jpg https://raw.githubusercontent.com/skaran921/flutter_gradient_colors/HEAD/screenshots/newColors/8.jpg https://raw.githubusercontent.com/skaran921/flutter_gradient_colors/HEAD/screenshots/newColors/9.jpg
https://raw.githubusercontent.com/skaran921/flutter_gradient_colors/HEAD/screenshots/newColors/10.jpg https://raw.githubusercontent.com/skaran921/flutter_gradient_colors/HEAD/screenshots/newColors/11.jpg https://raw.githubusercontent.com/skaran921/flutter_gradient_colors/HEAD/screenshots/newColors/12.jpg
https://raw.githubusercontent.com/skaran921/flutter_gradient_colors/HEAD/screenshots/newColors/13.jpg https://raw.githubusercontent.com/skaran921/flutter_gradient_colors/HEAD/screenshots/newColors/14.jpg https://raw.githubusercontent.com/skaran921/flutter_gradient_colors/HEAD/screenshots/newColors/15.jpg
https://raw.githubusercontent.com/skaran921/flutter_gradient_colors/HEAD/screenshots/newColors/16.jpg https://raw.githubusercontent.com/skaran921/flutter_gradient_colors/HEAD/screenshots/newColors/17.jpg https://raw.githubusercontent.com/skaran921/flutter_gradient_colors/HEAD/screenshots/newColors/18.jpg
https://raw.githubusercontent.com/skaran921/flutter_gradient_colors/HEAD/screenshots/newColors/19.jpg https://raw.githubusercontent.com/skaran921/flutter_gradient_colors/HEAD/screenshots/newColors/20.jpg https://raw.githubusercontent.com/skaran921/flutter_gradient_colors/HEAD/screenshots/newColors/21.jpg
https://raw.githubusercontent.com/skaran921/flutter_gradient_colors/HEAD/screenshots/newColors/22.jpg
# ScreenShots # Screenshot # ScreenShots
https://raw.githubusercontent.com/skaran921/flutter_gradient_colors/HEAD/screenshots/Screenshot_2020-01-07-16-51-03.png https://raw.githubusercontent.com/skaran921/flutter_gradient_colors/HEAD/screenshots/Screenshot_2020-01-07-16-51-13.png https://raw.githubusercontent.com/skaran921/flutter_gradient_colors/HEAD/screenshots/Screenshot_2020-01-07-16-51-28.png
https://raw.githubusercontent.com/skaran921/flutter_gradient_colors/HEAD/screenshots/Screenshot_2020-01-07-16-51-33.png https://raw.githubusercontent.com/skaran921/flutter_gradient_colors/HEAD/screenshots/Screenshot_2020-01-07-16-51-42.png https://raw.githubusercontent.com/skaran921/flutter_gradient_colors/HEAD/screenshots/Screenshot_2020-01-07-16-51-51.png
https://raw.githubusercontent.com/skaran921/flutter_gradient_colors/HEAD/screenshots/Screenshot_2020-01-07-16-52-00.png https://raw.githubusercontent.com/skaran921/flutter_gradient_colors/HEAD/screenshots/Screenshot_2020-01-07-16-52-10.png https://raw.githubusercontent.com/skaran921/flutter_gradient_colors/HEAD/screenshots/Screenshot_2020-01-07-16-52-16.png
https://raw.githubusercontent.com/skaran921/flutter_gradient_colors/HEAD/screenshots/Screenshot_2020-01-07-16-52-23.png https://raw.githubusercontent.com/skaran921/flutter_gradient_colors/HEAD/screenshots/Screenshot_2020-01-07-16-52-29.png https://raw.githubusercontent.com/skaran921/flutter_gradient_colors/HEAD/screenshots/Screenshot_2020-01-07-16-52-36.png
https://raw.githubusercontent.com/skaran921/flutter_gradient_colors/HEAD/screenshots/Screenshot_2020-01-07-16-52-48.png https://raw.githubusercontent.com/skaran921/flutter_gradient_colors/HEAD/screenshots/Screenshot_2020-01-07-16-52-54.png https://raw.githubusercontent.com/skaran921/flutter_gradient_colors/HEAD/screenshots/Screenshot_2020-01-07-16-53-02.png
https://raw.githubusercontent.com/skaran921/flutter_gradient_colors/HEAD/screenshots/Screenshot_2020-01-07-16-53-15.png https://raw.githubusercontent.com/skaran921/flutter_gradient_colors/HEAD/screenshots/Screenshot_2020-01-07-16-53-24.png

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()
        ],
      ),
    );
  }
}