慕课网《Flutter从入门到进阶》学习笔记一_flutter 技术进阶学习笔记.pdf

第1章 学习指南

1-1 课程介绍与学习指南

2018年12月Flutter 1.0发布。

课程涵盖：

• 最新Flutter技术
• 最火Flutter技术
• Flutter开发经验
• Flutter开发技巧

学习收获：

• 彻底入门
• 掌握系统化的Flutter开发技能
• 理解整个Flutter项目的开发流程，掌握系统化的
• 规范的代码编写与工程化封装思想
• 上手中大型Flutter项目的开发

难点：Flutter与ios、安卓混合开发

学习进度：

项目关键技术：

1-2 项目需求分析、技术分解

主要是Flutter技术栈脑图，后期补

第2章 Flutter学习经验

2-1 Android开发者如何快速上手Flutter开发

Android开发者最容易上手Flutter。
Dart语言是面向对象的，静态类型的，强类型语言。

Flutter采用的是声明式UI布局方式，效果如下：

Container(
    decoration: BoxDecoration(color: Colors.grey),
    child: Text(
    '声明式布局',
    style: TextStyle(
        fontSize: 20, fontWeight: FontWeight.w600, color: Colors.red),
    ),
)
1
2
3
4
5
6
7
8

Flutter常用控件：Widget、Colum、Row、Stack、ListView、Text、TextField。

第三方库：Flutter官网插件pub.dev

2-2 iOS开发者如何快速上手Flutter开发

布局：

• iOS采用命令式的UI编程风格
• Flutter采用的是声明式UI布局方式

2-3 React Native开发者如何快速上手Flutter开发

Flutter与React Native一样，Flutter使用反应式视图。 不同的是React Native是将布局转换成原生Android或iOS的控件，而Flutter则是编译为本机代码。 Flutter控制屏幕上的每个像素，这避免了由于需要JavaScript桥接而导致的性能损失。

2-4 前端开发者如何快速上手Flutter开发

Dart和JavaScript区别：

• Dart：强类型，静态，面向对象
• JavaScript：弱类型，动态类型，非面向对象

相关文档

Flutter中文网

Android Studio用户指南

第三章 Flutter入门：开发工具准备与开发环境搭建

导言

详细安装过程见之前文档《Flutter开发环境在Mac上的搭建(iOS和Android图文详细过程》

3-2 开发工具选择

Mac可以同时开发iOS和Android，Windows只能开发Andorid。

Visual Studio Code无法调试Android，Android Studio除了可以调试Android，还能调试iOS，同时AS是Google亲儿子。

3-3 Flutter开发环境与iOS开发环境设置（Mac）

开发环境搭建：

• 系统要求
• 设置Flutter镜像：获取最新的Flutter镜像。
  .bash_file：

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
1
2

• 获取Flutter SDK：官网下载地址，建议使用稳定版SDK。
• iOS开发环境设置：运行flutter doctor检查是否满足flutter运行环境。需要安装Xcode。
• Android开发环境设置：安卓SDK、安卓模拟器、安卓工具、安卓平台工具在环境变量配置.

#Android环境变量
export ANDROID_HOME=/Users/becomebamboo/Library/Android/sdk
export PATH=${PATH}:${ANDROID_HOME}/emulator
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
1
2
3
4
5

flutter 文件路径：

• ios：ios宿主工程
• android：安卓宿主工程
• pubspec.yaml：依赖包配置文件
• lib：代码目录，主程序main.dart

iOS模拟器操作技巧：

• 热加载：r
• 热重启：R
• 退出命令行工具：q
• 帮助：h

如何将Flutter安装到iOS真机？

• 需要额外工具和Apple账户
• Xcode中进行设置
• 使用flutter run命令在真机运行

打开Runner.xcworkspace设置Xcode：主要是签名和BundleId

open ios/Runner.xcworkspace
1

苹果手机手机设置 - 通用- 设备管理 ，信任第一次运行的Flutter程序。

几个命令

• 启动iOS模拟器：

open -a Simulator
1

• 创建1个Flutter项目：

flutter create my_app
1

• 启动flutter项目：

flutter run
1

3-4 Android开发环境设置与Flutter插件安装(Mac)

Android Studio更新特别快，没问题千万不要更新！！！
Android Studio用户指南官网

AS上面工具栏：

一般调试Flutter直接真机运行，有些功能（比如调用高德地图）不能在模拟器实现。

因为在环境变量.bash_peofile中配置了安卓模拟器emulator，可以直接如下启动huawei模拟器：

emulator -avd huawei
1

真机运行Flutter需要在开发人员选项 - USB调试，信任该手机，即在安卓手机开启调试者模式。

使用flutter devices检测是否连接手机。

3-7 Flutter开发工具指南

工具栏：

Android SDK配置目录：点击Edit按钮可以初始化SDK

项目结构面板：可以切换到Android视角，这里有问题无法切换

打开项目文件大片红色波浪线解决办法：File -> Invalidate Caches/Restart

3-8 本章小结-环境、工具、版本等问题(避坑指南)

亲身体验全tmd是坑