如何在 Flutter 应用程序中创建不同的渐变【Flutter 专题 14】

作者：坚果前端

2021 年 12 月 02 日
本文字数：1551 字
阅读完需：约 5 分钟

大家好，我是坚果，喜欢本文的话，可以关注我的公众号“坚果前端”

Flutter 可用于创建漂亮的 UI。因此，在今天的文章中，我们将看到如何在应用程序中创建不同的渐变。

开始吧

第 1 步： 创建一个新的 Flutter 应用程序。

第 2 步： 对于渐变，我们必须使用 Container 小部件，其中我们将拥有 BoxDecoration 属性，这将允许我们为我们的应用程序创建渐变。

例如：

Container(
            height: 300,
            width: 300,
            decoration: BoxDecoration(
              gradient: 
            ),
          ),

复制代码

现在我们在 Flutter 中有不同类型的渐变

SweepGradient：创建一个扇形渐变。
LinearGradient：创建线性渐变。
RadialGradius：创建放射状渐变。

对于 Sweep Gradient，您可以像这样使用它

Container(              height: 300,              width: 300,              decoration: BoxDecoration(                  gradient: SweepGradient(                      colors: [Colors.green, Colors.lightBlue, Colors.red])),            ),

复制代码

对于 RadialGradius，您可以像这样使用它

  Container(              height: 300,              width: 300,              decoration: BoxDecoration(                  gradient: RadialGradient(                      colors: [Colors.red, Colors.blue, Colors.green])),            ),

复制代码

对于线性渐变， 您可以像这样使用它

 Container(              height: 300,              width: 300,              decoration: BoxDecoration(                  gradient: LinearGradient(                      colors: [Colors.deepOrange, Colors.yellow.shade300])),            ),

复制代码

第 3 步： 现在要更改渐变的对齐方式，您可以在 BoxDecoration 的渐变属性中使用 AlignmentGeometry begin = Alignment.centerLeft, AlignmentGeometry end = Alignment.centerRight。

例如

decoration: BoxDecoration(
                gradient: LinearGradient(
                    begin: Alignment.centerLeft,
                    end: Alignment.centerRight,
                    colors: [Colors.deepOrange, Colors.yellow.shade300])),

复制代码

在 Flutter 中创建渐变的完整示例代码

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:scroll_snap_list/scroll_snap_list.dart';
 
void main() {
  runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Demo(),
      theme: ThemeData(
        brightness: Brightness.dark,
      ),
    );
  }
}
 
class Demo extends StatelessWidget {
  const Demo({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Gradients'),
        ),
        body: Center(
          child: Container(
            height: 300,
            width: 300,
            decoration: BoxDecoration(
                gradient: LinearGradient(
                    begin: Alignment.centerLeft,
                    end: Alignment.centerRight,
                    colors: [Colors.deepOrange, Colors.yellow.shade300])),
          ),
        ));
  }
}