概述
这里需要明确两个概念 Flutter SDK 、Dart SDK
这是两个东西 我看网上也没几个人搞明白,估计搞明白了也没舍得说清楚,我反正是碰了钉子。
如果只是简单的学习Dart语言,console打印,那么安装Dart SDK就够了,包含了运行时以及编译器等工具。
如果想开发界面(android,iOS)那么只安装Flutter SDK也就够了,它包含了Dart SDK的功能,并且有自己的一些界面组件库和渲染引擎Skia。
另外 IDE的话也有好几种,
VSCode :Visual Studio Code 微软的集成开发环境
Android Studio :Google出的集成开发环境
XCode :Apple出的集成开发环境
另外也可以用一些文本编辑器来写dart源码,比方vim,notepad++、editplus等等吧,编译打包就有点繁琐了,不如集成开发环境方便。
1、Dart SDK的安装
参考官方网站的引导来做就行 https://dart.dev/get-dart 可能需要vpn
然后 配置Dart的环境变量,也就是说dart命令随时可以在终端使用的话,需要把dart的可执行文件目录配置到环境变量中,
用vi打开环境变量文件 : ~/.bash_profile
输入
# dart sdk 此行为注释行
export DART_HOME=[我的dart解压目录的完整路径]/dart-sdk/bin
export PATH="${DART_HOME}:${PATH}"
保存退出
然后执行 :source $HOME/.bash_profile
好了Dart SDK算是OK了。
可以 终端执行一下 dart命令
dart --help
有东西出来就正常了。
2、Flutter SDK的安装
也是遵循官网的指引就行 https://flutter.dev/docs/get-started/install/macos#update-your-path
然后跟dart一样,需要配置环境变量
// 1. 在终端输入
sudo vim $HOME/.bash_profile
// 2. 添加如下命令,替换[PATH_TO_FLUTTER_GIT_DIRECTORY]为自己解压的flutter所在路径
export PATH="$PATH:[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin"
保存退出
// 3. 执行如下命令,生效bash_profile
source $HOME/.bash_profile
测试FlutterSDK安装成功否
执行 flutter doctor
localhost:bin chenfalei$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.17.5, on Mac OS X 10.15.6 19G73, locale zh-Hans-CN)
[✗] Android toolchain - develop for Android devices
✗ Unable to locate Android SDK.
Install Android Studio from: https://developer.android.com/studio/index.html
On first launch it will assist you in installing the Android SDK components.
(or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).
If the Android SDK has been installed to a custom location, set ANDROID_SDK_ROOT to that location.
You may also want to add it to your PATH environment variable.
[!] Xcode - develop for iOS and macOS (Xcode 11.6)
! CocoaPods 1.7.4 out of date (1.8.0 is recommended).
CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
Without CocoaPods, plugins will not work on iOS or macOS.
For more info, see https://flutter.dev/platform-plugins
To upgrade:
sudo gem install cocoapods
[!] Android Studio (not installed)
[✓] Connected device (1 available)
! Doctor found issues in 3 categories.
有反馈,说明FlutterSDK安装配置成功,就是有其他的工具未到位,比方没有安装Androidstudio,cocoapods版本1.7.4太低,需要1.8.0的版本。
这个都好说,因为我们不做android开发,暂时不用安装andoridstudio。只把cocoapods更新一下好了,用home brew升级好了。
在升级cocoapods的时候,brew显示升级成功,但是 pods命令 显示版本还是1.7.4,flutter doctor也是提示版本还是1.7.4.难道升级失败了吗,没提示说失败呀,是成功。算了,重新install吧。这个时候brew提示 新升级的成功了,只是链接没做好,就是快捷方式没做好,现在还是1.7.4的快捷方式,所以,用到pods命令的都是用的1.7.4的老的pods工具,那么就把新的链接过来好了。
bogon:~ chenfalei$ brew link --overwrite cocoapods
Linking /usr/local/Cellar/cocoapods/1.9.3... 2 symlinks created
好了,pods命令显示版本未1.9.3了,并且flutter doctor也没提示这个了。OK了。
剩下就是在xcode里开发flutterApp了。下篇再说。
另外说一下这个 环境变量文件,其实有好几个
Mac系统的环境变量,加载顺序为:
/etc/profile 是系统级别的,系统启动就会加载
/etc/paths 是系统级别的,系统启动就会加载
~/.bash_profile 当前用户级的环境变量
~/.bash_login 当前用户级的环境变量
~/.profile 当前用户级的环境变量
~/.bashrc 当前用户级的环境变量
自己看着办,想改哪个,哪个改了好使应该能看明白。
3、测试flutterdemo
上面都完成之后就可以做开发了。
找一个目录 放源码的地方:比方Destop/myflutterdemo,命令行进入这个目录
执行 flutter create demo01
会自动在当前目录 创建一个 demo01的文件夹,并且创建了很多子目录和相关文件。
但是,注意,执行这个命令的时候,可能出现 卡在
lRunning "flutter pub get" in demo01...
这里一直不动,是因为有些必要的东西本机还未准备,需要网络去取回来,但是,网址没有配置到环境变量文件里,所以,它找不到,就一直在不停的找。解决也容易,还是在环境变量文件里增加一些配置
vi ~/.bash_profile 输入
# Flutter 依赖
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
保存退出
source ~/.bash_profile
就好了,然后再尝试 flutter create demo01 这个时候就很快成功了。
最后会提示你
In order to run your application, type:
$ cd flutterdemo01
$ flutter run
那就 flutter run 好了,但是提示
No supported devices connected.
没有链接任何设备,不能运行。
俩办法:连接手机、启动模拟器。
先说 启动模拟器
终端 输入命令 open -a Simulator
会启动模拟器 ,你可以在菜单里 改变模拟器的系统版本和机型。然后再次执行 flutter run 会提示你需要在哪个设备上运行
More than one device connected; please specify a device with the '-d <deviceId>' flag, or use '-d all' to act on all devices.
cfliphone8 • 23eef36d2af78151f81a18ec0c65310c35a44079 • ios • iOS 13.5.1
iPhone 5s • 3A83EC71-99C2-4DCD-867A-959C848FD1B6 • ios • com.apple.CoreSimulator.SimRuntime.iOS-10-3 (simulator)
iPhone 11 Pro Max
那就指定一个吧:比方,flutter run -d “iPhone 5s” 等一会就在模拟器里启动了
注意这里 -d后面的 设备名 如果有空格 要么用引号包起来,要么空格前“/”一下转义。都行。
好了。至此,算是一切就绪了。
还说一句,这个demo选在真机设备时,会提示你bundleidentifier的问题和code sign的问题,也是对的,因为还没给这个App配置过id呢。可以用xcode打开这个工程去配置一下,然后再继续就好了。
Try replacing 'com.example' with your signing id in Xcode:
open ios/Runner.xcworkspace
localhost:flutterdemo01 chenfalei$ flutter run -d cfliphone8
Launching lib/main.dart on cfliphone8 in debug mode...
Automatically signing iOS for device deployment using specified development team in Xcode project: 64MK7EMH8V
Running Xcode build...
└─Compiling, linking and signing... 6.5s
Xcode build done. 12.4s
Installing and launching... 26.1s
Syncing files to device cfliphone8... 189ms
Flutter run key commands.
r Hot reload. ????????????
R Hot restart.
h Repeat this help message.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).
An Observatory debugger and profiler on cfliphone8 is available at: http://localhost:1024
此时设备上已经运行了App了。瓦利古德。yea。
最后
以上就是积极玉米为你收集整理的Mac上Flutter开发 环境搭建1、Dart SDK的安装2、Flutter SDK的安装3、测试flutterdemo的全部内容,希望文章能够帮你解决Mac上Flutter开发 环境搭建1、Dart SDK的安装2、Flutter SDK的安装3、测试flutterdemo所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复