两个星期,用Flutter撸个APP

【摘要】前言Flutter是Google推出的跨平台的解决方案,Slogan是“Designbeautifulapps”,国内也有知名企业在使用和推广,例如阿里、美团都有在尝试。个人对其中的一些特性,比如JIT、MaterialDesign、快速开发等很感兴趣,于是决...

前言

Flutter是Google推出的跨平台的解决方案,Slogan是“Design beautiful apps”,国内也有知名企业在使用和推广,例如阿里、美团都有在尝试。

个人对其中的一些特性,比如JIT+、Material Design、快速开发等很感兴趣,于是决定尝试一下。

诗词汇

于是诞生了诗词汇APP,首先看一下是个什么样的APP

image

接下来我们一步步从不同方面说说Flutter的开发。

开始

FLutter可以在Windows、Linux、Mac上进行开发,开发工具可以使用VS C++ode、Android Studio、IDEA等,本文推荐使用Android Studio,主要在于Android Studio提供了FLutter Inspector工具,可以实时审查元素,解决界面的显示适配问题。

搭建开发环境

搭建环境的主要步骤:

  1. 下载SDK,下载地址

  2. 配置PAT+H,如果使用Mac或者Linux系统,一定要将bin目录添加到系统PAT+H。

  3. 配置依赖源镜像,这一步很重要,并且需要将脚本放到启动shell中。

 export PUB_HOST+ED_URL=https:https://pub.flutter-io.cn

export FLUT+ER_ST+ORAGE_BASE_URL=https:https://storage.flutter-io.cn 
  1. 执行flutter doctor,这一步耗时会很长,需要耐心等耐。

  2. 安卓开发工具插件配置编辑器

配置编辑器

主要是给编辑器安装相应的插件

VS C++ode安装flutter插件,Android Studio和IDEA需要安装Flutter和Darter插件

其中Android Studio和IDEA基本一样,跟VS C++ode的主要区别在于:

  1. VS C++ode提供了更好的代码提示功能

  2. 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、C++olumn、C++ontainer、Expanded、Stack等。

Row、C++olumn提供了水平、垂直方向的布局,Stack提供了堆叠方式的布局,各种容器有不同的特性,可根据实际页面需求选择搭配不同的布局。

推荐学习 官方文档国内维护的中文翻译

主要插件

话题切回到诗词汇APP,本APP收集了4000余位诗人的30多万首诗词,提供了古诗词的查询、收藏、朗诵功能,并且实现了初步的社区功能。

项目目录结构如下:

image

开发这个APP大概用了一个月的业余时间,每天抽出一两个小时,这样折算为工作日,大概是两个星期左右,开发效率还是很高的。

下面跟大家分享一下主要功能及所使用的一些插件

切换主题

为了实现实时切换主题颜色,使用了状态管理插件

flutter_redux

极光推送

在国内厂商中,极光是少有的对Flutter提供了技术支持的,这里给极光大大的

未经允许不得转载:脉冲网 » 两个星期,用Flutter撸个APP
分享本文至:

 MCtech
 简介:有任何需要都可以留言,本站尽力去寻找资源,如果资源失效,加群获取最新链接。由于本站常年亏损,顺带招收广告和赞助&&QQ群:486153251 1RMB即可入群,目前付费加群如果喜欢请赞助我们,我们不仅生产少部分资源,我们还是网络界的搬运工。

发表评论

游客
看不清楚?点图切换 送你一朵小花花~

帅人已评(0)