初识Flutter

本篇简单的介绍了Flutter,并进行Flutter环境的安装配置。更多详细信息可以查看Flutter官网Flutter中文网

什么是Flutter

Flutter 是Google推出并开源的移动应用开发框架,主打跨平台、高保真、高性能。开发者可以通过Dart语言进行开发App,并且只需要一套代码就可以同时构建Android和iOS应用,并且性能可以达到原生应用一样的性能。Flutter提供了丰富的组件、接口,开发者可以很快地为 Flutter添加native扩展。

安装Flutter

在开始使用Flutter之前,当然要先装好Flutter的环境啦。想要开发iOS应用只能在 macOS 上进行,所以这里只讲macOS上的环境搭建。在此之前读者可以先安装好Android StudioXcode,以及Homebrew

系统要求

要安装并运行Flutter,您的开发环境必须满足以下最低要求:

  • 操作系统: macOS (64-bit)
  • 磁盘空间: 700 MB (不包括Xcode或Android Studio的磁盘空间).
  • 工具: Flutter 依赖下面这些命令行工具:
    • bash、mkdir、rm、git、curl、unzip、which

获取Flutter

  1. Flutter官网下载最新版的可用安装包,官网地址:https://flutter.io/sdk-archive/#macos注意,如果官网上不去,也可以去GitHub的Flutter项目下去下载安装包,下载地址:https://github.com/flutter/flutter/releases
  2. 解压之前下载下来的安装包到你想要安装的目录下,如
cd ~/flutter
unzip ~/Downloads/flutter_macos_v1.0.0-stable.zip
  1. 配置环境变量

编辑Home目录下的.bash_profile文件,添加

export PUB_HOSTED_URL=https://pub.flutter-io.cn #镜像地址
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn #镜像地址
export $FLUTTER_ROOT=/Users/xxx/flutter #xxx是用户名
export PATH=$PATH:$FLUTTER_ROOT/bin

由于在国内访问Flutter有时可能会受到限制,Flutter官方为中国开发者搭建了临时镜像,此镜像为临时镜像,并不能保证一直可用,读者可以参考https://github.com/flutter/flutter/wiki/Using-Flutter-in-China 以获得有关镜像服务器的最新动态。

  1. 配置Android环境

在安装好Android Studio的前提下,打开Android Stduio,进入Preferences(⌘+,)-> Plugins -> 安装Flutter插件,重启Android Studio

  1. 运行flutter doctor 命令

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

flutter doctor

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

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.0.0, on Mac OS X 10.14.2 18C54, locale en-CN)
[✓] Android toolchain - develop for Android devices (Android SDK 28.0.3)
[!] iOS toolchain - develop for iOS devices (Xcode 10.1)
    ✗ 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 with Brew:
        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.io/platform-plugins
      To install:
        brew install cocoapods
        pod setup
[✓] Android Studio (version 3.2)
[!] Connected device
    ! No devices available

! Doctor found issues in 2 categories.

第一次运行一flutter命令(如flutter doctor)时,它会下载它自己的依赖项并自行编译。以后再运行就会快得多。缺失的依赖需要安装一下,安装完成后再运行flutter doctor命令来验证是否安装成功。

  1. 配置iOS环境

在安装好Xcode的前提下,配置Xcode命令行工具以使用新安装的Xcode版本,确保Xcode许可协议是通过打开一次Xcode或通过命令sudo xcodebuild -license同意过了.

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -license

通过步骤5运行flutter doctor得到的结果,可以看到已经提示你需要做的事情了,根据提示,使用brew安装所需要的插件,例如:

brew update
brew install --HEAD usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice
brew install ideviceinstaller
brew install ios-deploy
brew install cocoapods
pod setup

等待一段时间安装完成后,可以再次运行 flutter doctor 检查,结果显示:

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.0.0, on Mac OS X 10.14.2 18C54, locale en-CN)
[✓] Android toolchain - develop for Android devices (Android SDK 28.0.3)
[✓] iOS toolchain - develop for iOS devices (Xcode 10.1)
[✓] Android Studio (version 3.2)
[!] Connected device
    ! No devices available

! Doctor found issues in 1 category.

其中一个[!]是因为没有连接设备造成的,可以忽略

至此,Flutter的环境算是安装完成了。

创建Flutter项目

使用Terminal方式创建

flutter create myapp

使用Android Studio创建

打开Android Studio,选择红框位置
使用Android Studio创建Flutter 项目
第一次使用Android Studio创建的话,耐心等待一段时间之后就会弹出一下窗口:创建工程
之后按照提示操作就可以了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值