Flutter实现渐变色加描边字体效果
更新时间：2021年11月26日 14:31:55 作者：J_D_Chi
这篇文章介绍了Flutter实现渐变色描边字体效果的方法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
写在前面
实现如下图的效果，这个数字的内部和外部都有渐变色。
内容
实现描边
在网上搜索一轮，可以看到通过用 Stack，来让两个 Text叠加，并对上一个 Text设置外部描边，就可以得到如下的效果。
Stack(
alignment: Alignment.center,
children: [
Text(
'100',
style: TextStyle(
fontSize: 40,
fontWeight: FontWeight.bold,
foreground: Paint()
..style = PaintingStyle.stroke
..strokeWidth = 6
..color = Colors.black),
),
Text(
'100',
style: TextStyle(
color: Colors.white,
fontSize: 40,
fontWeight: FontWeight.bold),
),
],
)
实现渐变
颜色的渐变使用 ShaderMask来进行处理，它可以帮我们计算出文字的矩形，然后我们直接设置给 LinearGradient即可。
在使用 ShaderMask的时候，字体的颜色需要是白色。由于描边的 Text 我们使用 foreground来添加描边，故颜色的设置也应该在这里处理，不能像另一个 Text 一样，在 TextStyle 里的 color属性设置，否则会报错。
Stack(
alignment: Alignment.center,
children: [
ShaderMask(
shaderCallback: (Rect bounds) {
return LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Color(0xFF8F1FFF), Color(0xFFFF00FF)],
).createShader(Offset.zero & bounds.size);
},
child: Text(
'100',
style: TextStyle(
fontSize: 40,
fontWeight: FontWeight.bold,
foreground: Paint()
..style = PaintingStyle.stroke
..strokeWidth = 6
..color = Colors.white),
),
),
ShaderMask(
shaderCallback: (Rect bounds) {
return LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Colors.white, Color(0xFFFFBDE9)],
).createShader(Offset.zero & bounds.size);
},
child: Text(
'100',
style: TextStyle(
color: Colors.white,
fontSize: 40,
fontWeight: FontWeight.bold),
),
)
],
)
一些调整
上面已经基本实现了我们最初的效果，但仍存在一点问题，就是文字描边的边缘部分有一些露白的情况，这是因为描边的 strokeWidth有些大，超过了文字的矩形范围，而我们的渐变渲染范围只在矩形内。
在这里可以看到是有部分越过了左右边界：
如果用英文字符来看的话，会更明显：
针对这些情况，我目前是两种处理：
- 对于左右边界的情况，给文字前后添加空白字符：
- 对于上下边界的情况，调整
TextStyle里height属性：
ShaderMask(
shaderCallback: (Rect bounds) {
return LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Color(0xFF8F1FFF), Color(0xFFFF00FF)],
).createShader(Offset.zero & bounds.size);
},
child: Text(
'you',
style: TextStyle(
fontSize: 40,
height: 1.4,
fontWeight: FontWeight.bold,
foreground: Paint()
..style = PaintingStyle.stroke
..strokeWidth = 6
..color = Colors.white),
),
)
参考
How to decorate text stroke in Flutter?
How to create gradient text in Flutter
到此这篇关于Flutters实现渐变色加描边字体效果的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了Android仿微信视屏悬浮窗效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-11-11
每一个app都会有一个”退出登陆”的功能，当点击退出之后需要将所有的Activity都finish掉，开始是想将栈中的所有Activity清除掉，但是没有找到方法，后来用广播实现了。下面小编给大家分享android应用退出登录的实现方法，需要的朋友参考下2017-04-04
本篇文章主要介绍了android 跳转到应用通知设置界面的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要为大家详细介绍了Android自定义控件属性,需要的朋友可以参考下2016-02-02
这篇文章主要介绍了Android开发实现的标准体重计算器功能,结合实例形式分析了Android体重计算器的界面布局与功能实现相关操作技巧,需要的朋友可以参考下2017-12-12
这篇文章主要为大家详细介绍了Android自定义view渐变圆形动画，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-03-03
这篇文章主要为大家详细介绍了Android实现RecyclerView下拉刷新效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
这篇文章主要为大家详细介绍了Android二级缓存加载图片实现照片墙功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
Android编程实现ListView头部ViewPager广告轮询图效果
这篇文章主要介绍了Android编程实现ListView头部ViewPager广告轮询图效果,较为详细的分析了自定义ListView实现ViewPager广告图轮询的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
这篇文章主要给大家总结了在Android中封装SDK时常用的注解的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-05-05
最新评论