专注于前端开发, 追求更好的用户体验, 更好的开发体验 [长沙前端QQ群:234746733]

flutter

  • Flutter开发环境搭建

    / 分类: 开发 / No Comments

    安装Dart
    brew tap dart-lang/dart
    brew install dart
    # ~/.zshrc 或 ~/.bashrc 新增1行:
    export PATH="$HOME/.pub-cache/bin:$PATH" # pub
    安装fvm (同时安装多个flutter版本)
    pub global activate fvm
    fvm install stable # 或指定比如: 1.10.7, [Versions](http://url.cn/52OcNkr)
    # ~/.zshrc 或 ~/.bashrc 新增1行:
    export PATH="$HOME/fvm/versions/stable/bin:$PATH" # fullter
    # fvm list # 已安装的版本号
    flutter version manager

    fvm或者flutter channel切换版本都不太好用(一个是需要以fvm开始命令, 一个是不能按项目切换版本),
    推荐使用 direnv 设定:

    brew install direnv
    # 项目目录内执行 (指定了version为stable):
    direnv allow;
    echo 'VERSION="stable"; export PATH="$HOME/fvm/versions/$VERSION/bin:$PATH"' > .envrc;
    信息打印
    flutter --version
    flutter doctor -v # 检查环境配置
    # 安装依赖, 比如 XCode, Android Studio
    brew install cocoapods
    编辑器设定:
    • VSCode

      • Extensions安装:Flutter, Dart
      • 如果 VSCode 提示: Could not find a flutter SDK: 重启下VSCode
      • quicktype插件, 根据JSON生成Data Class. 用法:

        • VSCode > Settings 设定 "quicktype.justTypes": false
        • 创建并打开xxx.dart, 复制json代码, VSCode: view > Command Palette > Paste JSON as Code, 根据剪贴板的json生成Code.
        • 生成的code, 最好正则替换下: \b(json\[.*\]).map\( > ($1 ?? []).map(, fromJson\((json\[.*\])\) > fromJson($1 ?? {})
    • Android Studio

      • Android Studio(启动并完成设置向导, Configure/Plugins安装: Flutter, Dart)
      • shell执行: flutter doctor --android-licenses
      • Perferences:

        • Flutter Sdk path: <user>/fvm/versions/stable
        • Dart Sdk path: <user>/fvm/versions/stable/bin/cache/dart-sdk
    模拟器
    • Android模拟器, Android Studio配置:

      • Configure/Tools - AVD Manager, Create Virtual Device, 选择一个设备, Next.
      • 其他版本Android: Preferences - Appearance & Behavior - System Settings - Android SDK, 勾选版本(比如: Android 8.0)安装.
    • IOS模拟器, Xcode配置:

      • Open Developer Tool - Simulator, Hardware - Device, 选择iOS和iPhone型号.
      • 其他版本iOS: Perferences - Components, Simulator 选择一个iOS版本下载.
    flutter emulators # 列出模拟器
    # flutter emulators --launch apple_ios_simulator # 启动模拟器

    环境搭建完毕, 推荐用VSCore开发.

    查看全文 »

  • Dart 语言介绍

    / 分类: 开发 / No Comments

    把年初对dart/flutter/RN的分享内容慢慢整理下, 希望对刚入门app开发的同学有用.

    Dart是什么?

    • Google造的轮子(弥补js的不足)
    • 落: JavaScript(NodeJS/React/RN/Vue等)崛起
    • 起: Google内部孵化了Sky项目(用Dart编写, 后改名Flutter)
    • Google的未来操作系统Fuchsia中,Dart被指定为官方的开发语言
    • 2018年8月正式发布 Dart 2.0
    • Dart可运行在有自己的VM上(DartVM), 也可以编译成Native Code运行在硬件上(Flutter将代码编译成Native Code).

    Dart特性

    • 单线程异步事件模型(single-threaded), similar to NodeJS
    • 强类型语言,支持弱类型写法(2.0开始)
    • DartVM的性能比肩Java7的JVM(作者Lars Bak负责了 HotSpot JVM/V8 engine)
    • 面向对象的,一切数据类型派生自 Object
    • 独特的隔离区(Isolate), 可以实现多线程 (与线程类似但不共享内存)
    • Future、Stream模型(Dart:async库的核心API, 异步编程)
    • 跨平台: 前端、后端、移动

    Dart的方向 (Flutter: iOS,Android,Fuchsia,web,desktop)

    • Native (原生, 移动app/桌面程序)
    • server-side(Server端, 异步高并发/Isolate多线程)
    • client-side(前端, 利用dart2js编译成js)

    Dart 语法

    main() { // 应用的入口, 程序开始执行的地方
     print("Hello, world!");  // 打印信息
    }

    查看全文 »