flutter 实现 “信用卡毛玻璃渐变新拟物设计卡片”

文章目录

• • 概要
  • 整体架构流程
  • 技术细节
  • 具体实现步骤
  • 在这里插入图片描述
  • • 完成效果
  • 小结

概要

在即时设计上看见了这样的一个信用卡毛玻璃渐变风格设计

决定把这个风格的设计用flutter实现一下并且加一些新拟物风格的阴影设计

整体架构流程

主要功能是在Flutter中使用Glassmorphism（玻璃拟态）效果创建一个简单的UI组件。整体上，定义了一个GlassCard类，这是一个无状态小部件（StatelessWidget），用于构建具有玻璃效果的卡片。

以下是代码的主要组成部分：

技术细节

导入依赖：导入了dart:ui和package:flutter/material.dart，这些是Flutter开发中常用的库。

主函数（main）：应用的入口，使用runApp函数来运行应用，并将MaterialApp作为根小部件。MaterialApp的home属性被设置为GlassCard实例。

GlassCard 类定义：

• 继承自StatelessWidget，表示这是一个无状态的小部件。
• build 方法定义了小部件的UI结构。

UI结构：

• 使用Scaffold和SafeArea提供了基本的页面结构，确保内容显示在安全区域内。

• 包含一个Container，设置背景色和内边距。

• 一个Column小部件用于垂直排列子元素。

• 具有玻璃效果的主要卡片部分由一个Container实现，其包含了Stack来组织不同的层级。

• Stack内部包括了两个主要元素：一个用于显示彩色渐变的圆形Container和一个实现玻璃效果的BackdropFilter。

• BackdropFilter使用ImageFilter.blur来实现模糊效果，并包含了一个子Container，里面定义了卡片的内容。

  样式和布局：

• 通过BoxDecoration和BorderRadius为卡片添加边框和圆角。

• 使用SweepGradient为卡片添加了一个彩色渐变背景。

• 内部的Row和Image.asset用于布局和显示图像资源。

具体实现步骤

一、创建项目

选择flutter sdk路径

起一个项目名字，这里我叫ground_glass_card，然后点击next

修改项目文件夹的查看方式，要不然误以为android项目文件夹看不见lib目录

我们后续的代码都在lib目录里写了

二、编程开始

1. 将main.dart中的代码全部删除

2. 引入flutter material包

   import 'package:flutter/material.dart';
   

3. 创建一个无状态组件 起个名字GlassCard，再创建一个main方法，并且runApp中调用

   

4. 数据线连接手机模拟运行项目

5. 先用 Container 创建一个卡片

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: GlassCard()));

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
          color: Color(0xFFADD6EB),
          padding: EdgeInsets.all(20),
          child: Column(
            children: [
              Container(
                height: 200,
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.white!, width: 0.5),
                  borderRadius: BorderRadius.circular(20),
                  color: Color(0x00ADD6EB),
                ),
              )
            ],
          )),
    );
  }
} 

6. 在容器中创建一个相对定位，里面放一个绝对定位的扇形渐变圆形区域，再设置一个覆盖整个容器的高斯模糊区域

import 'dart:ui';

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: GlassCard()));

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
          color: Color(0xFFADD6EB),
          padding: EdgeInsets.all(20),
          child: Column(
            children: [
              Container(
                height: 200,
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.white!, width: 0.5),
                  borderRadius: BorderRadius.circular(20),
                  color: Color(0x00ADD6EB),
                ),
                child: Stack(
                  children: [
                    Container(),
                    Positioned(
                        right: 2,
                        top: 50,
                        child: Container(
                          width: 200,
                          height: 200,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(200),
                            gradient: SweepGradient(
                              center: FractionalOffset.center,
                              colors: [
                                Color(0xFFE5FF35), // blue
                                Color(0xFFFFAF00), // green
                                Color(0xFF968CFF), // yellow
                                Color(0xFF8A22EC), // red
                                Color(0xFFE5FF35), // blue again to seamlessly transition to the start
                              ],
                              stops: const [0.0, 0.25, 0.5, 0.75, 1.0],
                            ),
                          ),
                        )),
                    Positioned.fill(
                        child: ClipRRect(
                      borderRadius: BorderRadius.circular(20),
                      child: BackdropFilter(
                        filter: ImageFilter.blur(sigmaX: 30, sigmaY: 30),
                        child: SizedBox(),
                      ),
                    ))
                  ],
                ),
              )
            ],
          )),
    );
  }
}

7. 将上方的小icon 放入静态资源，先把icon图标显示出来

import 'dart:ui';

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: GlassCard()));

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
            color: Color(0xFFADD6EB),
            padding: EdgeInsets.all(20),
            child: Column(
              children: [
                Container(
                  height: 200,
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.white!, width: 0.5),
                    borderRadius: BorderRadius.circular(20),
                    color: Color(0x00ADD6EB),
                  ),
                  child: Stack(
                    children: [
                      Container(),
                      Positioned(
                          right: 2,
                          top: 50,
                          child: Container(
                            width: 200,
                            height: 200,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(200),
                              gradient: SweepGradient(
                                center: FractionalOffset.center,
                                colors: [
                                  Color(0xFFE5FF35), // blue
                                  Color(0xFFFFAF00), // green
                                  Color(0xFF968CFF), // yellow
                                  Color(0xFF8A22EC), // red
                                  Color(0xFFE5FF35), // blue again to seamlessly transition to the start
                                ],
                                stops: const [0.0, 0.25, 0.5, 0.75, 1.0],
                              ),
                            ),
                          )),
                      Positioned.fill(
                          child: ClipRRect(
                        borderRadius: BorderRadius.circular(20),
                        child: BackdropFilter(
                          filter: ImageFilter.blur(sigmaX: 30, sigmaY: 30),
                          child: Container(
                            padding: EdgeInsets.all(30),
                            child: Column(
                              children: [
                                Row(
                                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                  children: [
                                    Image.asset(
                                      'assets/card_images/Brand.png',
                                      width: 30,
                                    ),
                                    Row(
                                      children: [
                                        Image.asset(
                                          'assets/card_images/icon-contactless.png',
                                          width: 16,
                                        ),
                                        SizedBox(
                                          width: 30,
                                        ),
                                        Image.asset(
                                          'assets/card_images/mastercard.png',
                                          width: 30,
                                        ),
                                      ],
                                    )
                                  ],
                                )
                              ],
                            ),
                          ),
                        ),
                      ))
                    ],
                  ),
                )
              ],
            )),
      ),
    );
  }
}

完成效果

完整代码实现及图表素材等请联系

私信获取

小结

总体来说借助UI设计，使用Flutter构建的具有玻璃效果和彩色渐变的卡片组件。它利用了Flutter的布局机制（如Stack、Row）和视觉效果（如BackdropFilter、ImageFilter），展示了如何在应用中实现现代且引人注目的设计。这个GlassCard小部件可以作为信用卡或其他类型卡片的UI展示。