Flutter教程 (二)Flutter安装及运行

2019年5月8日 199次阅读 来源: 我是吸血鬼

Flutter官网点击访问
Flutter教程(一)Flutter概览
Flutter教程(二)Flutter安装及运行
Flutter如何引用第三方库并使用

如何安装

  1. Windows用户安装说明
  2. Mac 用户安装说明
  3. Linux用户安装说明

Mac上安装Flutter过程详解

前方预警，前方预警，前方预警

作为高墙之内的开发者，我们有必要看一看这篇文章Using Flutter in China
。

根据文章的提醒。。。，我们只用在命令行执行以下Shell命令

export PUB_HOSTED_URL=https://pub.flutter-io.cn   
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn   
git clone -b beta https://github.com/flutter/flutter.git
export PATH="$PWD/flutter/bin:$PATH"
cd ./flutter
flutter doctor

flutter doctor 会比较耗时，耐心等待

如果需要flutter全局有效，需要配置~/.bash_profile文件，添加如下代码：

export PATH=/Users/demon.li/flutter/bin:$PATH"

运行官方示例 hello_world

flutter下的examples目录中有若干个开发示例，对于新手来说十分实用。hello_world项目便位于其中。
hello_world的目录结构如下:

《Flutter教程 (二)Flutter安装及运行》 Flutter_Hello_World_Project

进入hello_world目录中，执行

flutter package get安装相关package。

在Android真机上运行hello_world

用数据线连接Android手机并确认手机已开启了调试功能。

命令行

在命令行中，进入hello_world目录。执行以下命令即可：

flutter run

Android Studio编辑器

确保Android Studio已经安装了Flutter和Dart插件，并且配置了Flutter的路径,如下图所示:

《Flutter教程 (二)Flutter安装及运行》 Android Studio Flutter SDK配置

hello_world的Android工程结构如下图：

《Flutter教程 (二)Flutter安装及运行》 Flutter_Hello_World_Structure

点击Run按钮即可在Android真机上看到效果,漆黑一片只见你好，世界！！！

《Flutter教程 (二)Flutter安装及运行》 Flutter_Hello_World_Android.png

在IOS真机上运行hello_world

在IOS真机上运行项目需要安装一些必要的软件，在命令行中别分执行如下命令：

brew update   
brew install --HEAD libimobiledevice   
brew install ideviceinstaller ios-deploy cocoapods   
pod setup

安装完毕之后打开hello_world/ios目录下的Runner.xcworkspace（默认大侠你已经安装好了Xcode IDE）

在运行之前需要配置bundle identifier和签名

《Flutter教程 (二)Flutter安装及运行》 Flutter_Hello_World_IOS

连接IOS真机，点击Run按钮即可。

捂脸，作为一个纯正的Android用户，在家没有IOS设备就不上效果图了。。。

    原文作者：我是吸血鬼
    原文地址: https://www.jianshu.com/p/f3ab718b366d
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞