Flutter渐变效果插件gradient_like_css的使用

gradient_like_css 是一个Flutter包，它允许你在Flutter应用中体验类似CSS的渐变效果。

安装

1. 依赖于它

在你的项目的 pubspec.yaml 文件中添加以下内容：

dependencies:
  gradient_like_css: ^1.0.0

2. 安装它

你可以通过命令行安装依赖项：

$ flutter pub get

3. 导入它

现在，在你的Dart代码中可以使用：

import 'package:gradient_like_css/gradient_like_css.dart';

使用方法

为了使用 CssLike 与 BoxDecoration ，你可以这样做：

BoxDecoration(
  gradient: linearGradient(-225, ['#69EACB', '#EACCF8 48%', "#6654F1"]),
);

示例

以下是几个具体的例子，展示了如何使用 gradient_like_css 创建不同类型的线性渐变。

🎨 默认角度的渐变

Container(
  height: 300,
  width: 300,
  decoration: BoxDecoration(
    gradient: linearGradient(null, ['#e66465', '#9198e5']),
  ),
);

注：如果第一个参数是 null，则创建一个180度的角度渐变。

🎨 45度角的渐变

Container(
  height: 300,
  width: 300,
  decoration: BoxDecoration(
    gradient: linearGradient(45, ['red', 'blue']),
  ),
);

注：color 参数可以使用X11/CSS3颜色名称。

🎨 在渐变线上60%处开始的渐变

Container(
  height: 300,
  width: 300,
  decoration: BoxDecoration(
    gradient: linearGradient(135, ['orange', 'orange 60%', 'cyan']),
  ),
);

注：你可以使用 stop 参数添加颜色停止点。它可以与百分比一起使用，例如 'orange 60%'。

🎨 多位置颜色停止点的渐变

Container(
  height: 300,
  width: 300,
  decoration: BoxDecoration(
    gradient: linearGradient(Alignment.centerRight, 
      ['red 20%', 'orange 20% 40%', 'yellow 40% 60%', 'green 60% 80%', 'blue 80%']),
  ),
);

注：第一个参数也可以是 Alignment 而不仅仅是角度。

WebColors / X11Colors

使用 X11Colors

Container(
    color: X11Colors.MediumSpringGreen.color,
);

使用 WebColors

Container(
    // 也可以使用小写
    color: WebColors.of('MediumSpringGreen').color,
);

特性

• radialGradient()
• conicGradient() (即 sweepGradient )

Bug 或 请求

如果你遇到任何问题，随时可以在 GitHub上开一个issue。如果你觉得库缺少某个特性，请在GitHub上提交功能请求，我会考虑加入。也欢迎提交Pull Request。

完整示例Demo

下面是一个完整的示例demo，演示了如何将上述渐变效果应用于Flutter应用程序中：

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

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('gradient_like_css'),
        ),
        body: Center(
          child: Container(
            height: 300,
            width: 300,
            decoration: BoxDecoration(
              gradient: linearGradient(null, ['#e66465', '#9198e5']),
              /// Gradient at a 45-degree angle
              // gradient: linearGradient(45, ['red', 'blue']),
              /// Gradient that starts at 60% of the gradient line
              // gradient: linearGradient(135, ['orange', 'orange 60%', 'cyan']),
              /// Gradient with multi-position color stops
              // gradient: linearGradient(
              //   Alignment.centerRight,
              //   [
              //     'red 20%',
              //     'orange 20% 40%',
              //     'yellow 40% 60%',
              //     'green 60% 80%',
              //     'blue 80%',
              //   ],
              // ),
            ),
          ),
        ),
      ),
    );
  }
}

你可以根据需要注释或取消注释不同的 linearGradient 方法来查看不同的渐变效果。