flutter 实现 “信用卡毛玻璃渐变新拟物设计卡片”
信用卡毛玻璃渐变新拟物卡片
在即时设计上看见了这样的一个信用卡毛玻璃渐变风格设计
决定把这个风格的设计用flutter实现一下
一、创建项目
选择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>[
Color(0xFFE5FF35), // blue
Color(0xFFFFAF00), // green
Color(0xFF968CFF), // yellow
Color(0xFF8A22EC), // red
Color(0xFFE5FF35), // blue again to seamlessly transition to the start
],
stops: const <double>[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(),
),
))
],
),
)
],
)),
);
}
}
- 将上方的小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>[
Color(0xFFE5FF35), // blue
Color(0xFFFFAF00), // green
Color(0xFF968CFF), // yellow
Color(0xFF8A22EC), // red
Color(0xFFE5FF35), // blue again to seamlessly transition to the start
],
stops: const <double>[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,
),
],
)
],
)
],
),
),
),
))
],
),
)
],
)),
),
);
}
}
最终实现效果
更多完整代码实现及图片素材请联系
私信获取
