Flutter开发 - 总结了两种设置阴影比较友好的方式

最新推荐文章于 2024-06-04 19:25:29 发布
最新推荐文章于 2024-06-04 19:25:29 发布
阅读量1.7k 收藏
点赞数
分类专栏： Flutter实用开发技巧合集 文章标签： flutter flutter阴影 card 阴影 圆角阴影
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/CodingFire/article/details/114667644
版权
本文总结了在Flutter开发中设置阴影的两种方法：1) 使用Card组件，简单但有限制；2) 使用Container配合系统阴影，可自定义但效果不均匀。示例代码和实际应用中的注意事项一并分享，帮助提升 Flutter UI 设计效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

给view加阴影这个需求还算是比较常见的，在flutter中也同样，回顾过去的开发内容，一共用过两种加阴影的方式，今天分享给大家，看下效果图：
在这里插入图片描述

1.使用Card组件，card组件加的阴影更明显一些吧，而且是四周围绕的，使用起来简单，但是颇有限制，有些地方使用不是很友好，具体案例一时没想起来，大家可以在使用中体会下有哪些限制：

//对了，在使用时，记得外层包一层Container使用，方便设置边距
Container(
            margin: EdgeInsets.only(
了解本专栏 订阅专栏 解锁全文 超级会员免费看
【Flutter 问题系列第 49 篇】在 Flutter 中如何给组件设置背景色、圆角、边框、形状、阴影、渐变色、背景图片等效果
“Allen Su”的博客
11-21 5810
在 Flutter 中如何给组件设置背景色、圆角、边框、形状、阴影、渐变色、背景图片等效果
Flutter BoxShadow(绘制阴影)+Container+BoxDecoration
2401_83692985的博客
05-04 1076
如果你看到了这里，觉得文章写得不错就给个赞呗？如果你觉得那里值得改进的，请给我留言。一定会认真查询，修正不足。最后针对Android程序员，我这边给大家整理了一些资料，包括不限于高级UI、性能优化、移动架构师、NDK、混合式开发（ReactNative+Weex）微信小程序、Flutter等全方面的Android进阶实践技术；希望能帮助到大家，也节省大家在网上搜索资料的时间来学习，也可以分享动态给身边好友一起学习！《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》点击传送门。
Flutter 绘制实践 | 路径篇 - 阴影模糊
Android23333的博客
01-30 1432
欢迎来到 Flutter 绘制实践系列，本文有文章版和视频版。视频发布在 bilibli 同名账号下，文章首发于掘金平台。今天来的话题是： 绘制阴影
Flutter 阴影框效果
anakin.jin的专栏
05-27 5687
记录一下，防止忘记 :) 更详细的说明看另一朋友的：https://ninghao.net/video/6443 每一个Item的实现代码： Container( height: 80, margin: EdgeInsets.only(top: 16, left: 38, right: 33), decoration: BoxDecoration( color: Theme ..
flutter 图片加阴影
weixin_44911775的博客
12-09 848
color是阴影颜色；offset是偏移位置，偏左边偏右边偏上边偏下边；blurRadius是模糊程度，1是实体，数值越大越糊；spreadRadius阴影扩散的程度 取值可以正数,也可以是负数，负数就小，看着调。
Flutter-完整开发实战详解(一、Dart-语言和-Flutter-基础)
最新发布
2401_85122662的博客
06-04 1040
var 可以定义变量，如 var tag = “666” ，这和 JS 、 Kotlin 等语言类似，同时 Dart 属于动态类型语言，支持闭包。Dart 中 number 类型分为 int 和 double ，其中 java 中的 long 对应的也是 Dart 中的 int 类型。Dart 中没有 float 类型。Dart 下只有 bool 型可以用于 if 等判断，不同于 JS 这种使用方式是不合法的 var g = “null”;if(g){}。
flutter_material_color_picker：材质颜色选择器，可以自定义颜色。 分两步选择，第一个主要颜色和第二个阴影
02-03
- 在 `flutter_material_color_picker` 中，颜色选择器遵循 Material Design 规范，提供了一种符合用户习惯的交互方式。 3. **Color Picker** - Color picker 是一个 UI 元素，让用户可以选择所需的颜色。在 `...
写给前端工程师的-Flutter-详细教程
2401_84544495的博客
05-01 198
=~/=&=|=// 想想这样省了多少变量声明甚至可以重写操作符// ···注：重写==，也需要重写ObjecthashCodegetter@override@overrideassert(p1!= p3);这点在diff对象的时候尤其有用。
flutter 设置阴影
weixin_40841731的博客
06-12 7499
1、主要是boxShadow 这个属性 Container( width: 50, height: 50, decoration: BoxDecoration( borderRadius: BorderRadius.all(Radius.circular(28)), boxShadow: [ BoxShadow( color: Colors.red, //底色,阴影颜色 offset: Offset(0, 0), //阴.
flutter 自定义card阴影
01-03
最近在用flutter写web程序，简直是炼狱模式。。然后遇到个需求，原本的Card阴影无法满足产品需求，需要像IOS 那种超级高大上的，似影非影的效果。。（简直分分钟想打死产品） 一开始，当然都是百度了，于是百度到了一个方法：BoxShadow！ 于是高高兴兴开干了，代码如下 嗯。。。看上去好像没啥毛病，Y轴方向偏移7，blurRadius：模糊延申14，spreadRadius：不模糊的不要延申，为0 跑到安卓的浏览器上 简直Perfect！！！完工交差。。。（just我以为） 看到测试淫笑的眼神，我就知道了自己的图样图森破，他拿着自己高大上的iPhone给我截了个图： WTF？？？
Flutter自定义控件-RenderObject-Canvas绘制内阴影(InnerShadow)｜flutter动画（准备）
weixin_43619292的博客
07-27 1955
Flutter自定义控件-RenderObject-Canvas绘制内阴影(InnerShadow)｜flutter动画（准备）
【无标题】Flutter的BoxShadow阴影
等待岁月
01-04 2663
Flutter的BoxShadow阴影 我们经常使用flutter阴影效果，flutter的阴影比如Container中设置decoration。 Container( padding: EdgeInsets.only(left: 16), decoration: BoxDecoration(color: Colors.white, boxShadow: [ BoxShadow(
[Flutter] BoxShadow阴影详解（blurRadius与spreadRadius的区别）
ehahehahe的学习笔记
03-12 1万+
Flutter开发中，我们常常需要给物体一个阴影，以增加立体感。如： Container( height: 100, width: 100, decoration: BoxDecoration( color: Colors.white, boxShadow: [ BoxShadow( color: Colors.black.withOpacity(0.5), // 阴影的颜色 offset: Offset(10, 20),
【flutter】同时实现Container内阴影与外阴影
zhongyanxl的博客
05-07 7819
【flutter】同时实现Container内阴影与外阴影
Flutter BoxDecoration 实现圆形、圆角、下划线、阴影、渐变色背景
xhuww的博客
07-05 1万+
BoxDecoration为提供各种装饰Widget的方法，本文使用BoxDecoration 实现Widget 圆形、圆角、下划线、阴影、渐变色背景。
Flutter开发 - Null check operator used on a null value（flutter大量奇怪异常）
热门推荐
CodingFire的博客
11-20 2万+
最近通过sentry平台，看到了很多奇怪的异常，有些异常甚至达到了百万级别，仔细去看才发现问题所在，报错是这样的： _CastError Null check operator used on a null value change_notifier.dart in ChangeNotifier.notifyListeners at line 218 看到之后根据对应提示找到了代码，发现是notifyListeners报的，也就是说，在notifyListeners的时候，被通知的‘对象’已经被销毁了，
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

CodingFire

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值