美文网首页程序员
Flutter 1.0 MAC环境入门实战

Flutter 1.0 MAC环境入门实战

作者: 迎风起飞的猪 | 来源:发表于2018-12-10 10:28 被阅读75次

    1. 使用镜像

    由于在国内访问Flutter有时可能会受到限制,Flutter官方为中国开发者搭建了临时镜像
    大家可以将如下环境变量加入到用户环境变量中:
    打开终端:运行下面两行代码:
    export PUB_HOSTED_URL=https://pub.flutter-io.cn
    export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
    **注意:** 此镜像为临时镜像,并不能保证一直可用,读者可以参考详情请参考 [Using Flutter in China](https://github.com/flutter/flutter/wiki/Using-Flutter-in-China) 以获得有关镜像服务器的最新动态。
    
    系统要求
    要安装并运行Flutter,您的开发环境必须满足以下最低要求:
    操作系统: macOS (64-bit)
    磁盘空间: 700 MB (不包括Xcode或Android Studio的磁盘空间).
    工具: Flutter 依赖下面这些命令行工具.
    bash, mkdir, rm, git, curl, unzip, which
    

    2. 获取Flutter SDK
    去Flutter官网下载最新版本

    下载成功后,把FlutterSDK 放到指定的目录中
    运行 flutter doctor

    ## iOS 设置
    
    ### 安装 Xcode
    
    要为iOS开发Flutter应用程序,您需要Xcode 7.2或更高版本:
    
    1.  安装Xcode 7.2或更新版本(通过[链接下载](https://developer.apple.com/xcode/)或[苹果应用商店](https://itunes.apple.com/us/app/xcode/id497799835)).
    
    2.  配置Xcode命令行工具以使用新安装的Xcode版本 `sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer` 对于大多数情况,当您想要使用最新版本的Xcode时,这是正确的路径。如果您需要使用不同的版本,请指定相应路径。
    
    3.  确保Xcode许可协议是通过打开一次Xcode或通过命令`sudo xcodebuild -license`同意过了.
    
    使用Xcode,您可以在iOS设备或模拟器上运行Flutter应用程序。
    
    ### 设置iOS模拟器
    
    要准备在iOS模拟器上运行并测试您的Flutter应用,请按以下步骤操作:
    
    1.  在Mac上,通过Spotlight或使用以下命令找到模拟器:
    
    使用terminal(终端)
    $:open -a Simulator
    2. 通过检查模拟器 硬件>设备 菜单中的设置,确保您的模拟器正在使用64位设备(iPhone 5s或更高版本).
    3. 根据您的开发机器的屏幕大小,模拟的高清屏iOS设备可能会使您的屏幕溢出。在模拟器的 Window> Scale 菜单下设置设备比例
    4. 运行 flutter run启动您的应用.
    

    安装到iOS设备

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

    1. 安装 homebrew (如果已经安装了brew,跳过此步骤).
    2. 打开终端并运行这些命令来安装用于将Flutter应用安装到iOS设备的工具
    brew update
    brew install --HEAD libimobiledevice
    brew install ideviceinstaller ios-deploy cocoapods
    pod setup
    

    Android Studio

    ## Android Studio 安装
    
    *Android Studio:* 为Flutter提供完整的IDE体验
    
    ### 安装Android Studio
    
    *   [Android Studio](https://developer.android.com/studio/index.html), 3.0或更高版本.
    
    或者,您也可以使用IntelliJ:
    
    *   [IntelliJ IDEA Community](https://www.jetbrains.com/idea/download/), version 2017.1或更高版本.
    *   [IntelliJ IDEA Ultimate](https://www.jetbrains.com/idea/download/), version 2017.1 或更高版本.
    
    ### 安装Flutter和Dart插件
    
    需要安装两个插件:
    
    *   `Flutter`插件: 支持Flutter开发工作流 (运行、调试、热重载等).
    *   `Dart`插件: 提供代码分析 (输入代码时进行验证、代码补全等).
    
    要安装这些:
    
    1.  启动Android Studio.
    2.  打开插件首选项 (**Preferences>Plugins** on macOS, **File>Settings>Plugins** on Windows & Linux).
    3.  选择 **Browse repositories…**, 选择 Flutter 插件并点击 `install`.
    4.  重启Android Studio后插件生效.
    
    
    *Android Studio:* 为Flutter提供完整的IDE体验.
    
    ## 创建新应用
    
    1.  选择 **File>New Flutter Project**
    2.  选择 **Flutter application** 作为 project 类型, 然后点击 Next
    3.  输入项目名称 (如 `myapp`), 然后点击 Next
    4.  点击 **Finish**
    5.  等待Android Studio安装SDK并创建项目.
    
    上述命令创建一个Flutter项目,项目名为myapp,其中包含一个使用[Material 组件](https://material.io/guidelines/)的简单演示应用程序。
    
    在项目目录中,您应用程序的代码位于 `lib/main.dart`.
    
    ## 运行应用程序
    
    1.  定位到Android Studio 工具栏:
        ![Main IntelliJ toolbar](https://img.haomeiwen.com/i1712705/d637f9fd42febee3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
    2.  在 **target selector** 中, 选择一个运行该应用的Android设备. 如果没有列出可用,请选择 **Tools>Android>AVD Manager** 并在那里创建一个
    3.  在工具栏中点击 **Run图标**, 或者调用菜单项 **Run > Run**.
    4.  如果一切正常, 您应该在您的设备或模拟器上会看到启动的应用程序:
        ![Starter App on Android](https://img.haomeiwen.com/i1712705/a937d5c4fdea9695.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
    ## 体验热重载
    
    Flutter 可以通过 *热重载(hot reload)* 实现快速的开发周期,热重载就是无需重启应用程序就能实时加载修改后的代码,并且不会丢失状态(译者语:如果是一个web开发者,那么可以认为这和webpack的热重载是一样的)。简单的对代码进行更改,然后告诉IDE或命令行工具你需要重新加载(点击reload按钮),你就会在你的设备或模拟器上看到更改。
    
    1.  将字符串
        `'You have pushed the button this many times:'` 更改为
        `'You have clicked the button this many times:'`
    2.  不要按“Stop”按钮; 让您的应用继续运行。
    3.  要查看您的更改, 只需调用 **Save All** (`cmd-s` / `ctrl-s`), 或点击 **热重载按钮** (带有闪电⚡️图标的按钮).
    
    你就会立即看到更新后的字符串。
    
    

    相关文章

      网友评论

        本文标题:Flutter 1.0 MAC环境入门实战

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