flutter 渐变_Flutter：如何使用渐变和GradientAppBar插件

flutter 渐变

We recently looked at how to create our first Flutter app. Next up, we’re going to investigate how we can add a gradient background, because they’re so cool!

最近，我们研究了如何创建第一个Flutter应用程序 。 接下来，我们将研究如何添加渐变背景，因为它们非常酷！

To ensure we’re all playing the same game - go ahead and create a Flutter application by running the following:

为确保我们都玩同一游戏-继续运行以下步骤，创建Flutter应用程序：

$ flutter create flutter_gradient
$ cd flutter_gradient
$ code .

# run this on an iOS/Android simulator

渐变色 (Gradients)

We can now add a gradient to our HomePage like so:

现在，我们可以像这样在首页上添加渐变：

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,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter'),
      ),
      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),
          ),
        ),
      )));
  }
}

The key to this is the addition of a decoration and boxDecoration to our Container widget. This allows us to define a LinearGradient which can be given colors, as well as a begin and end Alignment.

这样做的关键是在我们的Container小部件中添加了decoration和boxDecoration 。 这使我们能够定义一个LinearGradient ，可以为其指定colors以及begin和end Alignment 。

decoration: BoxDecoration(
  gradient: LinearGradient(
    begin: Alignment.topRight,
    end: Alignment.bottomLeft,
    colors: [Colors.blue, Colors.red])),

This gives us the following:

这给我们以下内容：

Awesome! Kind of reminds me of the frozen Slushies I used to get as a kid… :)

太棒了！ 有点让我想起了我小时候曾经冷冻过的冰沙…:)

停止 (Stops)

What if we had multiple colors, and wanted to control how much they take up of the gradient? We can do that with stops:

如果我们有多种颜色并且想要控制它们占据渐变的程度怎么办？ 我们可以stops来做：

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
  ])),

This then allows us to fraction our gradient into precise chunks. Here’s our (not so pretty) result:

然后，这使我们可以将梯度分成精确的块。 这是我们的结果(不是很漂亮)：

渐变应用栏 (Gradient App Bar)

What if we could extend this gradient to our appBar? I mean, we can’t do it straight out the box, but there’s a plugin for that!

如果我们可以将此梯度扩展到我们的appBar怎么appBar ？ 我的意思是，我们不能直接做到这一点，但是有一个插件！

Under the dependencies block, add the following to your pubspec.yaml file:

在dependencies块下，将以下内容添加到您的pubspec.yaml文件中：

dependencies:
  gradient_app_bar: ^0.0.1
  flutter:
    sdk: flutter

We can then import the gradient_app_bar package inside of main.dart:

然后，我们可以在main.dart内导入gradient_app_bar包：

import 'package:gradient_app_bar/gradient_app_bar.dart';

Finally, we can replace our AppBar with the GradientAppBar and subsequent colors:

最后，我们可以用GradientAppBar和随后的颜色替换AppBar ：

appBar: GradientAppBar(
    title: Text('Flutter'),
    backgroundColorStart: Colors.cyan,
    backgroundColorEnd: Colors.indigo,
  ),

Tada! Our appBar now has a gradient:

多田 我们的appBar现在具有渐变：

翻译自: https://www.digitalocean.com/community/tutorials/flutter-flutter-gradient

flutter 渐变