阅读 225

Flutter 2.0 小记

0、关于科学 clone flutter

#只对github.com科学 git config --global http.github.com.proxy socks5://127.0.0.1:<对应的端口号>

#取消代理 git config --global --unset http.github.com.proxy)

1、编译时出现 pubspec.yaml 对应的依赖库报错

输入指令 flutter pub get ,主要问题是 flutter 1.0 升级到 2.0 后,一些依赖库不能兼容的问题

YAML 语法

flutter 国际化的库 intl

Flutter 应用里的国际化

Flutter ARB file (.arb)

Dart2's pubspec file

Dart2's Package dependencies

  • dependencies: 依赖包将作为APP的代码的一部分参与编译,生成最终的安装包

  • dev_dependencies: 只是作为开发阶段的一些工具包,主要是用于帮助我们提供开发、测试效率,比如Flutter的自动化测试包等

  • dependency_overrides: 可以用于"覆盖依赖",比如工程依赖的之前依赖的某个库,最新发布了一个测试版本,这个时候想体验一下这个版本,就可以用到这个属性

2、编译构建时间过长

记得查看 Android 工程的 build.gradle 配置,是否为现有的环境配置,避免不必要的下载

4、/Android/sdk/ndk-bundle did not have a source.properties file

在 android 模块的 local.properties 文件添加 ndk.dir=<本地NDK路径>,如果还有问题那就是 NDK 版本的问题了。

5、runApp(const GalleryApp());

prefer_const_constructors

Deconstructing Dart Constructors

Dart2 using-constructors

6、mixin、with、on

Adding features to a class: mixins

Dart Mixins混入机制详解

构造函数不是继承

Mixin

7、Dart ?? 运算符

参考运算符

级联表示法 (..)

级联(..)允许您在同一个对象上创建一个操作序列。除了函数调用之外,您还可以访问同一对象上的字段。这通常可以省去创建临时变量的步骤,能使你更为流畅的写代码。

用单引号

///仅仅在b为空的情况下b被赋值value否则b的值不变 b ??= value;

7.1、集合的扩展操作符

8、Flutter 基础类 —— Key

Keys! What are they good for?

Flutter中Key的作用

9、MaterialApp

BottomNavigationBar

10、应用名称和Icon配置

Change Application Name and Icon in Flutter project(Android and iOS)

flutter_launcher_icons

dev_dependencies: 
  flutter_launcher_icons: "latest version"
  
flutter_icons:
  android: true
  ios: true
  image_path: "assets/icon/icon.png"
复制代码

11、Dart2 的 “头文件” —— export 关键字

Dart2 关键字

Organizing a library package (组织一个包的库)

part 和 part of (不推荐)

12、Flutter Bloc

Bloc Packages

Bloc 源码和范例

Flutter 官方 Cookbook

Architect your Flutter project using BLOC pattern

Getting Started with the BLoC Pattern

Introduction to Flutter BLoC Pattern | Flutter Bloc tutorial with Example

Cubit介紹&Bloc優缺比較:

image.png

image.png

cubit 優點: 簡單、簡潔且較少程式碼。cubit(state only), bloc(state, event and mapEventToState)。不需要使用 async* 也不需要了解 yield* 的概念,僅需呼叫 emit 來作狀態切換。

bloc 優點:

  1. 可追溯性高:bloc 最大的優點就是能知道一系列的事件觸發順序與狀態的改變。因此對於需要清楚知道狀態改變的功能來說會是一大優點。最常見的例子大概是認證/登錄。
  2. Bloc優於Cubit的另一個領域是我們需要利用響應式編程(reactive operators),像是buffer, debounceTime, throttle,等。舉例來說,如果我們需要實作一個即時的搜尋功能,但我們會想要減少跟server的request(debounce)以避免達到上限限制及減輕server負荷。在bloc中可以override transformEvents 來改變傳入event的處理。

總結

Cubit 大幅減低了使用 Bloc 的複雜度及減少 boilerplate code,卻還是能與 bloc 兼容操作。對於新的開發人員來說,上手難度更是降低不少。也因為能與 bloc 相容,如果一開始在選擇上不知道該以 cubit 還是 bloc 實作的話,建議先以 cubit 實作,必要時還是能快速重構成 bloc !

13、Flutter 框架结构、内存管理、线程通信

Flutter 是如何跨平台的

Flutter 原理

Flutter 架构概览

image.png

Dart 内存管理机制 (或者这里)

Dart内存机制

image.png

Flutter: Don’t Fear the Garbage Collector

isolate 不共享内存的线程

Flutter中的垃圾回收机制

深入理解Flutter引擎线程模式

Async widgets

Flutter线程模型

深入理解Flutter的Isolate创建过程

Flutter的dart代码默认运行在root isolate,即便是创建的异步future方法也不例外,而对于耗时方法势必会导致UI线程阻塞,从而导致卡顿。如何解决这个问题呢,那就是针对耗时的操作,需要创建新的isolate,isolate采用的是同一进程内的多线程间内存不共享的设计方案。dart语言之所以这样设计isolate,是为了避免线程竞争出现。正因为isolate之间无法共享内存数据,为此同时设计了套SendPort/ReceivePort的Port端口通信机制,让各isolate间彼此独立,但又可以相互的通信。对于port通信的实现原理其实还是异步消息机制。Dart的Isolate是由Dart VM管理的,对于Flutter引擎也无法直接访问。

通过阅读整个isolate源码过程,不难发现,每一次创建新的isolate的同时会通过pthread_create()来创建一个OSThread线程,isolate的工作便是在该线程中运行,其实可以简单理解成isolate是一种内存不共享的线程,isolate只是在系统现在线程基础之上做了一层封装而已。可通过Dart_CreateIsolate和Dart_ShutdownIsolate分别对应isolate的创建与关闭。

關於Flutter你要知道的可能都在這兒

flutter-threadsetup-isolatesetup.png

14、Dart2 类的对象 "equal"

Equatable PackagePub:

用于避免 Dart2 编写类似下面的模板代码

  • @override bool operator ==(Object other) =>
  • @override int get hashCode =>

class EquatableDateTime extends DateTime with EquatableMixin {

@override
 List<Object> get props {
   return [year, month, day, hour, minute, second, millisecond, >microsecond];
 }
 ....
}
复制代码
class EquatableDateTimeSubclass extends EquatableDateTime {
  final int century;
  .....

  @override
  List<Object> get props => super.props..addAll([century]);
}
复制代码

15、fluter 的代码规范工具 (lint)

pedantic

effective_dart

16、BlocProvider

flutter_bloc 的 BlockProvider

BlocProvider-class 源码详解

深入了解状态管理--BLoC

TODO: 为何 flutter_complex_list 的 ListPage 中的 body: BlocBuilder builder 函数触发 3 次 ?

TODO: extends BlocProvider 报错

17、平台切换

18、PageView 视差实现

19、Flutter 官方 Widget 视频集合

20、 深入理解 Flutter 约束布局

首先,上层 widget 向下层 widget 传递约束条件;

然后,下层 widget 向上层 widget 传递大小信息。

最后,上层 widget 决定下层 widget 的位置。

21、Flutter 工作原理

中文版

英文版

渲染布局最常用的“四棵树”

image.png

四棵树详解

Flutter 布局调试器 ---> Widget 树

Flutter 实战 ☞ Flutter 工作原理

Widget 类

Widget 用于描述 Element 的配置。

一个很好的图文系列分析 Widget、Element 源码

22、一个 Flutter 分包的建议

23、Flutter 路由

官方控件 Navigate

  • 常用框架:

fluro

flutter_modular

24、Flutter 和 Compose 的编程设计思想如出一辙

declarative.png

Start thinking declaratively

应用逻辑为顶级可组合函数提供数据.png

 用户与界面元素进行了交互,导致触发一个事件.png

Compose 编程思想

Takeaways comparing Flutter to Jetpack Compose

25、声明式的代码才是好的 Flutter 代码

image.png

Introduction to declarative UI

image.png

Simple app state management

26、理解 Flutter 的 State

final _LocalizationsScope? scope = context.dependOnInheritedWidgetOfExactType<_LocalizationsScope>();
复制代码
abstract class State<T extends StatefulWidget> with Diagnosticable
复制代码

BuildContext 的 dependOnInheritedWidgetOfExactType 方法?

“对于状态的更有用的定义是 “当任何时候你需要重建你的用户界面时你所需要的数据”。其次,你需要自己 管理 的状态可以分为两种概念类型:短时 (ephemeral) 状态和应用 (app) 状态。”

  • 短时状态 (有时也称 用户界面(UI)状态 或者 局部状态) 是你可以完全包含在一个独立 widget 中的状态。

widget 树中其他部分不需要访问这种状态。不需要去序列化这种状态,这种状态也不会以复杂的方式改变。

换句话说,不需要使用状态管理架构(例如 ScopedModel, Redux)去管理这种状态。你需要用的只是一个 StatefulWidget。使用 State 的 setState 方法 结合 StatefulWidget 完成对短时状态的管理。

Flutter 应用性能优化最佳实践

Flutter Hook

image.png

为啥Flutter Hooks没有受到太多关注和青睐?

Hooks In Flutter

Flutter Hooks, say goodbye to StatefulWidget and reduce boilerplate code.

WidgetsBinding

Flutter App 是如何运行的

深入理解 Flutter 应用启动

Flutter 内部运行原理

三类Widget大全

RenderObjectWidget、ProxyWidget、StatelessWidget 和 StatefulWidget(组件)

image.png

flutter-lifecycle-widgets

flutter-state-lifcycle.jpeg

Flutter 包大小治理上的探索与实践

Android-Flutter 面试总结

Flutter WidgetsBindingObserver

监听可见性

Flutter Lifecycle for Android and iOS Developers

Flutter 异常上报

flutter Zone区域

文章分类
代码人生
文章标签