【Flutter】保姆级一小时Flutter开发环境搭建到Demo跑通教程--无需开发者账号

1,407 阅读7分钟

前提

硬件要求

  • 一台MacOS电脑,最好系统是最新的
  • 一台Android手机
  • 一台iOS手机
  • 宽带建议三百兆

硬件参考

  • 黑苹果: MacOS 12.3
  • 华为Mata 30 pro: 鸿蒙 2.0
  • 苹果 Iphone x : 15.4
  • Android Studio: bumblebee|2020.1.1
  • XCODE: 13.3

不需要苹果开发者账号

不需要苹果开发者账号,有普通的苹果账号就好。不过普通的苹果账号多一步信任的过程,下面的步骤有详细说明。

简单说明

今天给2016年组装的老台式机重新安装了最新的黑苹果系统 --- Monterey 12.3,装完后试了下还挺流畅的😂,所以决定装个Flutter开发环境,也算是发挥它最后的余热吧!毕竟随着苹果自己的M1芯片越来越成熟,以后Macos系统可能就和手机一样封闭了,能玩黑苹果的日子不多了。

完成了Flutter开发环境搭建与iOS&Android Demo跑通全过程后。令人意外地发现全程只用了一个多小时。也许是我现在的网络环境比较好/也许是有点经验了/也许是现在的配置工具便利了。相比第一次配置Flutter开发环境时的辛酸。现在配置个环境真的舒服多了。最后不管怎样,反正我想把教程写的简单一点,但是又尽量详细一点,让零基础的朋友也能看得懂。

必要软件下载与安装

XCODE 下载与安装

在APP STORE 上搜XCODE,点击安装就好。就是这么简单,不过也是最耗时的,安装包一共10G左右,按我之前的经验下载加上安装可能要40-50分钟左右。所以,第一步要先下载安装XCODE,安装的途中会弹出授权窗口输入密码就好,其他都是后台执行的。然后XCODE最后配置都可以,其他软件下载好先安装,还好其他软件不是很大下载都挺快的。

Android Studio 下载与安装

paste image

  • 下载完双击安装文件安装好就可以了,大概十分钟下载和安装

Flutter SDK 下载与配置

paste image

  • 解压缩文件,我这里解压到 /Users/sugood/devlibs/flutter 文件夹下,这个路径是自己定义的,等会需要用到

paste image

  • 配置环境变量
  1. 在终端输入指令 sudo vi ~/.bash_profile ,进入配置,需要输入密码。

  2. 输入i,进入vim的编辑模式,在任意一行添加Flutter SDK的路径

 # flutter sdk
 export PATH=$PATH:$HOME/devlibs/flutter/bin

  这里的HOME是用户文件夹的意思。HOME 是用户文件夹的意思。HOME/devlibs/flutter/bin 就是/Users/sugood/devlibs/flutter 的路径(我电脑的用户是sugood)

  1. 按ESC键退出编辑模式,再输入:wq 保存。如下图:

paste image

  1. 然后在终端上执行 source ~/.bash_profile ,刷新环境变量

 paste image

5.最后在终端上执行 flutter --version 指令查看版本号,打印以下信息就是成功了

 paste image  

注意:如果提示zsh: command not found: flutter,可按照以下步骤修复

#第一步,在终端执行
vim ~/.zshrc
#第二步,找到 “# User configuration” 在其下面添加下面内容
source ~/.bash_profile
#如果没有’# User configuration’,就直接把上面内容添加到 ~/.zshrc 里面
#第三步,在终端里执行 
source ~/.zshrc

软件配置

一、Android Studio打开与配置

  • 运行Android Studio

paste image

  • 设置代理(Setup Proxy)根据自己的软件来设置

paste image

  • 设置好后就等到下载最新的安卓SDK还有一些资源,当然点击Cancel也行,网络情况理想也是能下载到最新的SDK和资源的。下载好之后我们打开Android Studio 的Tools->SDK Manager(SDK管理)

paste image

paste image

  • 下载Flutter 需要用到的SDK工具,点击SDK Tools ,选上必要的工具,最后点击Apply 按钮后会下载选中的工具。

paste image

  • 安装Flutter 和Dart 插件 paste image

paste image

paste image

我这里展示了Flutter 插件的安装,Dart一样道理,两个插件都安装好之后,在插件中心显示如下:

paste image

  • 在终端界面执行 flutter doctor --android-licenses,这一个操作是安卓许可证授权 ,全部选yes就好。完成这一步安卓的配置基本完成了,下面先创建一个demo最后再配置xcode

二、创建Flutter 项目并跑通Android DEMO

  • 先在终端执行一次指令: flutter doctor --verbose ,看看安卓和Android Studio的配置有没有问题。
sugood@sugooddeiMac ~ % flutter doctor --verbose
[✓] Flutter (Channel stable, 2.10.4, on macOS 12.3 21E230 darwin-x64, locale
    zh-Hans-CN)
    • Flutter version 2.10.4 at /Users/sugood/devlibs/flutterUpstream repository https://github.com/flutter/flutter.gitFramework revision c860cba910 (3 weeks ago), 2022-03-25 00:23:12 -0500Engine revision 57d3bac3ddDart version 2.16.2DevTools version 2.9.2Pub download mirror https://pub.flutter-io.cnFlutter download mirror https://storage.flutter-io.cn

[✓] Android toolchain - develop for Android devices (Android SDK version
    32.1.0-rc1)
    • Android SDK at /Users/sugood/Library/Android/sdkPlatform android-32, build-tools 32.1.0-rc1Java binary at: /Applications/Android
      Studio.app/Contents/jre/Contents/Home/bin/javaJava version OpenJDK Runtime Environment (build 11.0.11+0-b60-7590822)
    • All Android licenses accepted.

[✗] Xcode - develop for iOS and macOS (Xcode 13.3.1)
    • Xcode at /Applications/Xcode.app/Contents/DeveloperCocoaPods not installed.
      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 install:
        sudo gem install cocoapods

[✓] Chrome - develop for the webChrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.1)
    • Android Studio at /Applications/Android Studio.app/ContentsFlutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutterDart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dartJava version OpenJDK Runtime Environment (build 11.0.11+0-b60-7590822)

理论上除了XCODE会有问题,其他的应该不会有问题了,如果有问题就需要针对问题修复好才能进行下一步

  • 打开Android stuido并创建Flutter 项目,项目名称是ftest,安卓SDK地址就是上面配置的地址/Users/sugood/devlibs/flutter,第一次需要配置,以后没有修改都不需要动。

paste image

paste image

paste image

  • 这样我们在/Volumes/Works/sourceCode/flutter/ftest路径下就得到一个Flutter项目。

paste image

  • 这个时候拿出安卓手机打开开发这模式,连上电脑后,信任这台电脑,并选择文件传输模式。就能在Android studio 界面看到这台手机了 paste image

  • 点击运行按钮,等到编译成功并自动安装到手机上后,没什么意外手机上就能看到如下界面 paste image

如果你顺利地走到这一步,那么恭喜你,你已经完成了70%了,这个时候XCODE应该刚好安装完成。应该还没超过一个小时😂。如果很不幸,XCODE还没安装好,那么你也许可以先休息下☕️,反正后面的东西不多了😎

三、跑通iOS DEMO

  • 针对前面flutter doctor --verbose的xcode的错误提示,在终端上执行 sudo gem install cocoapods 安装 cocoapods

  • 安装完成cocoapods后,在终端上执行flutter doctor --verbose ,可以看到cocoapods版本,也没有其他报错了。这样整个Flutter开发环境就已经搭好了。

paste image

  • 在Flutter 项目中打开xcode

paste image

第一次打开,必然有报错的,因为我们需要添加自己的苹果账号并生成证书才能进行调试

paste image

  • 添加苹果账户 paste image
  1. 添加账号

paste image

  1. 输入账号密码

paste image

  1. 生成证书操作

paste image

  1. 生成证书成功,Team名称如图,记住了一会要用。

paste image

  1. 回到xcode 给项目选择上面生成的Team后,就没有报错了

paste image

  • xcode连接苹果手机并运行,第一次需要用xcdoe 信任手机设备

paste image

  • 如果不是苹果开发者的账号运行会有以下错误提示

paste image

手机上的提示如下

paste image

那么只要手机打开设置->VPN与设备管理,信任开发者APP就好,如下

paste image

paste image

  • 回到Android studio ,选择苹果手机,并点击运行按钮

paste image

  • 编译成功后,我相信你也能在手机上看到以下demo顺利运行的界面。

paste image

总结

至此,从开发环境搭建到Demo跑通都已经完成了,没有什么很复杂的操作,基本上都是图形化操作界面,只有极个别没有图形化才用指令。而且很多指令也都是查看指令,只是设置环境变量的指令稍微多一点,也不复杂。相信零基础的同学也是能很好上手的。

最后,如果你的配置的过程中有遇到其他的问题,可以多执行下flutter doctor --verbose 指令看看有没有其他的错误,一般情况下这个指令没有报错的话,运行demo都是不会有什么问题的。如果遇到其他问题,请善用搜索引擎~