Android Studio Flutter简介和配置

时间:2024-03-21 09:27:33

1.Flutter简介

最近Flutter挺火,这几天抽时间了解了一下。下面简单介绍下。(本文只简单说下flutter是什么东西,至于原理不在本文细究)

先放概念:Flutter是Google推出并开源的移动应用开发框架,主打跨平台、高保真、高性能。

其实App跨平台框架已经不是一个新鲜的技术了。我们常见的还有:webApp、React Native、Weex等等。

开发一套代码可以在android和ios等多个平台运行,这样不是能够节省大量的人力物力了么?看起来是这样,但是时至今日,跨平台框架开发的App还是有些不尽如人意。主要缺点如下:

  • 比如在UI上:webApp必须依托于webview,而且h5的UI渲染起来跟原生UI比起来差距很大;React Native则是需要通过中间件转换成原生控件,但是中间转换过程还是有一定的性能损耗的;Weex和React Native类似,也需要一层转换。这些问题在绘制简单页面时估计看不出区别,但是频繁交互和动画绘制时,体验就不好了。
  • 在与原生api交互上:三者类似,都需要一个中间件和原生api交互。这个一般情况下可能出现兼容性问题。

而最年轻的Flutter则是总结了以上的经验教训:

  • 在UI上:Flutter不需要转换成原生控件,而是直接通过自己的Skia引擎绘制UI。(Skia是Google的一个图形处理引擎,android就使用了Skia引擎) 
  • 而在代码上:用Dart语言通过AOT编译为平台的原生代码,所以Flutter可以直接与平台通信,不需要中间件的桥接。

那这么看来,Flutter简直完美!?

不过别高兴的太早,单就性能上来讲,Flutter很棒。但是一种语言或者一个平台能不能被大多数人认可、使用。性能只是基础,真正重要的是生态。在这方面,现在的Flutter还是略显稚嫩。不过潜力还是挺大的,因为有Google的站台。再加上谷歌Fuchsia系统野心勃勃(Fuchsia的页面就是用Flutter写的)  所以简单了解、学习一下Flutter是没什么坏处的。

 

2.Android Studio配置Flutter

准备工作:

  1. Android Studio3.0以上(我用的3.4)
  2. git

这些就不多说了,大家都有。

 

2.1 先配置镜像,否则下载很慢。

在环境变量中配置这两个:

Android Studio Flutter简介和配置

FLUTTER_STORAGE_BASE_URL :https://storage.flutter-io.cn

Android Studio Flutter简介和配置

PUB_HOSTED_URL:https://pub.flutter-io.cn

 

2.2 在想要下载的地方通过git命令行下载

在你想要下载的目录下右键点击 “Git Bash Here” ,然后输入“git clone https://github.com/flutter/flutter.git”

Android Studio Flutter简介和配置

Android Studio Flutter简介和配置

然后等它下载完~~

 

2.3 将flutter和Android SDK加到环境变量

1.将“C:\DevelopTools\Android\flutter\bin”(自己的 “flutter\bin” 路径) 加到环境变量path中。下图是win10截图,直接点右边新建,然后把值填进去就行。win7的话把这个加进去“;C:\DevelopTools\Android\flutter\bin”( “;” 千万不能忘)

Android Studio Flutter简介和配置

 

2.还要将Android SDK也加到环境变量,如下图

Android Studio Flutter简介和配置

ANDROID_HOME:C:\DevelopTools\Android\SDK(自己的SDK路径)

将这两个环境变量配置完之后重启下

 

2.4 打开命令行,输入flutter doctor

然后就是漫长的等待~~

Android Studio Flutter简介和配置

全部安装完成之后应该会提示这个,有一些协议需要同意,根据上面的提示输入“flutter doctor --android-licenses” 。之后会出一串串的各种协议。一路按 “Y” 就行了。(协议如果你感兴趣可以看看,当然,这并没什么卵用。反正最后你还是要同意~~)

 

如果有下面这个提示,就把手机连上电脑或者把虚拟机打开。

Android Studio Flutter简介和配置

 

2.5 下载flutter和dart插件

打开File--setting--plugins,然后搜索下面这两个插件并安装。安装完之后重启下。

Android Studio Flutter简介和配置

 

 

2.6 配置flutter和dart路径

在setting找到Languages--Flutter,然后在下图所示位置把Flutter安装路径填进去。填过之后我这里Dart自动填写了,如果没有的话手动填写下。Dart路径如下图所示:

Android Studio Flutter简介和配置

Android Studio Flutter简介和配置

 

2.7 大功告成,新建项目

现在可以创建Flutter项目了。在File--New--New Flutter Project

Android Studio Flutter简介和配置

 

 

小插曲:如果上面步骤全部设置正确了但是 “New” 里面没有 “New Flutter Project” 选项的话。打开File--setting--plugins然后勾选使用以下插件:

Android Studio Flutter简介和配置

然后再看下就有了~~~

The End...