美文网首页
Flutter初探

Flutter初探

作者: tangyefei | 来源:发表于2019-06-07 23:38 被阅读0次

Flutter的热度很高,在项目中即将开始应用它,本篇简单介绍如何在MacOS中安装和配置一个Hello World(支持在IOS模拟器 和 Android模拟器上运行)。

参考地址:https://flutter.dev/docs/get-started/install/macos

Flutter SDK安装

下载 Flutter SDK 并解压到对应目录

$ mkdir ~/Documents/applications
$ cd ~/Documents/applications
$ mv ~/Downloads/flutter_macos_v1.5.4-hotfix.2-stable.zip ./flutter.zip
$ unzip ./flutter.zip

获取到Flutter SDK的目录用于配置$PATH

$ cd flutter
$ pwd  

# 例如 
# /Users/yefeitang/Documents/applications/flutter

打开 ~/.bash_profile 追加一行,保存后执行 source

$ vim ~/.bash_profile

# 追加如下一行
# PATH="/Users/yefeitang/Documents/applications/flutter/bin/:${PATH}"

$ source ~/.bash_profile

在iOS上运行第一个Flutter程序

检查运行在iOS上的所需的工具

我们可以执行flutter doctor命令来检查需要安装的其他工具,如下为在iOS这一项上的输出:

[✗] iOS toolchain - develop for iOS devices
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS development.
      Download at: https://developer.apple.com/xcode/download/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
    ✗ libimobiledevice and ideviceinstaller are not installed. To install with Brew, run:
        brew update
        brew install --HEAD usbmuxd
        brew link usbmuxd
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    ✗ ios-deploy not installed. To install:
        brew install ios-deploy
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS.
        For more info, see https://flutter.dev/platform-plugins
      To install:
        brew install cocoapods
        pod setup

XCode安装

https://developer.apple.com/download/more/ 可以看到可供下载的XCode版本,尝试下载跟自己系统兼容的XCode版本,无法用迅雷下载,用浏览器下载到一半失败了,无奈把操作系统升级到了最新版本,然后通过App Store安装了最新版本的XCode。

然后在执行 sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer 即可。

其他工具安装

按照上述输出的log执行安装即可,可能也需要耗费一些时间。

$ flutter doctor

打开iOS模拟器

使用命令行可以打开iOS模拟器

$ open -a Simulator

Simulator > Hardware > Device 中可以选择模拟的设备

Simulator > Window 中有若干选项可以调整展示尺寸

创建第一个Flutter App

$ cd ~/Documents/projects
$ flutter create my_first_flutter
$ cd my_first_flutter
$ flutter run

在Andriod上运行第一个Flutter程序

要在安卓设备上使用Flutter,必须安装Android Studio,因为依赖它来提供各种依赖。但是可以使用全天的代码编辑器来书写你的代码。

安装Android Studio

下载Android Studio,第一次打开时,Android Studio Setup Wizard 会引导安装开发所需:

  • Android SDK
  • Android SDK Platform-Tools
  • and Android SDK Build-Tools

配置Andriod模拟器

  1. 打开电脑的 VM acceleration(自己跳过了似乎没什么影响)
  2. 创建虚拟设备:Android Studio > Tools > Android > AVD Manager,选择Create Virtual Device,然后创建自己所需要的设备类型,system image推荐选择 x86 或 x86_64类型,在 Emulated Performance 中,选择 Hardware - GLES 2.0 用于激活硬件加速(自己实操作的时候发现不能选),确认无误后就创建成功了。
  3. 在 Android Virtual Device Manager 所创建的设备列表中,点击 run 的图标就可以打开模拟器展示默认的图案。

相关文章

  • Flutter - Key的原理

    前言 上篇文章我们简单探索了Flutter的渲染原理---Flutter初探渲染原理初探[https://www....

  • Flutter优秀文章汇总_闲鱼5连,6连(更新最后一公里)

    转载 Android Flutter内存初探 Flutter是如何使用内存,又会对Native App的内存带来哪...

  • Android Flutter实践内存初探

    摘要:Android Flutter实践内存初探 闲鱼技术-匠修我们想使用Flutter来统一移动App开发并做了...

  • Flutter 初探

    Flutter 是 Google 用以帮助开发者在 iOS 和 Android 两个平台开发高质量原生应用的全新移...

  • Flutter初探

    官网介绍:Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flu...

  • Flutter初探

    简述 Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。Flutte...

  • Flutter初探

    作为一名长期web前端开发,这次涉及app开发,我自我感觉确实有点膨胀。本篇我主要是以web开发者在flutter...

  • Flutter初探

    Flutter的热度很高,在项目中即将开始应用它,本篇简单介绍如何在MacOS中安装和配置一个Hello Worl...

  • Flutter初探

    以下内容来自组内分享,如有侵权,请联系作者删除。目录: 什么是Flutter? Flutter环境配置 如何创建一...

  • Flutter 初探

    Flutter是一款移动应用程序SDK,一份代码可以同时生成iOS和Android两个高性能、高保真的应用程序,媲...

网友评论

      本文标题:Flutter初探

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