Flutter

Posted by Shi

Flutter

Build App

Android Prod

Method 1

  1.  flutter build appbundle --flavor professionalprod
  2. The release bundle for your app is created at [project]/build/app/outputs/bundle/release/app.aab.

Method 2

  1.  flutter build apk --debug
 flutter build apk --profile

  2. Android Studio -> Build -> Generate Signed APK

  3. Sign with both V1 and V2 signature

or

flutter build apk --debug --flavor dev
flutter build apk --debug --flavor prod

flutter build apk --profile --flavor dev
flutter build apk --profile --flavor prod

iOS prod

Method 1

  1. Increment app version in pubspec.yaml
  2. Select the flavor and run ios app in flutter
  3. Open Runner.xcworkspace in your app’s ios folder to archive release app
  4. Upload archievd app

Method 2

  1. Build iOS release app

    Open Runner.xcworkspace in your app’s ios folder to build release app

    or

    Build release app via command line flutter build ios --flavor prod --release

  2. Open build/ios/archive/Runner.xcarchive or build/ios/archive/MyApp.xcarchive from Xcode to prepare distribution.

  3. Distribute App from Xcode.

  4. Go https://appstoreconnect.apple.com/ to

Run app with flavor

flutter run --flavor dev

Method 3

  1. flutter build ipa --flavor prod --release

  2. Drag and drop the “build/ios/ipa/*.ipa” bundle into the Apple Transporter macOS app

Useful flutter components/services

Handle the native app displays a white splash screen

https://pub.dev/packages/flutter_native_splash

Router

Transaction animation

Set default transition for go_router

https://stackoverflow.com/questions/71636397/set-default-transition-for-go-router-in-flutter

https://docs.flutter.dev/cookbook/animation/page-route-animation

https://api.flutter.dev/flutter/widgets/AlignTransition-class.html

RotationTransition

https://api.flutter.dev/flutter/widgets/RotationTransition-class.html

ScaleTransition

https://api.flutter.dev/flutter/widgets/ScaleTransition-class.html

FadeTransition

https://api.flutter.dev/flutter/widgets/FadeTransition-class.html

SlideTransition

https://api.flutter.dev/flutter/widgets/SlideTransition-class.html

Libs

Animated text

https://pub.dev/packages/animated_text_kit

Change App Information Language

https://www.jianshu.com/p/92c21eb71537

Widget，Element 和 RenderObject

Flutter 渲染过程，可以分为这么三步：

  1. 首先，通过 Widget 树生成对应的 Element 树；

  2. 然后，创建相应的 RenderObject 并关联到 Element.renderObject属性上

  3. 最后，构建成 RenderObject 树，以完成最终的渲染

    React：JSX->虚拟DOM->浏览器DOM React Native：JSX->虚拟DOM->Android/iOS原生控件 flutter：Widget->Element（类似虚拟DOM，只是一种数据结构）-> RenderObject 交给底层渲染

Widget是一个配置，Element才是最终的对象；

Element是通过遍历Widget树时，调用Widget的方法创建的

Lifecycle

State 生命周期

Creation：

  1. Constructor: 我们可以通过构造方法，来接收父 Widget 传递的初始化 UI 配置数据。这些配置数据，决定了 Widget 最初的呈现效果。
  2. initState: 会在 State 对象被插入视图树的时候调用。这个函数在 State 的生命周期中只会被调用一次，所以我们可以在这里做一些初始化工作，比如为状态变量设定默认值。
  3. didChangeDependencies: 处理 State 对象依赖关系变化，会在 initState() 调用结束后，被 Flutter 调用。
  4. build: 作用是构建视图。经过以上步骤，Framework 认为 State 已经准备好了，于是调用 build。我们需要在这个函数中，根据父 Widget 传递过来的初始化配置数据，以及 State 的当前状态，创建一个 Widget 然后返回。

Update:

The following situation will update:

  • setState: 我们最熟悉的方法之一。当状态数据发生变化时，我们总是通过调用这个方法告诉 Flutter：“我这儿的数据变啦，请使用更新后的数据重建 UI！”

  • didChangeDependencies：State 对象的依赖关系发生变化后，Flutter 会回调这个方法，随后触发组件构建。哪些情况下 State 对象的依赖关系会发生变化呢？典型的场景是，系统语言 Locale 或应用主题改变时，系统会通知 State 执行 didChangeDependencies 回调方法。

  • didUpdateWidget: 当 Widget 的配置发生变化时，比如，父 Widget 触发重建（即父 Widget 的状态发生变化时），热重载时，系统会调用这个函数。

一旦这三个方法被调用，Flutter 随后就会销毁老 Widget，并调用 build 方法重建 Widget。

Destruction:

  1. deactivate: 这时 State 会被暂时从视图树中移除。值得注意的是，页面切换时，由于 State 对象在视图树中的位置发生了变化，需要先暂时移除后再重新添加，重新触发组件构建，因此这个函数也会被调用。
  2. dispose: 一旦到这个阶段，组件就要被销毁了，所以我们可以在这里进行最终的资源释放、移除监听、清理环境，等等。

Widget

setState

didChangeDependencies

didUpdateWidget

img

Navigation

Bottom Navigation Bar combine with NavigationRail

https://codewithandrea.com/articles/flutter-bottom-navigation-bar-nested-routes-gorouter/

State Management 状态管理

Provider

Provider 是一个用来提供数据的框架。它是 InheritedWidget 的语法糖，提供了依赖注入的功能，允许在 Widget 树中更加灵活地处理和传递数据。

什么是依赖注入呢？通俗地说，依赖注入是一种可以让我们在需要时提取到所需资源的机制，即：预先将某种“资源”放到程序中某个我们都可以访问的位置，当需要使用这种“资源”时，直接去这个位置拿即可，而无需关心“资源”是谁放进去的。

我们既可以用 Provider 来实现静态的数据读传递，也可以使用 ChangeNotifierProvider 来实现动态的数据读写传递，还可以通过 MultiProvider 来实现多个数据资源的共享。

单线程

Dart是单线程的单线程

Permission

iOS Info.plist permissions

If you do not want to add a certain permission

add the following code to plist

 ## dart: PermissionGroup.bluetooth
 'PERMISSION_BLUETOOTH=0'

https://github.com/Baseflow/flutter-permission-handler/issues/483

Rename Project

  1. Refactor project name

  2. Change project name in pubspec.yml

  3. Rename all import file names

  4. Android:

    1. Modify the package name in your AndroidManifest.xml file

      1. /android/app/src/main
      2. /android/app/src/debug
      3. /android/app/src/profile

    2. Modify the package name in your MainActivity.java ( <project-name>/android/app/src/main/kotlin/com/example/app )file

    3. Modify the directory structure that containing your MainActivity.java file from:

       <project-name>/android/app/src/main/kotlin/com/example/app

      to:

       <project-name>/android/app/src/main/kotlin/your/package/name

    4. Modify the applicationId in your build.gradle file : Modify the applicationId to reflect your new package name

  5. iOS

  6. run flutter clean .

State Management

PublishSubject

The PublishSubject is a normal broadcast StreamController with one exception: stream returns an Observable rather than a Stream.

BehaviorSubject

The main difference with a PublishSubject is that the BehaviorSubject also sends the very last event that was emitted to the listener that just subscribed.

Ref: https://medium.com/flutter-community/reactive-programming-streams-bloc-6f0d2bd2d248

i18n / i10n

Guide

https://flutter.dev/docs/development/accessibility-and-localization/internationalization

Detail

https://docs.google.com/document/d/10e0saTfAv32OZLRmONy866vnaw0I2jwL8zukykpgWBc/edit

Animation

https://docs.flutter.dev/ui/widgets/animation

https://codelabs.developers.google.com/codelabs/material-motion-flutter?hl=en#0

Codelabs

https://codelabs.developers.google.com/codelabs/flutter-flame-game?hl=en#0

https://codelabs.developers.google.com/?text=flutter

https://api.flutter.dev/flutter/widgets/PositionedTransition-class.html

https://codelabs.developers.google.com/codelabs/flutter-next-gen-uis?hl=en#7

Animation HTML

https://www.17sucai.com/pins/demo-show?id=56948&st=5bxZF2WeqkBpTrbUODFbig&e=1697945553

http://www.yunxi10.com/demo/18484

https://codepen.io/wakana-k/pen/YzjYzJE

PAG

https://zhuanlan.zhihu.com/p/620979024

https://github.com/libpag/pag-web/tree/main

MEME

https://www.youtube.com/watch?v=s50lXKPoeVo&list=PLzLFqCABnRQesL9EtxyHOHYfH0gK89odT&index=11&ab_channel=KODDev

https://www.youtube.com/playlist?list=PLzLFqCABnRQesL9EtxyHOHYfH0gK89odT

https://github.com/topex-psy/Drawie/tree/master

https://github.com/saimon24/flutter-meme-creator/tree/main

https://github.com/topex-psy/Drawie?ref=flutterawesome.com

https://www.youtube.com/watch?v=z0P9lSUSS3E&ab_channel=SimonGrimm

https://github.com/djsmk123/meme_maker

https://www.youtube.com/watch?v=vzg6iNziiKw&ab_channel=RivaanRanawat

https://www.youtube.com/watch?v=K2a7E6t3k-E&list=PLOoOwFsn2IJOSO5DU11KYzO_0qw2dvPvs&ab_channel=FlutterFundamentals

https://www.youtube.com/watch?v=jljv7yNzqJw&ab_channel=SanskarTiwari

https://www.youtube.com/watch?v=tF2dqZpDfAU&ab_channel=FlutterFundamentals

Fetch remote image

https://github.com/AKR-2803/MemeAppFlutter/blob/akr-branch/lib/screens/home_page.dart#L162

Cross platform

https://codelabs.developers.google.com/codelabs/flutter-boring-to-beautiful?hl=en#0

https://codelabs.developers.google.com/codelabs/flutter-adaptive-app?hl=en#0

https://codelabs.developers.google.com/codelabs/flutter-animated-responsive-layout?hl=en#0

Troubleshooting

Pod install fail on M1 Chip

run arch -x86_64 pod install

Flutter: Execution failed for task ‘:app:compileDebugKotlin’

Solved by deleting android/.gradle then ran the app in debug

Xcode - “Not enough free space”

Download Xcode from https://developer.apple.com/download/all/

Error (Xcode): DT_TOOLCHAIN_DIR cannot be used to evaluate LIBRARY_SEARCH_PATHS, use TOOLCHAIN_DIR instead

Note

Mixin就是以非继承的方式实现代码复用的一种机制而已呀

A state-management library

https://pub.dev/packages/riverpod/versions/2.0.0-dev.3

Book

https://book.flutterchina.club/

https://medium.com/flutter-community/deconstructing-dart-constructors-e3b553f583ef