67

Mac下安装Flutter,并创建第一个App

 5 years ago
source link: http://www.10tiao.com/html/275/201807/2653646436/1.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

相关软件安装




JDK安装




  • 下载


前往下载页面下载安装包:


http://www.oracle.com/technetwork/java/javase/downloads/index.html


下载8.x的版本,8以上的会出问题


  • 安装


双击安装包,一路下一步至完成


  • 配置


找到jdk安装路径,一版情况为:


/Library/Java/JavaVirtualMachines/jdk-8.jdk/Contents/Home


也可以打开访达,选择菜单【前往】-【电脑】,随后进入路径【Macintosh HD】-【资源库】中看是否存在Java文件夹,然后找寻安装路径;


检查用户文件夹下是否存在.bash_profile文件,不存在则创建;


将如下代码添加到.bash_profile文件中


JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk-10.0.1.jdk/Contents/Home
PATH=$JAVA_HOME/bin:$PATH:.
CLASSPATH=$JAVA_HOME/lib/tools.jar:$JAVA_HOME/lib/dt.jar:.
export JAVA_HOME
export PATH
export CLASSPATH


在终端输入如下命令是配置生效


source ~/.bash_profile


输入如下命令检测是否配置成功,如果成功将输出配置的路径


echo $JAVA_HOME


Android Studio安装


  • 下载


前往下载页面下载安装包:


https://developer.android.com/studio/


或者直接点击下载:Android Studio v3.1.3(https://dl.google.com/dl/android/studio/install/3.1.3.0/android-studio-ide-173.4819257-mac.dmg


请在官网下载,避免出现


XcodeGhost(https://www.zhihu.com/question/35721299)类似问题


  • 安装


双击安装包,将应用拖拽到【应用程序】中,完成安装。


  • 配置


安装完成后打开Android Studio应用;


第一次打开会询问是否导入设置,按照需求选择,我是第一使用,我选择第二项;


第一次使用会弹出无法访问Android SDK,暂时点Cancel;



随后界面一路蓝色按钮点击即可。


最后一步是下载相关资源,下载结束后即可进入Android Studio了。


在.bash_profile中放入下列代码


export ANDROID_HOME=/Users/mingyu/Library/Android/sdk
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools


还要安装插件,打开Android Studio,在【首页】-【Configure】-【Plugins】中所有插件Flutter和Dart进行安装;


Xcode安装




直接在App Store中搜索Xcode进行安装


VSCode安装




开发IDE,直接去官网下载(https://code.visualstudio.com/),下载安装后,需要安装两个扩展:Dart和Flutter,直接在扩展中搜索安装即可。


Brew安装




包管理工具,flutter必须的一些包需要用它来安装;


前往官方网站(https://brew.sh/index_zh-cn),按照上面最新的提示进行安装;


安装好后,可以选择使用国内镜像,打开终端,执行下列命令:


# 参考文档:https://mirror.tuna.tsinghua.edu.cn/help/homebrew/

cd /usr/local/Homebrew git remote set-url origin https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/brew.git

cd /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core git remote set-url origin https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/homebrew-core.git brew update
# update 时间较长,耐心等待


Flutter安装




  • 下载




执行下列命令下载最新的flutter代码(系统请先安装Git)


git clone -b beta https://github.com/flutter/flutter.git


  • 安装&配置


在用户文件夹下找到.bash_profile文件,如果没有就创建一个;


在文件中加入如下代码:


export PUB_HOSTED_URL=https://pub.flutter-io.cn # 国内用户需要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn # 国内用户需要设置
export PATH={Fluter代码存放目录}/bin:$PATH


添加保存后,执行下列命令刷新终端:


source $HOME/.bash_profile


运行下列命令检查flutter是否已经安装成功:


flutter -v


第一次运行会安装一些东西,然后显示欢迎提示,告知已经安装成功;


接下来需要运行下列命令检查flutter的依赖项:


flutter doctor


运行该命令后,flutter会提示你那些东西是必须要的,需要执行什么命令进行安装,按照提示安装即可;


其中必要的一项,请创一个虚拟Android虚拟设备,并保持开机状态。


第一个Flutter App


打开VSCode,按F1(有touchbar的机子按住fn可见F1)呼出命令输入框;


输入字符Flutter,在命令候选列表中选择Flutter: New Project,新建一个Flutter项目,随后让你填写项目名称和选择项目存放路径;


项目创建好后,在VSCode右下角选择调试环境目标:



按F5运行项目;


这里我遇到了报错有关于gradle的,解决方案是删除用户文件夹下的.gradle文件夹,然后使用brew重新安装gradle;


gradle安装参考:https://gradle.org/


不报错的情况下,VSCode会下载一些必要资源,然后在目标设备(右下角选择的)上运行app;



至此,Flutter安装完毕,正常运行,接下来就是Flutter开发之旅了!


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK