Flutter初体验

最近flutter很火,但目前的flutter也是才刚开始,或许后面会和fuchsia一起称霸世界吧,今天就来看看这个fullter到底怎么样,来个初体验。

首先是flutter的官网:https://flutter.io/

中文官网:https://flutterchina.club/

一、环境搭建

在开始之前希望大家可以先把android开发环境搭建好,如果没有搭建的请移步google搭建好后再看下文。

1、首先就是需要下载flutter的sdk,在下载前还需要设置一下,毕竟国内嘛,如果有的就可以跳过,本人已window10为例,先设置环境变量来提升下载速度。

PUB_HOSTED_URL  https://pub.flutter-io.cn //国内用户需要设置
FLUTTER_STORAGE_BASE_URL   https://storage.flutter-io.cn //国内用户需要设置

在复制的时候注意一定不要有空格,本人就是在第一次时有空格导致没成功。

Flutter初体验_第1张图片

设置好后就可以开始下载sdk,这里需要大家安装git,如果没有自行安装即可,通过git下载flutter的sdk。

Flutter初体验_第2张图片

这时就只用等待下载完成。下载好后需要使用flutter的命令所以需要加入环境变量如:

Flutter初体验_第3张图片

其中的值为刚才下载的sdk的地址下的bin目录,这时就可以使用flutter这个命令了,打开一个命令窗口输入命令安装依赖:

flutter doctor

如果不出意外基本上就算安装完成了。

2、设置编辑器,开始hello world!

这里以visual studio code为例,先下载Dart Code插件

Flutter初体验_第4张图片

这里我已经安装了,大家搜索到后点击安装即可,安装好后就可以开始新项目了,下面我们来新建一个项目

  1. 启动 VS Code
  2. 调用 View>Command Palette…
  3. 输入 ‘flutter’, 然后选择 ‘Flutter: New Project’ action
  4. 输入 Project 名称 (如myapp), 然后按回车键
  5. 指定放置项目的位置,然后按蓝色的确定按钮
  6. 等待项目创建继续,并显示main.dart文件

在这里新项目就好了。

3、运行项目

Flutter初体验_第5张图片

注意这里需要你有一部安卓手机并且连接电脑,开启调试模式,就可以看到效果了,这里就用一张官方的图了。

Flutter初体验_第6张图片

Flutter初体验_第7张图片Flutter初体验_第8张图片Flutter初体验_第9张图片

你可能感兴趣的:(移动端开发)