【Flutter】保姆级一小时Flutter开发环境搭建到Demo跑通教程

条件

硬件要求

一台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 下载与装置

在官网下载地址下载，developer.android.com/studio?hl=z…

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

下载完双击装置文件装置好就能够了，大约十分钟下载和装置

Flutter SDK 下载与装备

在Flutter官网下载：flutter.cn/docs/develo…

解压缩文件，我这儿解压到 /Users/sugood/devlibs/flutter 文件夹下，这个途径是自己界说的，等会需求用到

装备环境变量

在终端输入指令 sudo vi ~/.bash_profile ,进入装备，需求输入暗码。
输入i,进入vim的修改形式，在恣意一行增加Flutter SDK的途径

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

这儿的 $H O M E 是用户文件夹的意思。$ HOME/devlibs/flutter/bin 便是/Users/sugood/devlibs/flutter 的途径（我电脑的用户是sugood）

按ESC键退出修改形式，再输入:wq 保存。如下图：

然后在终端上履行 source ~/.bash_profile ，刷新环境变量

5.最终在终端上履行 flutter –version 指令检查版别号，打印以下信息便是成功了

注意：假如提示zsh: command not found: flutter，可依照以下步骤修复

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

软件装备

一、Android Studio翻开与装备

运转Android Studio

设置署理（Setup Proxy）根据自己的软件来设置

设置好后就比及下载最新的安卓SDK还有一些资源，当然点击Cancel也行，网络情况抱负也是能下载到最新的SDK和资源的。下载好之后咱们翻开Android Studio 的Tools->SDK Manager(SDK管理)

下载Flutter 需求用到的SDK东西，点击SDK Tools ,选上必要的东西，最终点击Apply 按钮后会下载选中的东西。

装置Flutter 和Dart 插件

我这儿展示了Flutter 插件的装置，Dart相同道理，两个插件都装置好之后，在插件中心显示如下：

在终端界面履行 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/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision c860cba910 (3 weeks ago), 2022-03-25 00:23:12 -0500
    • Engine revision 57d3bac3dd
    • Dart version 2.16.2
    • DevTools version 2.9.2
    • Pub download mirror https://pub.flutter-io.cn
    • Flutter 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/sdk
    • Platform android-32, build-tools 32.1.0-rc1
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/Contents/Home/bin/java
    • Java 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/Developer
    ✗ CocoaPods 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 web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2021.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7590822)

理论上除了XCODE会有问题，其他的应该不会有问题了，假如有问题就需求针对问题修复好才干进行下一步

翻开Android stuido并创立Flutter 项目,项目称号是ftest，安卓SDK地址便是上面装备的地址/Users/sugood/devlibs/flutter，第一次需求装备，今后没有修改都不需求动。

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

这个时分拿出安卓手机翻开开发这形式，连上电脑后，信任这台电脑，并挑选文件传输形式。就能在Android studio 界面看到这台手机了
点击运转按钮，比及编译成功并主动装置到手机上后，没什么意外手机上就能看到如下界面

假如你顺畅地走到这一步，那么恭喜你，你现已完结了70%了，这个时分XCODE应该刚好装置完结。应该还没超越一个小时。假如很不幸，XCODE还没装置好，那么你或许能够先歇息下☕️，反正后面的东西不多了

三、跑通iOS DEMO

针对前面flutter doctor –verbose的xcode的过错提示，在终端上履行 sudo gem install cocoapods 装置 cocoapods
装置完结cocoapods后，在终端上履行flutter doctor –verbose ,能够看到cocoapods版别，也没有其他报错了。这样整个Flutter开发环境就现已搭好了。