零、前言 FlutterUnit终于和大家见面了,这将是【张风捷特烈】长期维护的一个项目 欢迎star : github.com/toly1994328… 可以在github 仓库里下载apk
持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第 23 天,点击查看活动详情
为了让你的 App 更美观,主题切换已经是一个必不可少的功能了,但如果想在传统的 Android 和 iOS 上分别适配不同的主题相当繁琐。但这一切,在 Flutter 中都非常容易实现。今天我们就来看看,如何在 Flutter 中给你的 App 添加换肤功能。
Flutter 应用字体资源文件 : 在 Flutter 应用根目录下创建 fonts 目录 , 将下载的 ttf 字体放资源文件在该 fonts 目录下 ;
这本食谱包含演示如何在写Flutter应用程序时解决常见问题的食谱。 每个配方都是独立的,可以作为参考帮助您构建应用程序。
因移动设备的多样性,特别是 Android 的碎片化严重,存在各种各样的分辨率,而 Flutter 跨平台开发又需同时支持 Android 和 iOS ,为尽可能的还原设计图效果提升用户体验,屏幕适配就势在必行了。
经过上一篇文章,开发出来了第二个 Flutter 程序,接下来是给大家详细的介绍下 Flutter 的布局组件。
在混编开发中,我们经常遇到要全局替换当前字体的需求,在Native开发中,我们通常会加载Asset或者下载的字体文件,那么在Flutter中,如何直接使用Native的字体文件呢?
在 MyApp 中 , 使用 ScreenUtilInit 作为最顶层的组件 , 包裹 MaterialApp 组件 ;
.markdown-body{word-break:break-word;line-height:1.75;font-weight:400;font-size:15px;overflow-x:hidden;color:#333}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{line-height:1.5;margin-top:35px;margin-bottom:10px;padding-bottom:5px}.markdown-body h1{font-size:30px;margin-bottom:5px}.markdown-body h2{padding-bottom:12px;font-size:24px;border-bottom:1px solid #ececec}.markdown-body h3{font-size:18px;padding-bottom:0}.markdown-body h4{font-size:16px}.markdown-body h5{font-size:15px}.markdown-body h6{margin-top:5px}.markdown-body p{line-height:inherit;margin-top:22px;margin-bottom:22px}.markdown-body img{max-width:100%}.markdown-body hr{border:none;border-top:1px solid #ddd;margin-top:32px;margin-bottom:32px}.markdown-body code{word-break:break-word;border-radius:2px;overflow-x:auto;background-color:#fff5f5;color:#ff502c;font-size:.87em;padding:.065em .4em}.markdown-body code,.markdown-body pre{font-family:Menlo,Monaco,Consolas,Courier New,monospace}.markdown-body pre{overflow:auto;position:relative;line-height:1.75}.markdown-body pre>code{font-size:12px;padding:15px 12px;margin:0;word-break:normal;display:block;overflow-x:auto;color:#333;background:#f8f8f8}.markdown-body a{text-decoration:none;color:#0269c8;border-bottom:1px solid #d1e9ff}.markdown-body a:active,.markdown-body a:hover{color:#275b8c}.markdown-body table{display:inline-block!important;font-size:12px;width:auto;max-width:100%;overflow:auto;border:1px solid #f6f6f6}.markdown-body thead{background:#f6f6f6;color:#000;text-align:left}.markdown-body tr:nth-child(2n){background-color:#fcfcfc}.markdown-body td,.markdown-body th{padding:12px 7px;line-height:24px}.markdown-body td{min-width:120px}.markdown-body blockquote{color:#666;padding:1px 23px;margin:22px 0;border-left:4px solid #cbcbcb;background-color:#f8f8f8}.markdown-body blockquote:after{display:block;content:""}.markdown-body blockquote>p{margin:10px 0}.markdown-body ol,.markdown-body ul{padding-left:28px}.markdown-body ol li,.markdown-body
起点读书客户端一直紧跟新技术的潮流,从很早开始,就在进行Flutter的尝试,在筹备了许久之后(移除了包大小的KPI指标),我们终于在最新的业务开发中,使用了Flutter。
R语言是即使一款功能强大的统计语言,也是一款内容丰富的绘图工具。从原则上讲,你可以用R语言绘制出你能想到的任何图形。
前文中,我与你介绍了Flutter的主题设置,也就是将视觉资源与视觉配置进行集中管理的机制。
应用栏是各种应用程序中最常用的组件之一。它可用于容纳搜索字段、以及在页面之间导航的按钮,或者只是页面标题。由于它是一个如此常用的组件,因此 Flutter 为该功能提供了一个名为AppBar的专用小部件。
这是一套 张风捷特烈 出品的 Flutter&Flame 系列教程,发布于掘金社区。如果你在其他平台看到本文,可以根据对于链接移步到掘金中查看。因为文章可能会更新、修正,一切以掘金文章版本为准。本系列文章一览:
Text widget 可以用来在应用内创建带样式的文本。文本作为UI最基本的元素,最基本的用法有这些:
通常情况下,不会直接将MediaQuery当作一个控件,而是使用MediaQuery.of获取当前设备的信息,用法如下:
美团外卖商家端基于 FlutterWeb 的技术探索已久,目前在多个业务中落地了App、PC、H5的多端复用,有效提升了产研的整体效率。在这过程中,性能问题是我们面临的最大挑战,本文结合实际业务场景进行思考,介绍美团外卖商家端在 FlutterWeb 性能优化上所进行的探索和实践,希望对大家能有所帮助或启发。
上一篇 《Flutter 知识集锦 | Dart 开发命令行工具》 介绍了,如何通过 Dart 开发一个命令行脚本工具。本篇将结合一个具体的场景,介绍一下它的使用。toly 命令行工具目前已经开源并上传到 pub :
「ETextField」 组件是 「Flutter Element」 组件系列中的输入组件,封装了系统的 「TextField」 组件,封装了一些常用的功能,并解决了两个常见的错误,详见:
在以前的 《Flutter 上默认的文本和字体知识点》 和 《带你深入理解 Flutter 中的字体“冷”知识》 中,已经介绍了很多 Flutter 上关于字体有趣的知识点,而本篇讲继续介绍 Flutter 上关于 Text 的一个属性:FontFeature , 事实上相较于 Flutter ,本篇内容可能和前端或者设计关系更密切。
textAlign:文本的对齐方式;可以选择左对齐、右对齐还是居中。注意,对齐的参考系是Text widget本身
首先在项目中创建fonts目录,然后将将ttf文件放到该目录下,然后在pubspec文件中添加该字体文件,如:
现在的手机品牌和型号越来越多,导致我们平时写布局的时候会在个不同的移动设备上显示的效果不同,
这次的 Flutter 小技巧是字体渲染,虽然是小技巧但是内容略长,可能大家在日常开发中不会特别关心字体相关的部分,而这将是一篇你平时可能用不到 ,但是遇到问题就会翻出来的文章。
把文字渲染到屏幕上主要是通过加载字体获得字形(Glyph)纹理,然后通过字体测量计算出字体左上角的位置和宽高,然后再把纹理贴到2D方块中。字体的存储主要有两种方式:
Kotlin,由 JetBrains 于 2011.07 推出,一款面向 JVM 在 Java 虚拟机上运行的静态类型编程语言。
持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第 5 天,点击查看活动详情
我们都知道在 Flutter 中可以通过 fontFamily 来引入第三方字体,例如通常会将 svg 图标转换为 iconfont.ttf 来实现矢量图标的入,而一般情况下我们是不会设置 fontFamily 来使用第三方字体, 那默认情况下 Flutter 使用的是什么字体呢?
你需要做的第一件事就是找到一个包含 “.ttf” 文件的开源图标库。那 “.ttf” 是什么文件?
本系列可能会伴随大家很长时间,这里我会从0开始搭建一个「网易云音乐」的APP出来。
持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第 7 天,点击查看活动详情
老孟导读:大家好,这是【Flutter实战】系列文章的第二篇,这一篇讲解文本组件,文本组件包括文本展示组件(Text和RichText)和文本输入组件(TextField),基础用法和五个案例助你快速掌握。
已经实现好的模块功能 , 完全可以复用 , 避免重复造轮子 , 这些功能可以封装在 Flutter 包中 ;
与iOS、Android和React类似,作为一个UI框架,Flutter自然也提供了很多UI控件。而文本、图片和按钮,则是这些不同的UI框架中构建视图都要用到的三个最基本的控件。
Flutter内置了10多种Button(按钮)类控件供我们使用,了解这些控件有助于提高我们的开发速度。
Flutter开发中有一个非常重要的理念,即一切皆为组件。Flutter中Widget不仅可以表示UI元素,也可以布局元素、动画、装饰效果。
持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第 27 天,点击查看活动详情
在这篇文章中,将带着大家一起在Windows平台上快速搭建Flutter的开发环境,同时会将搭建Flutter开发环境中的一些技巧和经验分享给大家。
* 以 Text 的部分源码为例,说明 StatelessWidget 的构建过程。
1 OverflowBox 对其子项施加不同约束的widget,它可能允许子项溢出父级 2 构造函数 OverflowBox({ Key key, this.alignment = Alignment.center, this.minWidth, this.maxWidth, this.minHeight, this.maxHeight, Widget child, }) 3 常用属性 3.1 alignment:对齐方式 alignment:Alig
注:设置AppBar之后,单独在build内设置这行代码会失效 SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);
对于写过Flutter的开发者来说,我敢肯定,大部分的开发者都不能准确预测这次Hot Reload之后,布局是否是自己想要的结果。Flutter的布局与Native的布局方式非常不同,所以,了解Flutter这茫茫多的布局组件,是我们准确布局的基础。
如下所示,在上一篇中我们通过绘制,自定义了一个秒表盘的组件。本文将对该组件进行实际的应用,让其实现秒表运动的展示功能。
通过这篇文章,我将向大家介绍下关于设计的一些基本知识,让广大开发者在平时的开发中,可以更好的和设计、产品合作(撕逼)。
在 Flutter 中,需要在根目录下的 pubspec.yaml 文件中配置资源的路径,资源才能被打包使用。现在,看看如何配置资源吧。
https://www.fluttericon.com/ 可以根据需求挑选合适的 icon 图标 , 生成 ttf 文件 ;
移动的开发中,大家可能最头疼的就是不同设备的规格了,现在设备这么多,如何才能在诸多的设备中找到合适的widget的位置来进行绘制呢?
持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第 22 天,点击查看活动详情
领取专属 10元无门槛券
手把手带您无忧上云