写点什么

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

作者:坚果前端
  • 2021 年 12 月 02 日
  • 本文字数:1551 字

    阅读完需:约 5 分钟

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

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


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])),
),
));
}
}
复制代码


输出:




结论: 通过这种方式,我们学习了如何在 Flutter 中获得不同类型的渐变。

大家喜欢的话,记得点赞哇!

发布于: 1 小时前阅读数: 12
用户头像

坚果前端

关注

此间若无火炬,我便是唯一的光 2020.10.25 加入

公众号:“坚果前端”,51CTO博客首席体验官,专注于大前端技术的分享,包括Flutter,小程序,安卓,VUE,JavaScript。

评论

发布
暂无评论
如何在Flutter应用程序中创建不同的渐变 【Flutter专题14】