(一)一统江湖Flutter-环境搭建

一、认识一下Flutter


Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。

  • 跨平台:现在Flutter至少可以跨4种平台,甚至支持嵌入式开发。我们常用的有Linux、Android、IOS,甚至可以在谷歌最新的操作系统上Fuchsia进行运行,经过第三方扩展,甚至可以跑在MacOS和Windows上,到目前为止,Flutter算是支持平台最多的框架了,良好的跨平台性,直接带来的好处就是减少开发成本。

  • 原生用户界面: 它是原生的,让我们的体验更好,性能更好。用官方的话讲就是平滑而自然的滑动效果和平台感知,为您的用户带来全新的体验。(可以看一下图片,这是Flutter的表现)

  • 开源免费:这个不用多说,我们只要学会并使用,这些都是免费的。这对于大公司是非常必要的,有人说你可以用破解版什么的....说明你还是小公司,我们公司的软件全部是正版,就更不用说操作系统和生产环境了,否则各种公司的侵权官司你都解决不了。

主流框架的对比

Cordova:个人认为Flutter可以完胜了,因为Cordova还是基于网页技术进行包装,利用插件的形式开发移动应用的,就这一点。无论是性能还是体验,Flutter都可以完胜了。

RN(React Native):RN的效率由于是将View编译成了原生View,所以效率上要比基于Cordova的HTML5高很多,但是它也有效率问题,RN的渲染机制是基于前端框架的考虑,复杂的UI渲染是需要依赖多个view叠加.比如我们渲染一个复杂的ListView,每一个小的控件,都是一个native的view,然后相互组合叠加.想想此时如果我们的list再需要滑动刷新,会有多少个对象需要渲染.所以也就有了前面所说的RN的列表方案不友好。

Flutter:吸收了前两者的教训之后,在渲染技术上,选择了自己实现(GDI),由于有更好的可控性,使用了新的语言Dart,避免了RN的那种通过桥接器与Javascript通讯导致效率低下的问题,所以在性能方面比RN更高一筹;有经验的开发者可以打开Android手机开发者选项里面的显示边界布局,发现Flutter的布局是一个整体.说明Flutter的渲染没用使用原生控件进行渲染。

120fps超高性能

Flutter采用GPU渲染技术,所以性能极高。

Flutter编写的应用是可以达到120fps(每秒传输帧数),这也就是说,它完全可以胜任游戏的制作。而我们常说的RN的性能只能达到60fps,这也算是Flutter的一个超高竞争力吧。官方宣称Flutter甚至会超过原生性能。

如果你想迈入移动游戏领域,学习Flutter也是一个非常好的选择。
github地址

二、Flutter开发环境搭建Windows版


特别说明:如果你还不会翻墙,科学上网。那你先停止学习吧,因为你不可能安装成功,先去学学这些东西,能打开谷歌了,再返回来学效率更高。
  1. JDK下载及环境变量配置

  2. 下载安装 FlutterSDK

    • 解压
    • 配置环境变量至path,例(D:\developer\application\flutter\bin)
    • 终端输入flutter doctor查看详情
  3. Android Studio的安装

  4. 打开Android Stuido 软件,然后找到Plugin的配置,搜索Flutter插件。

  5. 安装Android证书(注意jdk版本问题)

  • flutter doctor --android-licenses

三、Android studio新建Flutter项目




安装AVD虚拟机
  1. 现在需要一个虚拟机来运行我们的程序,可以点击Android Studio中的上方菜单tool -AVD Manager选项。

  2. 出现新建菜单,选择Create Virtual Device.....,如果你一个虚拟机也没建过,这个选项在对话框的中间(我一定跟我的图一样)。


  3. 选择虚拟机类型,这个你随意选就好,我选择的是Nexus 5x。(如果你屏幕小,就选择一个小屏幕的虚拟机)


  4. 选择系统,这里尽量选择最新的,我选择了Android 9.0系统,选择好后,又是一个漫长的等待过程。

  5. 安装好后,点击开始按钮,运行虚拟机了(第一次运行,需要安装系统,会慢一些),运行起来后,如下图。


  6. 让Flutter跑起来


四、Error runing Gradle 错误解决(1.x版本已经修复)


第一步:修改掉项目下的android目录下的build.gradle文件,把google() 和 jcenter()这两行去掉。改为阿里的链接。

buildscript {
    repositories {
        //  google()
        //  jcenter()
        maven { url 'https://maven.aliyun.com/repository/google' }
        maven { url 'https://maven.aliyun.com/repository/jcenter' }
        maven { url 'http://maven.aliyun.com/nexus/content/groups/public'}
        }
        dependencies {
        classpath 'com.android.tools.build:gradle:3.1.2'
    }
}
allprojects {
    repositories {
        // google()
        // jcenter()
        maven { url 'https://maven.aliyun.com/repository/google' }
        maven { url 'https://maven.aliyun.com/repository/jcenter' }
        maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
    }
}
rootProject.buildDir = '../build'
subprojects {
    project.buildDir = "${rootProject.buildDir}/${project.name}"
}
subprojects {
    project.evaluationDependsOn(':app')
}
task clean(type: Delete) {
    delete rootProject.buildDir
}

第二步:修改Flutter SDK包下的flutter.gradle文件,这个目录要根据你的SDK存放的位置有所变化。比如我放在了D盘Flutter目录下,那路径就是这个。
D:\developer\application\flutter\packages\flutter_tools\gradle

buildscript {
    repositories {
        //jcenter()
        // maven {
        //     url 'https://dl.google.com/dl/android/maven2'
        // }
        maven{
            url 'https://maven.aliyun.com/repository/jcenter'
        }
        maven{
            url 'http://maven.aliyun.com/nexus/content/groups/public'
        }
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.1.2'
    }
}

然后再重新Debug一下,就基本可以启动起来。

还有一种错误是说硬件没有启动GPU,需要下载安装一个程序,这个提示的很清楚,不做过多的介绍了。

五、VSCode下如何玩转Flutter


我已经使用VSCode有几年了,记得是从刚出VSCode就开始使用了,我个人是不喜欢用Android Studio来进行开发的,感觉它太重量级了。所以必须想办法用VSCode进行开发。幸运的是VSCode已经有了Flutter插件,而且也非常完美。

  1. VSCode安装Flutter插件


  2. 启动虚拟机


  3. 启动 flutter run

  4. 热键(debug F5 模式实时加载)
    r 键:点击后热加载,也就算是重新加载吧。
    p 键:显示网格,这个可以很好的掌握布局情况,工作中很有用。
    o 键:切换android和ios的预览模式。
    q 键:退出调试预览模式。

注原文:http://jspang.com/post/flutter1.html

推荐阅读更多精彩内容