介绍

颜色渐变采用起始颜色和位置以及结束颜色和位置。然后它执行颜色之间的过渡。考虑到色彩理论，它们可以使应用程序在视觉上比普通设计更有趣。

在本文中，您将使用BoxDecoration‘s LinearGradient和gradient_app_barpackage将渐变应用于 Flutter 应用程序。

先决条件

要完成本教程，您需要：

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

本教程通过 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,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

关键是在小部件中添加一个decoration和。这允许您定义 a which can be given ，以及 a and 。BoxDecorationContainerLinearGradientcolorsbeginend Alignment

编译你的代码并让它在模拟器中运行：

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

第 3 步 – 使用stopswithLinearGradient

还可以使用其他颜色并更好地控制颜色过渡应在屏幕上的哪个位置生效。

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

编译你的代码并让它在模拟器中运行：

这将创建一个线性渐变，它从0.0屏幕向下开始以黄色开始，然后在0.4屏幕向下过渡到红色，然后在0.6屏幕向下过渡到靛蓝，然后在1.0向下过渡到蓝色屏幕它过渡到蓝绿色。

第 4 步 – 使用 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';

最后，您可以替换AppBar与GradientAppBar和随后的颜色：

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

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

注：的早期版本GradientAppBar使用backgroundColorStart和backgroundColorEnd其陈旧的的0.1.0版本。

编译你的代码并让它在模拟器中运行：

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

结论

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

如果您想了解有关 Flutter 的更多信息，请查看我们的 Flutter 主题页面以获取练习和编程项目。