Flutter渐变效果插件flutter_gradients_reborn的使用

Flutter Gradients Reborn

声明：我所做的只是将项目迁移到具有空安全（我可能或可能不会添加一些渐变）。本项目的作者与原始项目无关。这是原始项目：https://pub.dev/packages/flutter_gradients

这是一个用Dart编写的精选渐变集合（https://webgradients.com 的Flutter端口）。目前只包含线性渐变。

安装

在pubspec.yaml文件中添加以下依赖：

dependencies:
  flutter_gradients_reborn: ^1.0.0+7

使用

导入包

在你的Dart文件中导入以下包：

import 'package:flutter_gradients_reborn/flutter_gradients_reborn.dart';

如何使用

线性渐变

默认情况下，FlutterGradient将生成一个LinearGradient。

GradientType type: GradientType.linear;

Container(
  width: 150,
  height: 150,
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    gradient: FlutterGradient.warmFlame(),
  ),
);

或者

Container(
  width: 150,
  height: 150,
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    gradient: FlutterGradient.warmFlame(type: GradientType.linear),
  ),
);

径向渐变

你可以自定义以下值：

• center: 渐变中心，作为(-1.0, -1.0) x (1.0, 1.0) 方框内的偏移量。
• radius: 渐变半径，为绘制框最短边长度的比例。
• tileMode: 当渐变超出radius像素范围时，如何平铺该渐变。

GradientType type: GradientType.radial;

Container(
  width: 150,
  height: 150,
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    gradient: FlutterGradient.warmFlame(
      type: GradientType.radial,
      center: Alignment.center,
      radius: 0.5,
      tileMode: TileMode.clamp,
    ),
  ),
);

扫描渐变

你可以自定义以下值：

• center: 渐变中心，作为(-1.0, -1.0) x (1.0, 1.0) 方框内的偏移量。
• startAngle: 停止 0.0 处的角度（弧度）。
• endAngle: 停止 1.0 处的角度（弧度）。
• tileMode: 当渐变超出radius像素范围时，如何平铺该渐变。

GradientType type: GradientType.sweep;

Container(
  width: 150,
  height: 150,
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    gradient: FlutterGradient.warmFlame(
      type: GradientType.sweep,
      center: Alignment.center,
      startAngle: 0.0,
      endAngle: math.pi * 2,
      tileMode: TileMode.clamp,
    ),
  ),
);

示例

Flutter 示例

安装 Flutter

为了运行Flutter示例，你必须安装Flutter。有关安装说明，请参阅在线文档。

运行应用

1. 打开Android模拟器、iOS模拟器或连接适当的移动设备进行调试。
2. 打开终端。
3. 进入example/lib/目录。
4. 运行flutter doctor以确保所有Flutter依赖项正常工作。
5. 运行flutter packages get。
6. 运行flutter run。

以下是完整的示例代码：

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

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: const Text('Flutter Gradients'),
        ),
        body: MyApp(),
      ),
    ),
  );
}

class MyApp extends StatefulWidget {
  [@override](/user/override)
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    var listGradientName = FlutterGradientNames.values;

    return Center(
      child: ListView.separated(
        itemCount: listGradientName.length,
        separatorBuilder: (BuildContext context, int index) => Divider(),
        itemBuilder: (BuildContext context, int index) {
          var gradient = listGradientName[index];
          var name = FlutterGradients.names[gradient.index];

          return ListTile(
            title: Text(name),
            leading: AspectRatio(
              aspectRatio: 1,
              child: Container(
                decoration: BoxDecoration(
                    gradient: _findGradients(gradient), shape: BoxShape.circle),
              ),
            ),
            onTap: () {
              _onTap(name, gradient);
            },
          );
        },
      ),
    );
  }

  /// Find the gradient from his name in the list
  Gradient _findGradients(FlutterGradientNames gradient,
          [GradientType type = GradientType.linear]) =>
      FlutterGradients.findByName(gradient, type: type);

  /// onTap method
  _onTap(String name, FlutterGradientNames gradient) {
    showDialog(
        context: context,
        builder: (_) {
          var linearGradient = _findGradients(gradient);
          var radialGradient = _findGradients(gradient, GradientType.radial);
          var sweepGradient = _findGradients(gradient, GradientType.sweep);

          var linearGradientBoxDecoration =
              BoxDecoration(shape: BoxShape.circle, gradient: linearGradient);
          var radialGradientBoxDecoration =
              BoxDecoration(shape: BoxShape.circle, gradient: radialGradient);
          var sweepGradientBoxDecoration =
              BoxDecoration(shape: BoxShape.circle, gradient: sweepGradient);

          var size = 200.0;

          var linearGradientCircleContainer = Container(
              width: size,
              height: size,
              decoration: linearGradientBoxDecoration);
          var radialGradientCircleContainer = Container(
              width: size,
              height: size,
              decoration: radialGradientBoxDecoration);
          var sweepGradientCircleContainer = Container(
              width: size,
              height: size,
              decoration: sweepGradientBoxDecoration);

          return AlertDialog(
            title: Center(child: Text(name)),
            content: SingleChildScrollView(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisSize: MainAxisSize.max,
                children: <Widget>[
                  Column(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisSize: MainAxisSize.max,
                    children: <Widget>[
                      Text("LinearGradient"),
                      Padding(
                          padding: EdgeInsets.all(10),
                          child: linearGradientCircleContainer),
                      Text("RadialGradient"),
                      Padding(
                          padding: EdgeInsets.all(10),
                          child: radialGradientCircleContainer),
                      Text("SweepGradient"),
                      Padding(
                          padding: EdgeInsets.all(10),
                          child: sweepGradientCircleContainer),
                    ],
                  )
                ],
              ),
            ),
          );
        });
  }
}