前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。

简介

颜色渐变需要一个起始颜色和位置以及结束颜色和位置，然后执行颜色之间的过渡。考虑到颜色理论，它们可以使应用程序比普通设计更具视觉吸引力。

在本文中，您将使用 BoxDecoration 的 LinearGradient 和 gradient_app_bar 包将渐变应用到 Flutter 应用程序中。

先决条件

要完成本教程，您需要：

• 下载并安装 Flutter。
• 下载并安装 Android Studio 或 Visual Studio Code。
• 建议为您的代码编辑器安装插件：
  • 为 Android Studio 安装 Flutter 和 Dart 插件。
  • 为 Visual Studio Code 安装 Flutter 扩展。

本教程已使用 Flutter v1.22.2、Android SDK v30.0.2 和 Android Studio v4.1 进行验证。

第 1 步 — 设置项目

一旦您为 Flutter 设置好环境，您可以运行以下命令来创建一个新应用程序：

flutter create flutter_gradient_example

进入新项目目录：

cd flutter_gradient_example

使用 flutter create 将生成一个演示应用程序，该应用程序将显示按钮被点击的次数。

第 2 步 — 使用 LinearGradient

使用您的代码编辑器打开 main.dart 并修改代码以添加 BoxDecoration：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Gradient Example'),
      ),
      body: Center(
        child: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topRight,
              end: Alignment.bottomLeft,
              colors: [
                Colors.blue,
                Colors.red,
              ],
            )
          ),
          child: Center(
            child: Text(
              'Hello Gradient!',
              style: TextStyle(
                fontSize: 48.0,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

关键在于向 Container 小部件添加 decoration 和 BoxDecoration。这允许您定义一个 LinearGradient，它可以被赋予 colors，以及 begin 和 end Alignment。

编译您的代码并在模拟器中运行：

!在模拟器中运行的 Flutter 应用程序的屏幕截图，其中线性渐变从屏幕顶部开始为蓝色，并逐渐过渡到屏幕底部的红色。

这将创建一个线性渐变，从屏幕顶部开始为蓝色，并逐渐过渡到屏幕底部的红色。

第 3 步 — 使用 LinearGradient 的 stops

还可以使用额外的颜色，并对颜色过渡应该在屏幕上的哪个位置进行更精细的控制。

在您的代码编辑器中重新打开 main.dart 并添加 stops：

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Gradient Example'),
      ),
      body: Center(
        child: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topRight,
              end: Alignment.bottomLeft,
              stops: [
                0.1,
                0.4,
                0.6,
                0.9,
              ],
              colors: [
                Colors.yellow,
                Colors.red,
                Colors.indigo,
                Colors.teal,
              ],
            )
          ),
          child: Center(
            child: Text(
              'Hello Gradient!',
              style: TextStyle(
                fontSize: 48.0,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

编译您的代码并在模拟器中运行：

!在模拟器中运行的 Flutter 应用程序的屏幕截图，其中线性渐变从屏幕右上角开始为黄色，并逐渐过渡到红色、靛蓝，最后在屏幕左下角过渡到蓝绿色。

这将创建一个线性渐变，从屏幕右上角开始为黄色，然后在屏幕上 0.4 处过渡到红色，然后在屏幕上 0.6 处过渡到靛蓝，最后在屏幕上 1.0 处过渡到蓝绿色。

第四步 — 使用 GradientAppBar

BoxDecoration 不适用于 AppBar。但是，可以使用 GradientAppBar 包将颜色渐变应用到 AppBar。

在代码编辑器中打开 pubspec.yaml 并添加 gradient_app_bar：

dependencies:
  flutter:
    sdk: flutter

  gradient_app_bar: ^0.1.3

然后，回到 main.dart 并添加 gradient_app_bar 的导入：

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

最后，您可以用 GradientAppBar 和后续颜色替换 AppBar：

appBar: GradientAppBar(
  title: Text('Flutter Gradient Example'),
  gradient: LinearGradient(
    colors: [
      Colors.cyan,
      Colors.indigo,
    ],
  ),
),

此示例将使用青色和靛蓝色的 LinearGradient。

编译您的代码并在模拟器中运行：

!在模拟器中运行的 Flutter 应用程序的屏幕截图，显示了从屏幕左侧开始的线性渐变，从青色逐渐过渡到靛蓝色。

这将创建一个线性渐变，从屏幕左侧开始为青色，逐渐过渡到屏幕右侧的靛蓝色。

结论

在本文中，您使用了 LinearGradient 和 GradientAppBar 来将渐变应用到 Flutter 应用程序中。