美文网首页
搭建Flutter开发环境 2019-03-18

搭建Flutter开发环境 2019-03-18

作者: 黄昭鸿 | 来源:发表于2019-03-18 16:47 被阅读0次

    标签(空格分隔): Flutter Dart


    由于Flutter会同时构建Android和IOS两个平台的发布包,所以Flutter同时依赖Android SDK和iOS SDK,在安装Flutter时也需要安装相应平台的构建工具和SDK。


    使用镜像

    由于在国内访问Flutter有时可能会受到限制,Flutter官方为中国开发者搭建了临时镜像,大家可以将如下环境变量加入到用户环境变量中:

    export PUB_HOSTED_URL=https://pub.flutter-io.cn
    export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
    

    注意: 此镜像为临时镜像,并不能保证一直可用,读者可以参考https://flutter.io/community/china以获得有关镜像服务器的最新动态。

    在Windows上搭建Flutter开发环境

    请确保可以在命令提示符或PowerShell中运行 git 命令

    获取Flutter SDK

    1. 去flutter官网下载其最新稳定版的安装包,官网地址:https://flutter.io/sdk-archive/#windows,也可以去Flutter github项目下去下载安装包,地址:https://github.com/flutter/flutter/releases
    2. 将安装包zip解压到你想安装Flutter SDK的路径(如:C:\src\flutter;注意,不要将flutter安装到需要一些高权限的路径如C:\Program Files\)。
    3. 在Flutter安装目录的flutter文件下找到flutter_console.bat,双击运行并启动flutter命令行,接下来,你就可以在Flutter命令行运行flutter命令了。

    更新环境变量

    如果你想在Windows系统自带命令行(而不是)运行flutter命令,需要添加flutter\bin 的全路径到用户PATH环境变量。

    运行 flutter doctor命令

    在Flutter命令行运行如下命令来查看是否还需要安装其它依赖,如果需要,安装它们:

    flutter doctor
    

    该命令检查你的环境并在命令行窗口中显示报告。Dart SDK已经在打包在Flutter SDK里了,没有必要单独安装Dart。仔细检查命令行输出以获取可能需要安装的其他软件或进一步需要执行的任务。

    Android设置

    Flutter依赖于Android Studio的全量安装。Android Studio不仅可以管理Android 平台依赖、SDK版本等,而且它也是Flutter开发推荐的IDE之一。

    安装Android Studio

    下载并安装 Android Studio,下载地址:https://developer.android.com/studio/index.html 。安装参见https://www.zybuluo.com/nextleaf/note/1429456

    在macOS上搭建Flutter开发环境

    在masOS下可以同时进行Android和iOS设备的测试。
    获取Flutter SDK、设置环境变量、运行 flutter doctor命令、安装 Xcode和安装 Xcode。

    IDE配置与使用

    理论上可以使用任何文本编辑器与命令行工具来构建Flutter应用程序。 不过,Flutter官方建议使用Android Studio和VS Code之一以获得更好的开发体验。Flutter官方提供了这两款编辑器插件,通过IDE和插件可获得代码补全、语法高亮、widget编辑辅助、运行和调试支持等功能,可以帮助我们极大的提高开发效率。

    Android Studio 配置与使用

    安装Flutter和Dart插件

    VS Code的配置与使用

    VS Code是一个轻量级编辑器,支持Flutter运行和调试。

    安装flutter插件

    1. 启动 VS Code。
    2. 调用 View>Command Palette…。
    3. 输入 ‘install’, 然后选择 Extensions: Install Extension action。
    4. 在搜索框输入 flutter ,在搜索结果列表中选择 ‘Flutter’, 然后点击 Install。
    5. 选择 ‘OK’ 重新启动 VS Code。
    6. 验证配置
      • 调用 View>Command Palette…
      • 输入 ‘doctor’, 然后选择 ‘Flutter: Run Flutter Doctor’ action。
      • 查看“OUTPUT”窗口中的输出是否有问题

    创建Flutter应用

    1. 启动 VS Code
    2. 调用 View>Command Palette…
    3. 输入 ‘flutter’, 然后选择 ‘Flutter: New Project’ action
    4. 输入 Project 名称 (如myapp), 然后按回车键
    5. 指定放置项目的位置,然后按蓝色的确定按钮
    6. 等待项目创建继续,并显示main.dart文件

    连接设备运行Flutter应用

    Window下只支持为Android设备构建并运行Flutter应用,而macOS同时支持iOS和Android设备。下面分别介绍如何连接Android和iOS设备来运行flutter应用。

    连接Android真机设备

    要准备在Android设备上运行并测试Flutter应用,需要Android 4.1(API level 16)或更高版本的Android设备.

    1. 在Android设备上启用 开发人员选项 和 USB调试 。详细说明可在Android文档中找到。
    2. 使用USB将手机插入电脑。如果设备出现调试授权提示,请授权你的电脑可以访问该设备。
    3. 在命令行运行 flutter devices 命令以验证Flutter识别您连接的Android设备。
    4. 运行启动你应用程序 flutter run

    默认情况下,Flutter使用的Android SDK版本是基于你的 adb 工具版本。 如果想让Flutter使用不同版本的Android SDK,则必须将该 ANDROID_HOME 环境变量设置为相应的SDK安装目录。

    连接iOS真机设备

    要将Flutter应用安装到iOS真机设备,需要一些额外的工具和一个Apple帐户,还需要在Xcode中进行一些设置。

    略 。。。。

    整理自 https://book.flutterchina.club/chapter1/install_flutter.html

    相关文章

      网友评论

          本文标题:搭建Flutter开发环境 2019-03-18

          本文链接:https://www.haomeiwen.com/subject/hkdbmqtx.html