文章目录
概要整体架构流程技术细节具体实现步骤在这里插入图片描述完成效果
小结
概要
在即时设计上看见了这样的一个信用卡毛玻璃渐变风格设计 决定把这个风格的设计用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目录里写了
二、编程开始
将main.dart中的代码全部删除 引入flutter material包 import 'package:flutter/material.dart';
创建一个无状态组件 起个名字GlassCard，再创建一个main方法，并且runApp中调用 数据线连接手机模拟运行项目
先用 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),
),
)
],
)),
);
}
}
在容器中创建一个相对定位，里面放一个绝对定位的扇形渐变圆形区域，再设置一个覆盖整个容器的高斯模糊区域
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
),
),
)),
Positioned.fill(
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 30, sigmaY: 30),
child: SizedBox(),
),
))
],
),
)
],
)),
);
}
}
将上方的小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
),
),
)),
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展示。
文章链接
发表评论