Flutter环境配置 + VSCode/AndroidStudio + 基础知识

Flutter里程碑信息

• 2014.10 - 原名 sky 在github 上开源
• 2015.10 - 更名为 Flutter, 使用 Dart语言开发，Dart 是Google于2011年推出的新的计算机编程语言
• 2017.05 - Google I/O 正式发布Flutter
• 2018.02 - Flutter推出 第一个 Beta版本(测试版本)
• 2018.6.21 - Google 发布 Flutter 的release预览版(最终测试版)
• 2019.02 - Flutter1.2发布增加对web的支持
• 2019.5.7 - 增加Flutter for Web，将Flutter的Dart代码直接编译为JavaScript, 就是用Dart 编译了 一个 可以再web端 执行的 程序。Flutter 正式成为一个全平台的框架。

Flutter支持的端

• Mobile端已经较为成熟，体验较于React Native 要好一些，具体原因待探究。
• Web 端演进中
• Desktop(桌面端)： 虽然不适用于生产环境，但是底层引擎已经基本成型，有待进一步整合。
• Embedded(嵌入智能设备)

学习Flutter需要哪些必备知识？

• Dart 语言基础
• Flutter对熟悉面向对象概念(类、方法、变量)和 命令式编程概念(循环、条件)经验者相对容易入门。

Flutter特点

• 快速开发
• 性能优越
• 富有表现力的精美UI
• Everything is Widget

Flutter架构

Flutter原理

Flutter for Web架构

对比Flutter,引擎层变了

下载安装Flutter + 并执行demo

• 第一步 --- 下载页选择下载
• 第二步--- 更新环境变量

    终端窗口临时更新环境变量
    export PATH=`pwd`/flutter/bin:$PATH
    
    永久更新环境变量
    export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户需要设置
    export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户需要设置
    export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH
    
    
    1. 将  source ~/.bash_profile
       注入  ~/.zshrc 文件中
       
    2.将
        export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH
        export PUB_HOSTED_URL=https://pub.flutter-io.cn
        export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
      注入  ~/.bash_profile 文件中
      (PATH_TO_FLUTTER_GIT_DIRECTORY 替换成 本机的 flutter文件路径)
      
    3.最后执行 flutter doctor
复制代码

AndroidStudio

• 第三步 --- 下载AndroidStudio 并安装插件 Flutter Dart
• 第四步 --- 通过 Android Stadio 的 File => New => New Flutter Project 去新建项目demo
• 第五步 --- 下载SDK 并 执行demo
  

  

VsCode

• 第三步 --- 安装插件 Flutter Dart
• 第四步 --- /cmd + /shirft + p => flutter new project
• 第五步 --- 打开调试工具 并执行