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

举报
坚果的博客 发表于 2021/12/02 13:09:23 2021/12/02
【摘要】 在今天的文章中,我们将看到如何在应用程序中创建不同的渐变 。

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

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

img


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

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。