前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >Flutter 边框阴影

Flutter 边框阴影

作者头像
赵哥窟
发布于 2021-04-25 06:33:32
发布于 2021-04-25 06:33:32
3.6K00
代码可运行
举报
文章被收录于专栏:日常技术分享日常技术分享
运行总次数:0
代码可运行

截屏2021-04-22 14.15.22.png

要实现如果的边框阴影效果

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Container(
      height: ScreenAdaper.width2px(78),
      decoration: BoxDecoration(
        border: new Border.all(
          color: Colors.grey.withOpacity(0.2), //边框颜色
          width: 1, //边框宽度
        ), // 边色与边宽度
        color: Colors.white, // 底色
        boxShadow: [
          BoxShadow(
            blurRadius: 10, //阴影范围
            spreadRadius: 0.1, //阴影浓度
            color: Colors.grey.withOpacity(0.2), //阴影颜色
          ),
        ],
        borderRadius: BorderRadius.circular(10), 
      ),
    );
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
FlutterComponent最佳实践之Shadow怎么就这么简单
在Flutter中,Container可以使用BoxDecoration来添加Shadow,如果是单独的Widget,可以通过DecoratedBox来添加阴影。
用户1907613
2022/04/01
1.2K0
FlutterComponent最佳实践之Shadow怎么就这么简单
flutter开发技巧汇总[持续更新]
1、你应该会碰到initState会被多次执行的问题,通常发生在tabView的切换时,此时你可能要了解一下这个接口了。
老码小张
2018/08/08
1.8K0
【Flutter 组件集录】 DecoratedBox | 8 月更文挑战
DecoratedBox 组件可能单独使用的频率不是很高,因为它被集成在了 Container 组件中,但装饰的使用方式是共通的,源码中说 DecoratedBox 会在其孩子的前景或背景上绘制 Decoration 装饰对象。这说明 Decoration 才是装饰的重点,我们需要了解或自定义 Decoration。
张风捷特烈
2022/03/18
5590
【Flutter 组件集录】 DecoratedBox | 8 月更文挑战
Flutter TolyUI 框架#02 | Popover 与 Tooltip 设计
TolyUI 是 张风捷特烈 打造的 Fluter 全平台应用开发 UI 框架。具备 全平台、组件化、源码开放、响应式 四大特点。可以帮助开发者迅速构建具有响应式全平台应用软件:
张风捷特烈
2024/05/17
4880
Flutter TolyUI 框架#02 |  Popover 与 Tooltip 设计
Flutter 黏贴卡动画效果
设计非常出色的动画会使UI感觉更直觉,应用程序具有光滑的外观和感觉,改善用户体验。Flutter的动画支持使实现各种动画类型变得容易。许多小部件,特别是“Material”小部件,都伴随着其设计规范中所描述的标准运动效果,但是与此同时,也可以自定义这些效果。
老孟Flutter
2021/04/22
2.2K0
Flutter 黏贴卡动画效果
Flutter 绘制实践 | 路径篇 - 阴影模糊
说起 Flutter 绘制阴影,很多朋友可能都知道 Canvas 本身有 drawShadow 方法。可以根据入参的 Path 路径,绘制阴影。就像我们男人分不清口红色号一样,觉得口红就是红色,很多编程者也会觉得阴影就是影子。如果一个方法就能绘制出完美的阴影,也不会单独写篇文章。
张风捷特烈
2023/02/15
1.3K0
Flutter 绘制实践 | 路径篇 - 阴影模糊
flutter截取当前widget并分享
Flutter中截图的主要用到了类RepaintBoundary。 1、在需要截图的widget外包裹一层RepaintBoundary RepaintBoundary( key: rep
徐建国
2021/11/30
1.1K0
flutter实现分割线的三种方法
第一种:Divider(Double:height,Double:indent,color:color)
徐建国
2021/08/03
6.7K0
Flutter 组件集录 | InheritedWidget 共享数据
在 Flutter 应用开发中,数据的跨节点共享是一个非常重要的事。下面通过一个例子说明一下:
张风捷特烈
2024/03/08
2890
Flutter 组件集录 | InheritedWidget 共享数据
基于flutter3.x+material-design3仿微信App应用实战
flutter3-wchat一款基于flutter3+dart3+material-ui技术构建的跨多端仿微信聊天项目。
andy2018
2024/02/07
1.1K0
【Flutter 实战】自定义动画-涟漪和雷达扫描
此动画通过 CustomPainter 绘制配合 AnimationController 动画控制实现,定义动画控制部分:
老孟Flutter
2020/09/11
1.5K0
【Flutter 实战】自定义动画-涟漪和雷达扫描
Flutter 拖拽控件Draggable看这一篇就够了
Draggable组件有2个必须填写的参数,child参数是子控件,feedback参数是拖动时跟随移动的组件,用法如下:
老孟Flutter
2020/03/10
2.5K0
flutter制作具有自定义导航栏的渐进式 Web 应用程序
我们将整个页面分成几个部分,以便于制定,我建议您这样做以获得更好的编程,让我们更详细地查看这些部分, NavigationBar()、 DashBoard()、 CalendarSpace(), 首先我们可以做导航栏部分
徐建国
2021/10/04
3K0
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Al
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心
卓伊凡
2025/02/04
630
【Flutter实战】定位装饰权重组件及柱状图案例
第一次鸦片战争,是1840年至1842年英国对中国发动的一场战争,也是中国近代史的开端。闭关锁国后的清朝逐步落后于世界大潮,但在外贸中,一直处于贸易顺差地位。 为了扭转对华贸易逆差,英国开始向中国走私毒品鸦片。1838年冬,道光帝派湖广总督林则徐为钦差大臣,赴广东查禁鸦片。英国政府以此为借口,决定派出远征军侵华,英国国会也通过对华战争的拨款案。
老孟Flutter
2020/09/11
1.4K0
【Flutter实战】定位装饰权重组件及柱状图案例
Flutter | 常用组件分类、概述、实战
AppBar(title属性,Text组件; action:动作响应;!!!! titleSpacing:标题文字间距; toolbarOpacity:标题透明度;)
凌川江雪
2020/06/16
4.3K0
Flutter 转场动效大合集
动画经常会用于场景切换,比如滑动,缩放,尺寸变化,为应对这样的场景转换需要,Flutter 提供了 Transition 系列的动画组件,可以让场景转换动画变得更加简单。本篇为你整理了常用的 Transition 组件的应用。
玖柒的小窝
2021/11/05
1.2K0
Flutter 转场动效大合集
FlutterSliverList圆角图片
在学习过程中发现,*Material组件中添加borderRadiu然后使用Stack添加图片,当图片的填充方式为BoxFit.cover时,图片会把圆角覆盖掉,也就是会溢出。
徐建国
2021/08/02
1.2K0
【Flutter 专题】62 图解基本 Button 按钮小结 (二)
和尚继续尝试 Flutter 的基本按钮;今天和尚学习 MaterialButton 系列相关 Button;该系列以 MaterialButton 为父类,衍生出 RaisedButton 凸起按钮,FlatButton 扁平按钮和 OutlineButton 边框按钮;可根据不同场景灵活运用;
阿策小和尚
2019/09/25
1.4K0
【Flutter 专题】62 图解基本 Button 按钮小结 (二)
Flutter 实现登录 UI
本文,我将解析怎么前构建一个用户交互的登录页面。这里,我使用 TextField 挂件,这方便用户输入用户名和密码。还使用 FlatButton 挂件,来处理一些动作。当然,我还使用了 Image 挂件来设定登录页面的 logo。
Jimmy_is_jimmy
2022/10/05
8150
Flutter 实现登录 UI
推荐阅读
相关推荐
FlutterComponent最佳实践之Shadow怎么就这么简单
更多 >
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文