初识Flutter

2017-11-26  本文已影响60人  CaryZheng

简介


Flutter 是一套全新的移动应用 SDK,旨在帮助开发和设计人员构建现代的移动应用(包括 iOS 和 android )。

Flutter 官网: https://flutter.io/
Flutter Github: https://github.com/flutter/flutter

开发环境


注意: Flutter 目前仍处于 alpha 阶段,所以本文以 alpha 版本为例,基于 macOS 。

  1. clone repo

创建 flutter SDK 存储目录,克隆 flutter SDK 仓库。

$ git clone -b alpha https://github.com/flutter/flutter.git
$ export PATH=`pwd`/flutter/bin:$PATH
  1. 检查SDK所需的依赖

执行如下命令:

$ flutter doctor

按提示安装相关的依赖即可,最后全部检查通过后,显示如下内容(实际内容与当前配置有关)

$ flutter doctor
[✓] Flutter (on Mac OS X 10.13.1 17B48, locale zh-Hans-CN, channel alpha)
    • Flutter at /Users/Cary/Documents/Flutter/SDK/flutter
    • Framework revision e8aa40eddd (6 weeks ago), 2017-10-17 15:42:40 -0700
    • Engine revision 7c4142808c
    • Tools Dart version 1.25.0-dev.11.0

[✓] Android toolchain - develop for Android devices (Android SDK 25.0.3)
    • Android SDK at /Users/Cary/Documents/android-sdks
    • Platform android-25, build-tools 25.0.3
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-915-b08)

[✓] iOS toolchain - develop for iOS devices (Xcode 9.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 9.1, Build version 9B55
    • ios-deploy 1.9.2
    • CocoaPods version 1.3.1

[✓] Android Studio (version 3.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-915-b08)

[✓] IntelliJ IDEA Ultimate Edition (version 2017.2.5)
    • Flutter plugin version 19.1
    • Dart plugin version 172.4343.25

[✓] Connected devices
    • Android SDK built for x86 • emulator-5554                            • android-x86 • Android 5.0.2 (API 21) (emulator)
    • iPhone X                  • AA532CBE-BE7F-479F-B456-A43F5C1CA5EB     • ios         • iOS 11.1 (simulator)

创建第一个项目


IDE 可选:

本文以 IntelliJ IDEA IDEA Ultimate edition 为例,进入 Preferences -> Plugins,搜索并安装 Flutter 插件,安装好后重启下 IDE 即可。

File -> New -> Project,按提示创建好项目,如下图:

ide_create_project_step_1.jpg ide_create_project_step_2.jpg

最后执行 Run 'main.dart' 即可在 模拟器 / 真机 ( iOS / android )上运行第一个 Flutter项目 (默认生成的模版代码)。

运行效果如下:

Simulator Screen Shot - iPhone X.png
上一篇下一篇

猜你喜欢

热点阅读