如何在Flutter应用程序中创建不同的渐变[Flutter专题20]
2023-04-18 16:06:47 时间
大家好。我是坚果,如果你迷惘,不妨看看码农的轨迹
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])),
),
对于放射状渐变,您可以像这样使用它
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])),
),
));
}
}
输出:
img
img
结论: 通过这种方式,我们学习了如何在 Flutter 中获得不同类型的渐变。
相关文章
- Typora自动上传超级详细教程!!
- springboot~ApplicationContextAware与@Autowired注解
- 一本软考教材,治好了我多年的低血压
- Smartbi绘制表格
- Spring框架笔记
- 不到 20 人的 IT 公司该去吗?
- git同一仓库,不同分支融合
- docker 安装启动jenkins 以及问题剖析
- 分布式中灰度方案实践
- NotePad++的基本使用方法
- Caffeine缓存框架入门学习
- 优雅的代码从现在开始
- day32-线程基础02
- day31-线程基础01
- JPA 入门实战(4)--Spring Data JPA 使用
- 线程池:ThreadPoolExecutor源码解读
- 容器编排工具鉴赏- docker-compose 、Kubernetes、OpenShift、Docker Swarm
- Docker 搭建 Nexus3 私服 | 基本操作
- 微服务Docker打包
- 微服务网关Gateway实践总结