慕课网《Flutter从入门到进阶》学习笔记一

第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),
    ),
)

Flutter常用控件:WidgetColumRowStackListViewTextTextField

第三方库: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)

开发环境搭建:

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
  • 获取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

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

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


几个命令

  • 启动iOS模拟器:
open -a Simulator
  • 创建1个Flutter项目:
flutter create my_app
  • 启动flutter项目:
flutter run

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

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

AS上面工具栏:
在这里插入图片描述

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

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

emulator -avd huawei

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

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


3-7 Flutter开发工具指南

工具栏:
在这里插入图片描述
Android SDK配置目录:点击Edit按钮可以初始化SDK
在这里插入图片描述

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

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


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

亲身体验全tmd是坑


猜你喜欢

转载自blog.csdn.net/qq_34307801/article/details/113119710