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

作者：Li_阴宅 | 2024-08-06 01:45:23

踩

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目录里写了
在这里插入图片描述

二、编程开始

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

引入flutter material包

import 'package:flutter/material.dart';
1

创建一个无状态组件起个名字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),
                ),
              )
            ],
          )),
    );
  }
} 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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

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(),
                      ),
                    ))
                  ],
                ),
              )
            ],
          )),
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

将上方的小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,
                                        ),
                                      ],
                                    )
                                  ],
                                )
                              ],
                            ),
                          ),
                        ),
                      ))
                    ],
                  ),
                )
              ],
            )),
      ),
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

完成效果

在这里插入图片描述

完整代码实现及图表素材等请联系
在这里插入图片描述

私信获取

小结

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Li_阴宅/article/detail/935240