Flutter & Dart 初学日记(一):序章&开发环境

正如标题所言,这是一名Flutter & Dart初学者的日常记录。该系列有相当的概率由于在下的懒惰半途而废,所以可能的话,麻烦点一个小赞,以督促我学习下去。

先来说说个人的情况吧:某大学CS系大二学生,在闲时搜索Fuchsia相关内容时,发现了Flutter & Dart这种无需bridge即可开发跨平台应用的语言和框架,遂产生了一定兴趣。虽然大一时候涉猎过java、C、html等语言,但除python外基本均属于初学水平。

不说其它话了,首先是第一个问题,到底什么是Flutter & Dart?

Flutter是一种用于创建跨平台(IOS/Android)2D移动应用的SDK,其也是基于Dart语言的framework。基于Flutter & Dart的移动应用会自动被Flutter SDK编译成IOS/Android的native code,这意味着开发者能用一套代码完成两个平台的应用(当然Flutter也允许识别不同系统运行不同的代码)。

《Flutter & Dart 初学日记(一):序章&开发环境》
《Flutter & Dart 初学日记(一):序章&开发环境》

Flutter的应用构建基于一种叫“widget tree”的结构。顾名思义,这是一种tree。在上面这个知乎界面里,整个页面首先是一个widget;而在这个页面里,话题“5:如何惹一只猫生气”则是一个从属于“页面widget”的“child widget”;在话题5里,那张猫的图片则是从属于“话题widget”的图片“child widget”。因此,我们可以依靠这样的从属关系建立一个tree。

这就是Flutter的大致内容。接下来便是配置相应的开发环境了。顺带一提在下使用的是win10系统。macOS的配置可参考官网:flutter.io

在开始安装之前,先确认以下要求:

《Flutter & Dart 初学日记(一):序章&开发环境》
《Flutter & Dart 初学日记(一):序章&开发环境》

PowerShell于win10下为自带,而git可以直接于网上下载安装。

之后从

https://storage.googleapis.com/flutter_infra/releases/beta/windows/flutter_windows_v0.8.2-beta.zip

下载beta版本的sdk。注意flutter现在正在开发过程中,所以不是正式版。

解压后的文件应该如图所示:

《Flutter & Dart 初学日记(一):序章&开发环境》
《Flutter & Dart 初学日记(一):序章&开发环境》

为了便于在命令行内使用flutter,将bin文件夹的地址加入环境变量:

《Flutter & Dart 初学日记(一):序章&开发环境》
《Flutter & Dart 初学日记(一):序章&开发环境》

测试:

《Flutter & Dart 初学日记(一):序章&开发环境》
《Flutter & Dart 初学日记(一):序章&开发环境》

正如上文所述,flutter只是一个sdk,还需要一个用来编写测试应用的工具。从https://developer.android.com/studio/index.html下载Android studio并安装:

《Flutter & Dart 初学日记(一):序章&开发环境》
《Flutter & Dart 初学日记(一):序章&开发环境》

安装完成后打开,从settings>plugins里搜索并安装flutter和dart的插件。

《Flutter & Dart 初学日记(一):序章&开发环境》
《Flutter & Dart 初学日记(一):序章&开发环境》

通过file>new>new flutter project建立一个新的flutter应用:

《Flutter & Dart 初学日记(一):序章&开发环境》
《Flutter & Dart 初学日记(一):序章&开发环境》

从tools>AVD manager内建立一个新的虚拟机:

《Flutter & Dart 初学日记(一):序章&开发环境》
《Flutter & Dart 初学日记(一):序章&开发环境》

测试实例应用:

《Flutter & Dart 初学日记(一):序章&开发环境》
《Flutter & Dart 初学日记(一):序章&开发环境》

注1:如果运行时出现下载超时的错误,请科学上网。

注2:需要通过真实Android设备运行的话,需要安装Google USB driver

注3:如果电脑安装了Android SDK,需要单独创建一个名为“ANDROID_HOME”的用户变量,并将该变量加入到Path内。

======================================

欢迎各位大佬加入Flutter & Dart学习群:

http://qm.qq.com/cgi-bin/qm/qr?k=Yvl3SAD2mMApBDMEd_1yHrMnH8ykiyWb (二维码自动识别)

    原文作者:钟虎跃
    原文地址: https://zhuanlan.zhihu.com/p/45165701
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞