十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
这篇文章主要讲解了“Flutter的开发方法是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Flutter的开发方法是什么”吧!
红岗网站制作公司哪家好,找创新互联!从网页设计、网站建设、微信开发、APP开发、自适应网站建设等网站项目制作,到程序开发,运营维护。创新互联于2013年创立到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联。
开始
FLutter可以在Windows、Linux、Mac上进行开发,开发工具可以使用VS Code、Android Studio、IDEA等,本文推荐使用Android Studio,主要在于Android Studio提供了FLutter Inspector工具,可以实时审查元素,解决界面的显示适配问题。
搭建开发环境
搭建环境的主要步骤:
下载SDK,下载地址。
配置PATH,如果使用Mac或者Linux系统,一定要将bin目录添加到系统PATH。
配置依赖源镜像,这一步很重要,并且需要将脚本放到启动shell中。
export PUB_HOSTED_URL=https://pub.flutter-io.cn export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
执行flutter doctor,这一步耗时会很长,需要耐心等耐。
安卓开发工具及插件,配置编辑器。
配置编辑器
主要是给编辑器安装相应的插件。
VS Code安装flutter插件,Android Studio和IDEA需要安装Flutter和Darter插件。
其中Android Studio和IDEA基本一样,跟VS Code的主要区别在于:
VS Code提供了更好的代码提示功能
IDEA提供了Flutter Inspector,可实时审查页面元素
可根据个人喜好、习惯选择使用。
推荐网站
在安装、配置过程中,可参考以下中文资料:
Flutter中国
Flutter中文文档
主要技术点
Dart
Flutter项目的开发语言是Dart,Dart 是由 Google 开发的一种面向对象语言,可以编译成 ARM 和 x86 代码直接运行在 iOS、Android 设备上。
推荐先学习Dart语言官方教程,对Dart有初步了解之后再进行Flutter的学习和开发。
界面开发
终于可以进入Flutter本身了。
Widget
Flutter中页面所有元素都是Widget,又分为StatelessWidget和StatefulWidget。
顾名思义,StatelessWidget 就是指无可变状态的 Widget,这类 Widget 的状态只由创建 Widget 时传入的参数决定,一旦创建,其状态、在页面上的展示效果也就不再改变。
而 StatefulWidget 内部则存在着可变状态。当通过setState改变这些状态时,Flutter 会重新渲染该 Widget。
布局
在实际开发中,主要使用了Row、Column、Container、Expanded、Stack等。
Row、Column提供了水平、垂直方向的布局,Stack提供了堆叠方式的布局,各种容器有不同的特性,可根据实际页面需求选择搭配不同的布局。
推荐学习 官方文档 及 国内维护的中文翻译。
主要插件
话题切回到诗词汇APP,本APP收集了4000余位诗人的30多万首诗词,提供了古诗词的查询、收藏、朗诵功能,并且实现了初步的社区功能。
项目目录结构如下:
开发这个APP大概用了一个月的业余时间,每天抽出一两个小时,这样折算为工作日,大概是两个星期左右,开发效率还是很高的。
下面跟大家分享一下主要功能及所使用的一些插件。
切换主题
为了实现实时切换主题颜色,使用了状态管理插件。
flutter_redux 。
极光推送
在国内厂商中,极光是少有的对Flutter提供了技术支持的,这里给极光大大的。
jpush_flutter
QQ的Flutter插件提供了基本的登录、分享功能。
flutter_qq
微信
微信的Flutter插件提供的功能稍微丰富,包含了支付、登录、分享、启动小程序的功能。
fluwx
事件总线Event Bus
大名鼎鼎的event_bus也提供了对Flutter的支持。
event_bus
音频
录音及播放音频也有很好的支持。
audio_recorder audioplayer2
其它
其它诸如加载HTML、Toast提示、图片选择器、图片加载等也有较好的插件支持。
可在 官方插件库 查询相关的插件。
坑
安装、升级
FLutter的安装、升级会经常遇到卡死的问题,主要原因就是使用了Google的源,但是莫名的,即使使用了科学上网、设置了国内镜像后,也会遇到同样的问题。只能通过反复的flutter doctor 或 flutter upgrade直到解决问题。
开发
由于笔者最近一段时间Android项目做得较多,习惯了Android的XML布局方式,对于在代码中编写页面的形式一开始还有些不习惯,但是在按照官方例子实践了几个页面后,用代码写页面的优势就体现出来了。
在页面已经设计好的情况下,开发的时候脑海中就构思出一个Widget树,从根节点到每一个节点一级一级嵌套下去,自然而然的布局就写好了。
Dialog弹出框
使用Dialog的时候,弹出Dialog的Context及Dialog本身都会压入栈中,所以让Dialog消失的方法是Navigator.of(ctx).pop(),这样的设计既不同于Android也不同于iOS,也许跟Flutter本身所有元素都是Widget的设计有关。
编译
在编译Android版本的时候很顺畅,没有遇到任何问题。但是在编译iOS版本的时候,遇到了很多问题,直到现在也没有解决。
问题在于使用了audio_recorder和flutter_qq两个插件,而这两个插件一个要求编译选项需要设置!use_framework,一个要求不能设置,造成了冲突,在实际编译中一直编译不通过。
感谢各位的阅读,以上就是“Flutter的开发方法是什么”的内容了,经过本文的学习后,相信大家对Flutter的开发方法是什么这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!