首页 > 其他分享 >flutter 实现 “信用卡毛玻璃渐变新拟物设计卡片”

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

时间:2024-01-26 18:14:16浏览次数:24  
标签:200 Container Color 新拟 child flutter 毛玻璃 GlassCard

信用卡毛玻璃渐变新拟物卡片

在即时设计上看见了这样的一个信用卡毛玻璃渐变风格设计
决定把这个风格的设计用flutter实现一下

一、创建项目

选择flutter sdk路径


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


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


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

二、编程开始

  1. 将main.dart中的代码全部删除
  2. 引入flutter material包
    import 'package:flutter/material.dart';
    
  3. 创建一个无状态组件 起个名字GlassCard,再创建一个main方法,并且runApp中调用

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


  2. 先用 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. 在容器中创建一个相对定位,里面放一个绝对定位的扇形渐变圆形区域,再设置一个覆盖整个容器的高斯模糊区域
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. 将上方的小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,
                                        ),
                                      ],
                                    )
                                  ],
                                )
                              ],
                            ),
                          ),
                        ),
                      ))
                    ],
                  ),
                )
              ],
            )),
      ),
    );
  }
}

完整代码实现请联系

私信获取

标签:200,Container,Color,新拟,child,flutter,毛玻璃,GlassCard
From: https://www.cnblogs.com/ZhangZiYangDeBoKe/p/17990386

相关文章

  • Flutter3 TV 一百行自定义实现 tabbar tabview 联动
    系统自带的tabbar焦点在TV端无法很好的使用使用card_swiper组件作为tabviewimport'package:card_swiper/card_swiper.dart';import'package:flutter/material.dart';voidmain()=>runApp(MyApp());classMyAppextendsStatefulWidget{constMyApp({su......
  • Flutter配置Webview内嵌web
    IntelliJIDEA开发实战1、根据官网下载指定版本并且配置好环境变量https://docs.flutter.dev/get-started/install/windows2、idea工具开发工具中,下载插件flutter和dart3、pubspec.yaml中添加依赖...dependencies:flutter:#english_words:^3.1.0flutter_inap......
  • Win终端+WSL2 美化记录 上篇 启用毛玻璃
    微软还是太狗了,这么好看的毛玻璃效果藏着掖着,今天有幸看到,就有了本篇踩坑记录打开毛玻璃效果官方文档:https://learn.microsoft.com/zh-cn/windows/terminal/custom-terminal-gallery/frosted-glass-theme标签页毛玻璃设置-->外观-->开启Useacrylicmaterialintheta......
  • Flutter框架渲染流程与使用
    转自:https://www.cnblogs.com/zhou--fei/p/17068412.html Flutter简述Flutter是一个UI框架,可以进行移动端(iOS,Android),Web端,桌面端开发,它是一个跨平台解决方案。Flutter的特点:美观,快速,高效,开放。美观:Flutter内置了美丽的MaterialDesign和Cupertinowidget,方便开发出美......
  • Flutter 表单
    Flutter中常见的表单有TextField单行文本框,TextField多行文本框、CheckBox(多选按钮)、Radio(单选按钮)、SwitchCheckboxListTile、RadioListTile、SwitchListTile、Slide。TextField表单的基本用法TextField表单常见属性:示例classTextFieldPageextendsStatefulWidget{......
  • 运行新建Flutter项目, 报错Exception in thread “main“ java.net.ConnectException:
    新建项目后,直接使用demo进行安卓真机运行时报错Exceptioninthread"main"java.net.ConnectException:Connectiontimedout:connect atjava.base/sun.nio.ch.Net.connect0(NativeMethod) atjava.base/sun.nio.ch.Net.connect(Net.java:579) atjava.base/sun.nio.ch.N......
  • Flutter计算文本高度
    在开发中我们需要去计算文本的高度,从来去设置控件的高度,在flutter中我们可以使用TextPainter来计算文本高度//获取文字高度text:文字内容fontSize:字体大小fontWeight:字重height:行高maxWidth:最大宽度,maxLines:最大行数staticdoublegetTextContextSizeHeight(String......
  • flutter 生命周期
    Stateless无状态组件//Stateless无状态组件比较简单就是一个build函数,每次外部新状态压入,进行调用//当Widget不再需要时,比如在页面切换或者被移除时,Flutter会销毁这些Widget。//对于StatelessWidget来说,它没有内部状态(即无可变的变量)classLeftPageextendsStatelessWidg......
  • 安装android Studio 以及flutter
    开发装备的环境配置java环境系统变量里面添加JAVA_HOME软后在path中添加java环境配置查看java是否安装成功 然后安装 系统变量添加 ANDROID_HOME  在path中添加 然后在path中添加flutter环境变量win+r/cmd ---flutterdoctor打开网址 https://......
  • Flutter开发:Visual Studio Code使用
    1创建您的第一个Flutter项目启动VisualStudioCode并打开命令面板(使用F1、Ctrl+Shift+P或Shift+Cmd+P)。开始输入“flutternew”。选择Flutter:NewProject命令。2使用Refactor抽取函数2.1右键点击要重构的代码段(在本例中为Text),然后从下拉菜单中选择Refactor.........