首页 » IOS » Flutter学习之旅----环境搭建与Hello World

Flutter学习之旅----环境搭建与Hello World

原文 http://blog.csdn.net/zhangxiangliang2/article/details/75566412

2017-07-20 20:20:06阅读(646)

Flutter官网镇楼

Flutter来自Google,是移动端APP开发SDK,使用Dart语言编写一套代码即可同时在Android和iOS平台运行,性能无限接近原生,支持android 4.1以上 和 iOS8以上。想进一步了解Flutter,进入传送门(英文版)。目前虽然是alpha版,截止到2017年7月20日,其在Github上的star达5.6k+,而且相当活跃,不论是使用者还是开发工程师,都在不停的交互改善,1.6k+话题被打开,4.5k+话题被关闭,说明谷歌工程师还是很重视的。在学习过程中,遇到一些常见的问题,可以到这里来寻找帮助。
看到这些花花绿绿的标签,谷歌工程师也是用心良苦啊!同时也让我们更有信心,Flutter会越来越完善。

Flutter学习<a href=之旅----环境搭建与Hello World" src="http://img.blog.csdn.net/20170720171818044?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhhbmd4aWFuZ2xpYW5nMg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="这里写图片描述" title="">

这里先说一下我使用的开发环境,MacBook Air,1.6 GHz Intel Core i5,8 GB 1600 MHz DDR3。下面正式进入主题。

1.下载安装Flutter SDK

直接在mac的Terminal输入命令

git clone -b alpha https://github.com/flutter/flutter.git
export PATH=`pwd`/flutter/bin:$PATH
flutter doctor  

第一条命令:下载Flutter
第二条命令:设置环境变量
第三条命令:安装相关依赖,可重复执行
在执行命令过程中可能会失败,可能是网络原因,没关系,多试几次。
最后,Flutter SDK下载后的路径: /Users/用户名/flutter,要注意的是flutter文件夹下面有多个同名的flutter文件夹,真正的SDK路径只到顶层flutter文件夹。
对Mac系统不熟悉的同学可能找不到打开文件夹的地方,看下面GIF图就知道了。

打开文件管理
Flutter学习之旅----环境搭建与Hello World

进入sdk目录
Flutter学习之旅----环境搭建与Hello World

获取文件完整路径
Flutter学习之旅----环境搭建与Hello World

2.安装idea编译器

下载地址
选择Community版本,下载后直接安装,很简单。

3.安装Flutter和Dart插件

打开idea,按照下图,在仓库里面搜索flutter,然后点击Install,安装的时候自动安装了Dart。

Flutter学习之旅----环境搭建与Hello World

左侧菜单栏有Dart和Flutter说明这两个安装好并可以用了,右边红色方框设置Flutter SDK(这点很重要)。
Flutter学习之旅----环境搭建与Hello World

4.运行

新建工程,工程名不能含大写字母,这与Android Stuidio不同。Creating Flutter Project这个界面可能会卡一会,如果不想一直等待就重新来。

Flutter学习之旅----环境搭建与Hello World

如果在创建的过程中出现如下错误,那么Close Project,然后重新打开即可。

Flutter学习之旅----环境搭建与Hello World

新建的工程已经默认帮我们实现了一个界面,可以直接运行,运行结果:

Flutter学习之旅----环境搭建与Hello World

如果我们只想简单的实现”Hello World”,用下面的代码替换掉main.dart里面的代码即可。

import 'package:flutter/material.dart';
void main(){
  runApp(new Center(child: new Text('Hello Flutter!')));
}

解释一下:方法runAPP()的参数Center是控件树的根,控件树包含Center和Text,框架强制根控件覆盖全屏幕,因此“Hello Flutter!”在屏幕中间。

运行结果
Flutter学习之旅----环境搭建与Hello World

至此,Flutter开发环境搭好了,Hello World Demo也能跑起来了。在Mac系统下这些操作还算顺利,我曾经在Wondows系统下进行同样的操作,执行Flutter Doctor的时候一直进行不下去,可能是谷歌先推出Mac版的原因吧。这是这个系列的第一篇,后面会介绍如何快速开发出一个APP。

最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹