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