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 中获得不同类型的渐变。
大家喜欢的话，记得点赞哇！
