Flutter Widget - LinearGradient 渐变

最新推荐文章于 2024-09-11 07:46:04 发布

优小U

最新推荐文章于 2024-09-11 07:46:04 发布

阅读量657

点赞数

分类专栏： Flutter 文章标签： flutter android 渐变

本文为博主原创文章，未经博主允许不得转载，违者必究。

本文链接：https://blog.youkuaiyun.com/zy1281539626/article/details/129373561

版权

Flutter 专栏收录该内容

12 篇文章

订阅专栏

属性

colors 渐变颜色集合
stops 颜色梯度分布
begin 开始位置
end 结束位置
transform 变换
tileMode 在begin和end之间的平铺规则
hashCode
runtimeType

在这里插入图片描述

import 'package:flutter/material.dart';
import 'dart:math' as math;

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('LinearGradient 渐变'),
        ),
        body: Container(
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              colors: [
                Color(0xff027dfd),
                Color(0xff4100e0),
                Color(0xff1cdac5),
                Color(0xfff2dd22)
              ],
              stops: [0.1,0.25,0.5,0.85],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              transform: GradientRotation(math.pi / 2)
            )
          ),
          child: Center(
            child: ShaderMask(
              shaderCallback: (bounds)=> const LinearGradient(
                colors: [
                  Color(0xff027dfd),
                  Color(0xff4100e0),
                  Color(0xff1cdac5),
                  Color(0xfff2dd22)
                ],
              ).createShader(bounds),
              child: const Text(
                'Hello Flutter!',
                style: TextStyle(
                  fontSize: 40,
                  color: Colors.white
                ),
              ),
            )
          ),
        )
      )
    );
  }
}