Flutter 文本-酷炫的渐变效果

关注

原创最新推荐文章于 2026-06-21 15:11:53 发布 682 阅读 AI 写同款· GEO 优化 ›

『Flutter-绘制篇』实现炫酷的雷电特效前言前不久，利用周末时间学习并完成一个简单的 Flutter 项目 - 简悦天气，简约不简单，丰富不复杂，这是一款简约风格的 flutter 天气项目，提供实时、多日、24 小时、台风路径、语音播报以及生活指数等服务，支持定位、删除、搜索等操作。下图为主页效果，点击下载进行体验：项目中运用了大量的自定义绘制 widget，首页丰富的自定义 chart 效果和炫酷的天气背景动效。天气背景动效在不同的天气气象下展示不同的效果。目前一共实现了 15 种类别，其中有，晴、晴晚、多云、多云晚、阴天、小中阅读详情

有三种渐变效果可以设置，Gradient.linear、Gradient.radial、Gradient.sweep

import 'dart:ui' as ui;

......

TextStyle(
                  fontSize: 40,
                  foreground: Paint()
                    ..shader = ui.Gradient.linear(
                      const Offset(0, 80),
                      const Offset(80, 150),
                      <Color>[
                        Colors.yellow,
                        Colors.red,
                      ],
                    )),
            ),

收录于