Flutter渐变颜色处理插件flutter_gradient_colors的使用

发布于 1周前 作者 yibo5220 来自 Flutter

Flutter渐变颜色处理插件flutter_gradient_colors的使用

flutter_gradient_colors 是一个用于在Flutter项目中轻松创建和使用渐变颜色的插件。它提供了多种预定义的渐变颜色组合，可以帮助开发者快速实现美观的UI效果。

1. 插件简介

flutter_gradient_colors 是一个新的Flutter包项目，旨在为开发者提供一组预定义的渐变颜色组合。通过这个插件，你可以轻松地在应用中使用各种渐变颜色，而无需手动定义每个颜色的RGB值或Hex代码。

2. 新增颜色

该插件最近新增了100种新的渐变颜色组合，涵盖了从自然风景到抽象艺术的各种风格。以下是一些新增颜色的示例截图：

渐变颜色示例 渐变颜色示例 渐变颜色示例

3. 渐变颜色类

flutter_gradient_colors 提供了两种主要的渐变颜色类：

  • GradientColor 类：适用于需要两个颜色的渐变。你只需要提供两个颜色值，并且可以指定渐变的起始和结束位置。

    示例代码：

    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, // 使用预定义的蓝色渐变
      stops: [0.6, 0.7], // 渐变的停止点
    ),
  ),
)

  • MoreGradientColor 类：适用于需要三个颜色的渐变。你需要提供三个颜色值，并且可以指定渐变的起始、中间和结束位置。

    示例代码：

    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, // 使用预定义的Instagram渐变
      stops: [0.3, 0.6, 0.9], // 渐变的停止点
    ),
  ),
)

4. 颜色列表

flutter_gradient_colors 提供了两组颜色列表：

  • GradientColors：包含两颜色的渐变组合，例如 blue, pink, orange 等。

    颜色名称 颜色名称 颜色名称
    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

  • MoreGradientColors：包含三颜色的渐变组合，例如 hazel, darkSkyBlue, instagram 等。

    颜色名称 颜色名称 颜色名称
    hazel darkSkyBlue instagram
    jShine coolSky azureLane
    orangePinkBlue lunada

5. 完整示例Demo

以下是一个完整的示例代码，展示了如何在Flutter应用中使用 flutter_gradient_colors 插件来创建带有渐变颜色的容器。

import 'package:flutter/material.dart';
import 'package:flutter_gradient_colors/flutter_gradient_colors.dart';

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

更多关于Flutter渐变颜色处理插件flutter_gradient_colors的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter渐变颜色处理插件flutter_gradient_colors的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何使用 flutter_gradient_colors 插件在 Flutter 应用中实现渐变颜色的代码示例。

首先，确保你已经在 pubspec.yaml 文件中添加了 flutter_gradient_colors 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_gradient_colors: ^x.y.z  # 请替换为最新版本号

然后运行 flutter pub get 来获取依赖。

接下来，你可以在你的 Flutter 应用中使用这个插件来创建渐变颜色。以下是一个完整的示例，展示如何在 Container 中应用线性渐变背景：

import 'package:flutter/material.dart';
import 'package:flutter_gradient_colors/flutter_gradient_colors.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Gradient Color Example'),
        ),
        body: Center(
          child: GradientContainer(),
        ),
      ),
    );
  }
}

class GradientContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 使用 flutter_gradient_colors 提供的渐变颜色
    final gradientColors = LinearGradient(
      colors: [
        Gradients.twitter, // 预定义的 Twitter 渐变颜色
        Gradients.facebook, // 预定义的 Facebook 渐变颜色
      ],
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
    );

    return Container(
      height: 300,
      width: double.infinity,
      decoration: BoxDecoration(
        gradient: gradientColors,
      ),
      child: Center(
        child: Text(
          'Gradient Background',
          style: TextStyle(
            color: Colors.white,
            fontSize: 24,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们：

  1. 导入了 flutter_gradient_colors 包。
  2. 创建了一个 MyApp 小部件，它包含一个带有 AppBar 的 Scaffold。
  3. 在 Scaffold 的 body 中，我们放置了一个自定义的 GradientContainer 小部件。
  4. 在 GradientContainer 小部件中，我们使用 LinearGradient 创建了一个渐变背景，颜色从 Gradients.twitter 到 Gradients.facebook。Gradients 类是 flutter_gradient_colors 包提供的一个方便的工具类，它包含了许多预定义的渐变颜色。
  5. 最后，我们在 Container 中添加了一些文本，以便更好地展示渐变背景效果。

你可以根据需要修改渐变颜色、方向和容器大小。flutter_gradient_colors 包提供了许多预定义的渐变颜色，你可以查阅其文档以获取更多信息。

回到顶部