flutter-渐变色边框和渐变色文字和渐变色背景

文章目录

  • [1. 介绍](#1. 介绍)
  • [2. 代码实现](#2. 代码实现)
    • [2-1. 渐变色背景](#2-1. 渐变色背景)
    • [2-2. 渐变色边框](#2-2. 渐变色边框)
    • [2-3. 宽高由内容撑起的渐变色边框](#2-3. 宽高由内容撑起的渐变色边框)
    • [2-4. 渐变色文本](#2-4. 渐变色文本)
  • [3. 完整例子](#3. 完整例子)

1. 介绍

在 flutter 中,渐变有三种,线性渐变 LinearGradient、放射状渐变 RadialGradient、扇形渐变 SweepGradient。一般都是使用线性渐变 LinearGradient,下面是本文带你实现的几个渐变色效果:

2. 代码实现

LinearGradient 类接受三个参数:

  • begin:渐变的起始点,例如 Alignment.centerLeft 表示从左侧开始渐变
  • end:渐变的结束点,例如 Alignment.centerRight 表示渐变到右侧结束
  • colors:渐变过程中的颜色数组

2-1. 渐变色背景

dart 复制代码
Container(
  height: 200,
  alignment: Alignment.center,
  margin: const EdgeInsets.symmetric(vertical: 30),
  decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(12),
      gradient: const LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          colors: colorList)),
  child: const Text('渐变色背景',
      style:
          TextStyle(color: Colors.white, fontSize: 16)))

2-2. 渐变色边框

需要先安装gradient_borders库。

shell 复制代码
flutter pub add gradient_borders
dart 复制代码
import 'package:gradient_borders/box_borders/gradient_box_border.dart';

Container(
  height: 200,
  alignment: Alignment.center,
  margin: const EdgeInsets.only(bottom: 30),
  decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(12),
      border: const GradientBoxBorder(
          gradient: LinearGradient(colors: colorList),
          width: 2)),
  child: const Text('渐变色边框',
      style:
          TextStyle(color: Colors.white, fontSize: 16)))

2-3. 宽高由内容撑起的渐变色边框

dart 复制代码
Container(
  padding: const EdgeInsets.all(10),
  margin: const EdgeInsets.only(bottom: 30),
  decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(12),
      border: const GradientBoxBorder(
          gradient: LinearGradient(colors: colorList),
          width: 2)),
  child: const Text('宽高不固定由内容撑起来的渐变色边框',
      style:
          TextStyle(color: Colors.white, fontSize: 16)))

2-4. 渐变色文本

dart 复制代码
Container(
  height: 50,
  alignment: Alignment.center,
  child: ShaderMask(
      shaderCallback: (rect) {
        return const LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          colors: colorList,
        ).createShader(rect);
      },
      child: const Text('渐变色文字',
          style: TextStyle(
              color: Colors.white, fontSize: 16))))

3. 完整例子

dart 复制代码
import 'package:flutter/material.dart';
import 'package:gradient_borders/box_borders/gradient_box_border.dart';

/// 渐变色背景和边框和文字
class GradientColorPage extends StatelessWidget {
  const GradientColorPage({super.key});

  @override
  Widget build(BuildContext context) {
    const List<Color> colorList = [Colors.red, Colors.yellow, Colors.blue];

    return Scaffold(
        backgroundColor: Colors.black,
        body: SafeArea(
            child: Container(
                alignment: Alignment.center,
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height,
                padding: const EdgeInsets.all(20),
                child: Column(
                  mainAxisSize: MainAxisSize.max,
                  children: [
                    /// 渐变色背景
                    Container(
                        height: 200,
                        alignment: Alignment.center,
                        margin: const EdgeInsets.symmetric(vertical: 30),
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(12),
                            gradient: const LinearGradient(
                                begin: Alignment.topLeft,
                                end: Alignment.bottomRight,
                                colors: colorList)),
                        child: const Text('渐变色背景',
                            style:
                                TextStyle(color: Colors.white, fontSize: 16))),

                    /// 渐变色边框
                    Container(
                        height: 200,
                        alignment: Alignment.center,
                        margin: const EdgeInsets.only(bottom: 30),
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(12),
                            border: const GradientBoxBorder(
                                gradient: LinearGradient(colors: colorList),
                                width: 2)),
                        child: const Text('渐变色边框',
                            style:
                                TextStyle(color: Colors.white, fontSize: 16))),

                    /// 宽高不固定由内容撑起来的渐变色边框
                    Container(
                        padding: const EdgeInsets.all(10),
                        margin: const EdgeInsets.only(bottom: 30),
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(12),
                            border: const GradientBoxBorder(
                                gradient: LinearGradient(colors: colorList),
                                width: 2)),
                        child: const Text('宽高不固定由内容撑起来的渐变色边框',
                            style:
                                TextStyle(color: Colors.white, fontSize: 16))),

                    /// 渐变色文字
                    Container(
                        height: 50,
                        alignment: Alignment.center,
                        child: ShaderMask(
                            shaderCallback: (rect) {
                              return const LinearGradient(
                                begin: Alignment.topLeft,
                                end: Alignment.bottomRight,
                                colors: colorList,
                              ).createShader(rect);
                            },
                            child: const Text('渐变色文字',
                                style: TextStyle(
                                    color: Colors.white, fontSize: 16))))
                  ],
                ))));
  }
}

往期文章

个人主页

相关推荐
JarvanMo4 小时前
借助FlutterFire CLI实现Flutter与Firebase的多环境配置
前端·flutter
RichardLai885 小时前
[Flutter 基础] - Flutter基础组件 - Icon
android·flutter
汤面不加鱼丸5 小时前
flutter实践:比例对比线图实现
前端·flutter
肥肥呀呀呀16 小时前
flutter getx 中.obs 的方法refresh方法
flutter
只可远观16 小时前
Flutter 泛型 泛型方法 泛型类 泛型接口
服务器·windows·flutter
肥肥呀呀呀16 小时前
ipa包安装到apple手机上
flutter
桃花仙丶18 小时前
iOS/Flutter混合开发之PlatformView配置与使用
flutter·ios·xcode·swift·dart
一名普通的程序员21 小时前
Flutter GetX 核心技巧:GetWidget 的深度解析
flutter
一名普通的程序员1 天前
Flutter GetX 核心技巧:GetView / GetWidget 的魔法解密
flutter
只可远观1 天前
Mac搭建Flutter IOS环境详细指南
前端·flutter·macos·ios