flutter notes

6-9

初始化Flutter

Vscode, 下载flutter sdk cmd+shit+p, new flutter project，会让你找sdk位置，定位即可

run： flutter doctor

报出检查结果

                                                                  1
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.22.1, on macOS 13.3.1 22E772610a darwin-x64, locale en-US)
[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.

[✗] Xcode - develop for iOS and macOS
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS and macOS development.
      Download at: https://developer.apple.com/xcode/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
        sudo xcodebuild -runFirstLaunch
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart
        side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] VS Code (version 1.89.1)
[✓] Connected device (2 available)
[✓] Network resources

! Doctor found issues in 3 categories.

需要安装

xcode App Store
android studio https://developer.android.com/studio ,android sdk :Preferences>Appearance on Behavior>System Settings>Android SDK, 选择安装sdk tools，打开ADV，Create Virtual Device
CocoaPods https://guides.cocoapods.org/using/getting-started.html#installation

新建demo后run，报错xcode build 问题

发现需要升级系统到14，然后重新安装xcode（可能有其他方法）

都完成后记得再运行一次：

 flutter doctor

安装vscode flutter，dart高亮插件

cmd+shit+p, new flutter project，run

terminal: open -a simulator

cmd+shit+p, dart: open dev tools

可以UI， widget，性能诊断啥的

web开发：

使用safari浏览器

在启动模拟器后，重新打开safari浏览器
选择（开发）,可以看到模拟器选项

使用Google/inspect

将手机与PC通过数据线连接，同时打开手机上的开发者选项、USB调试
在谷歌浏览器打开 chrome://inspect/#devices，可以看到该手机上的页面信息

安装Charles：https://www.charlesproxy.com/download/

打开Charles
安装证书 Help>SSL Proxying>Install Charles Root Certificate/Install Charles Root Certificate in IOS Simulators
同时将上面的证书加入PC的信任列表
开启 Proxy>macOS Proxy
如果电脑还有其他的网络代理设置，需要在Charles启动之后在开启。否则Charles可能无法代理PC请求

更齐全初始化步骤看这里：https://juejin.cn/post/7207313062541443109

以上，最耗时间的是Mac OS升级，Xcode下载，以及Android studio 安装组件

Game&Docs

https://flutter.cn/games ，https://github.com/flutter/samples/tree/master_archived/game_template

git clone git@github.com:flutter/samples.git

异常问题，大约消耗了一个小时，解决方案：

sudo /usr/local/Cellar/ruby/3.3.2/bin/gem install cocoapods

 brew install ruby                                                     
==> Fetching dependencies for ruby: libyaml
==> Fetching libyaml
==> Downloading https://mirrors.ustc.edu.cn/homebrew-bottles/bottles/libyaml-0.2
Already downloaded: /Users/jason/Library/Caches/Homebrew/downloads/b57bea533e022a2a6730d2298731682c0516fbe5820cfd5c8f17eedb9245be19--libyaml-0.2.5.sonoma.bottle.tar.gz
==> Fetching ruby
==> Downloading https://mirrors.ustc.edu.cn/homebrew-bottles/bottles/ruby-3.3.2.
Already downloaded: /Users/jason/Library/Caches/Homebrew/downloads/c8687e7886b96e5a9889c28fe50b4ecdb8c37086b0f10ce97f6b49b03ad075f9--ruby-3.3.2.sonoma.bottle.tar.gz
==> Installing dependencies for ruby: libyaml
==> Installing ruby dependency: libyaml
==> Pouring libyaml-0.2.5.sonoma.bottle.tar.gz
🍺  /usr/local/Cellar/libyaml/0.2.5: 11 files, 333.6KB
==> Installing ruby
==> Pouring ruby-3.3.2.sonoma.bottle.tar.gz
==> Caveats
By default, binaries installed by gem will be placed into:
  /usr/local/lib/ruby/gems/3.3.0/bin

You may want to add this to your PATH.

ruby is keg-only, which means it was not symlinked into /usr/local,
because macOS already provides this software and installing another version in
parallel can cause all kinds of trouble.

If you need to have ruby first in your PATH, run:
  echo 'export PATH="/usr/local/opt/ruby/bin:$PATH"' >> ~/.zshrc

For compilers to find ruby you may need to set:
  export LDFLAGS="-L/usr/local/opt/ruby/lib"
  export CPPFLAGS="-I/usr/local/opt/ruby/include"

For pkg-config to find ruby you may need to set:
  export PKG_CONFIG_PATH="/usr/local/opt/ruby/lib/pkgconfig"
==> Summary
🍺  /usr/local/Cellar/ruby/3.3.2: 19,792 files, 46.5MB
==> Running `brew cleanup ruby`...
Disable this behaviour by setting HOMEBREW_NO_INSTALL_CLEANUP.
Hide these hints with HOMEBREW_NO_ENV_HINTS (see `man brew`).
==> Caveats
==> ruby
By default, binaries installed by gem will be placed into:
  /usr/local/lib/ruby/gems/3.3.0/bin

You may want to add this to your PATH.

ruby is keg-only, which means it was not symlinked into /usr/local,
because macOS already provides this software and installing another version in
parallel can cause all kinds of trouble.

If you need to have ruby first in your PATH, run:
  echo 'export PATH="/usr/local/opt/ruby/bin:$PATH"' >> ~/.zshrc

For compilers to find ruby you may need to set:
  export LDFLAGS="-L/usr/local/opt/ruby/lib"
  export CPPFLAGS="-I/usr/local/opt/ruby/include"

For pkg-config to find ruby you may need to set:
  export PKG_CONFIG_PATH="/usr/local/opt/ruby/lib/pkgconfig"
Cellar ➤ cd ruby

文档：https://docs.flutter.cn/

Flutter实战：https://book.flutterchina.club/chapter1/install_flutter.html ，代码：https://github.com/wendux/flutter_in_action_2 , 本身作者开发的组件库：https://github.com/flutterchina/flukit

Flutter 稳定版发布到了3.0，现在已经支持移动端、Web端和PC端，通过Flutter 开发的应用程序能够轻松的在各个平台迁移并获得很好的性能

brew update brew install ruby

Android的部分记得studio需要打开一个隐藏checkbox后选择如下:

Android SDK Platform, API 34.0.5
Android SDK Command-line Tools
Android SDK Build-Tools
Android SDK Platform-Tools
Android Emulator

才正常

运行几个template看看

另外，运行opclave的github repo

mac下的flutter path问题：

运行flutter doctor报错

Mac系统的环境变量，加载顺序为： a. /etc/profile b. /etc/paths c. ~/.bash_profile d. ~/.bash_login e. ~/.profile f. ~/.bashrc

Desgin

Flutter包括三个主要部分:

第1部分

和AirAccount的SDK交互。主要负责比如说账号的初始化，账号的绑定以及获取账号的基础信息，余额，提交交易数据（包括D2FA的签名+基础交易数据）提交给AirAccount

第2部分

和Racks交互的部分，可以单独SDK，或者先API方式，也就是负责这个 NFT数字资产的创作，上架下架管理。

第3部分

主要是游戏和更多部分，单独的一部分，会基于这个做扩展。

这次完成1和2的部分功能即可，可演示，可链上验证即可（iOS 发布需要时间）。

关于技术部分

Flutter external package website: https://pub.dev/

https://github.com/tencent/mxflutter ，但是3年前停止维护，到1.2版本，目前flutter3.22

MXFlutter 是一套使用 TypeScript/JavaScript 来开发 Flutter 应用的框架。

框架支持两种开发方式

基于 mxflutter-js 前端框架，使用 TypeScript 语言，以类似 Flutter 的 Widget 组装方式开发UI，借助前端生态的基础能力，开发App。（前端框架已开源: github:mxflutter-js）
不改变现有 Flutter 的开发方式，使用 MXJSCompiler 把现有工程编译为JS，运行在 mxflutter 框架之上。（ MXJSCompiler JS编译工具在开源计划中 ）
可以安装 Android的包来体验 MXFlutter_v0-9-0.apk。

另外一个思路：

https://tysonchen.me/integrating-javascript-npm-packages-in-flutter/

https://stackoverflow.com/questions/56238514/how-to-use-npm-packages-inside-dart-code

chatgpt答案（待验证）

In Flutter, you can use npm packages by integrating them with your project using the pubspec.yaml file. Here's how you can do it:

Find the package on npm: First, you need to find the npm package that you want to use in your Flutter project. You can search for the package on the npm website or use the pub.dev website to search for Flutter-specific packages.
Add the package to your pubspec.yaml file: Once you've found the package, you need to add it to your pubspec.yaml file. Here's an example:

dependencies:
  flutter:
    sdk: flutter
  my_npm_package:
    # Replace 'my_npm_package' with the name of the package you want to use
    # and 'version_number' with the version of the package you want to use
    version: ^version_number

Install the package: After adding the package to your pubspec.yaml file, run the following command in your terminal to install the package:

flutter pub get

This will download the package and its dependencies and make them available in your Flutter project.

Use the package in your code: Once the package is installed, you can use it in your Flutter code. The way you use the package will depend on the specific package you're using, but here's a general example:

import 'package:my_npm_package/my_npm_package.dart';

void main() {
  // Use the package in your code
  MyNpmPackageClass myObject = MyNpmPackageClass();
  myObject.doSomething();
}

Here are some links that may be helpful:

Using packages in Flutter
Pub.dev package repository
npm package repository
[Flutter package documentation](https://flutter.dev/docs/development/

https://www.thesmythgroup.com/in-development/how-to-use-npm-packages-in-native-ios-apps/

https://developer.aliyun.com/article/748246 分析的不错

从 Web 到 Flutter。就是使用 Web 技术栈来开发，然后对接到 Flutter 上实现跨平台渲染。对 Web 来说是解决性能和跨平台一致性问题，对 Flutter 来说是解决生态复用问题。
从 Flutter 到 Web。就是官方已经实现的 Web support for Flutter，把已经用 Dart 开发好的 App 编译成 HTML/JS/CSS 然后运行在浏览器上，可以用于降级和外投场景。这个功能官方已经实现了，可以把使用 Dart 开发的 App 编译成 Web App 运行在浏览器上，官方文档以介绍用法和 API 为主，我这里简单分析一下内部具体的实现方案。

  Flutter Web的基本原理
  
  Flutter Web的基本原理是将Flutter的Dart代码转换为Web平台可执行的JavaScript代码。通过Flutter的编译工具链，开发者可以将Dart代码编译为Web平台上的WASM（WebAssembly）和JavaScript代码。WASM是一种在Web上运行二进制代码的格式，它允许开发者以接近原生的性能运行代码。而JavaScript则是Web平台的原生语言，用于与浏览器进行交互。Flutter通过结合WASM和JavaScript，实现了在Web平台上运行Flutter应用的目标。
  对于需要高度交互性和复杂UI的应用，Flutter Web是一个很好的选择,静态内容不适合

相关文章：https://developer.aliyun.com/article/1498510?spm=a2c6h.12873639.article-detail.28.37857391KINHbq ，Flutter Web

  Flutter 中 setState 很有 React Native 的既视感，Flutter 中也是通过 state 跨帧实现管理数据状态的，这个后面会详细讲到。
  Flutter 中一切皆 Widget 呈现，通过 build方法返回 Widget，这也是和 React Native 中，通过 render 函数返回需要渲染的 component 一样的模式。
  有人说Flutter抄React，估计有点这个意思

  有状态的widget的简单实现。
  你需要创建管理的是主要是 State ， 通过 State 的 build 方法去构建控件。在 State 中，你可以动态改变数据，这类似 MVVM 实现，在 setState 之后，改变的数据会触发 Widget 重新构建刷新。而下方代码中，是通过延两秒之后，让文本显示为 “这就变了数值”。
  如下代码还可以看出，State 中主要的声明周期有 ：
  initState ：初始化，理论上只有初始化一次，第二篇中会说特殊情况下。
  didChangeDependencies：在 initState 之后调用，此时可以获取其他 State 。
  dispose ：销毁，只会调用一次。
  看到没，Flutter 其实就是这么简单！你的关注点只要在：创建你的 StatelessWidget 或者 StatefulWidget 而已。你需要的就是在 build 中堆积你的布局，然后把数据添加到 Widget 中，最后通过 setState 改变数据，从而实现画面变化。

另外一种方式：https://medium.com/yavar/how-to-integrate-node-js-with-flutter-644d5039b4bf，API通信吗，无需解决npm问题

  Future<void> _fetchBooks() async {
    final response = await http.get(Uri.parse('http://localhost:3000/api/books'));
    if (response.statusCode == 200) {
      final List<dynamic> json = jsonDecode(response.body);
      setState(() {
      _books = json.map((item) => Book.fromJson(item)).toList();
      });
    } else {
      throw Exception('Failed to load books');
    }
  }

一个外包，土耳其的，有点不敢信任：https://www.fiverr.com/astrodevsonline/be-you-professional-android-app-developer?utm_campaign=gigs_show&utm_medium=shared&utm_source=copy_link&utm_term=v9nwbx
flutter channel

Flutter channels:

master (latest development branch, for contributors)

main (latest development branch, follows master channel)

beta (updated monthly, recommended for experienced users)

* stable (updated quarterly, for new users and for production app releases)

  flutter upgrade
  flutter packages get获取项目所有的依赖包。
  flutter packages upgrade 获取项目所有依赖包的最新版本。
  
  3）体验热重载 hotload
  打开lib/main.dart文件。
  将字符串 'You have pushed the button this many times:' 更改为 'You have clicked the button this many times:'。
  不要按“停止”按钮; 让您的应用继续运行。
  要查看您的更改，直接保存（cmd+s / ctrl+s），或者点击 热重载按钮 （绿色圆形箭头按钮）即可。
  你会立即在运行的应用程序中看到更新的字符串。

Mac

open -a Simulator

苹果开发者enroll：https://developer.apple.com/support/app-account/

6-10

技术方案初步设想(chatgpt给的建议在上面，不一定靠谱)

用dart+API（http）+移动端本地加密签名+远端public key验签

有个问题就是加密部分dart的能力是否和nodejs的airaccount sdk能力相当，这样等于dart版的airaccout sdk了

初期可以只是api，后面再提炼sdk

三部分功能设想

工作拆分：https://www.notion.so/planckerdao/Tokyo-4ecd0e18a0ce4ba6a5cde82adb380190

Account LifeCycle（调用AirAccount的fluter部分）
1. Email登陆，使用email验证码登陆（中心化验证码），证明拥有这个Email，可以查看关联Account的余额和交易记录（因为这个是公开的，不登陆链上也可以，所以伪造登陆也无所谓）
2. 查询Account余额，包括ETH，USDT和NFT，以及PNTs，只查询这些，后面可以针对AirAccount的账户进行定时查询链上+后台缓存，目前先链上查询后返回
3. 提交交易
  1. 交易数据（首先本地是有passkey的，可以对交易数据进行secp256r1的签名
  2. ```
   chainid
   nonce
   data
     这个是交易数据
     例如：Mint，或者上架一个NFT
     Hero NFT data
     price
     status
     等等
   passkey-signature
   
   下面的字段是airaccount或者paymaster relay后台提供（CommunityNode）
   gasPrice
   gasLimit
   to
   value
   paymasterDataAndSignature
   v、r、s（私钥在Community Node）
```
3. 发送给Community Node的API
4. 获得反馈
  1. 同步API返回
  2. 异步推送（需要同步调用后等待？）
  3. 错误，报错后的重试和错误抛出
Racks
1. 两个核心功能：创作者（卖家）和社区玩家（买家），每个人进去都有两个角色（暗含）

创作者

手机App上进行创作（或者上架）
目前是拍照+写字（后面AI手绘图变小人动画，HPC接口）后一键NFT

NFT可以是艺术作品，也可以是收集分数的商业活动卡
1. 例如711根据交易数据分析，针对游客，提供了本地艺术家创作的数字NFT拼图
2. 购买7大类商品，平均金额达到多少，就可以获得随机抽取拼图
3. 拼图完成，提供大象营、禅修、免费泰语课程等等的系列门票
4. 任何社区可以注册一个艺术创作者或者生活创作者，进行艺术作品或者生活作品（Event）的NFT发布
5. CMUBA会联合可信安全的筛选过的创作者，具备交流Party活动，也会以NFT形式发布。
可以配置日常NFT参数
1. 名字
2. 价格（PNTs）
3. 数量（默认1）
4. 属性（很多，这个先不管）
5. 技术参数
  1. 链
  2. 存储位置
  3. 图片大小限制

玩家

普通玩家，社区成员，使用手机进行积分兑换数字资产，例如NFT（Event资格）
积分可以游戏或者空投等等获取
安装任何移动端（使用HM开发的移动端），都可以使用账户内的积分来兑换（购买）Racks上架的数字资产

根据以上，定义核心User Case和开发方案

Mint NFT
Item Management
1. Meta data set
2. Dynamic data
3. Item stock number
4. Item status
Item trade
1. Seller show QR
  1. Basic trade data
2. Buyer scan QR
  1. Basic trade data + Community Node trade data + submit
  2. return

Game and more
1. 暂时先不做，Arcadia在CMUBA已经完成游戏部分设计
2. 积分体系还未设计
3. 兑换依赖Racks

开发资源

Flutter 包Package开发

Package类型：

Flutter Package(dart包)：Flutter纯Dart插件工程，仅包含Dart层的实现，往往定义一些公共Widget

Flutter Plugin(插件包)：一种专用的Dart包，其中包含用Dart代码编写的API，以及针对Android（使用Java或Kotlin）和针对iOS（使用OC或Swift）平台的特定实现

https://juejin.cn/post/6954940703524782117

动画库

https://juejin.cn/post/7169046420505395236?from=search-suggest

地图Demo：https://animated-alfajores-40eb7b.netlify.app/ 代码：https://github.com/extrawest/evc_google_maps_demo?tab=readme-ov-file

Get an API key at https://cloud.google.com/maps-platform/.

Android
Specify your API key in the application manifest android/app/src/main/AndroidManifest.xml:

<manifest ...
  <application ...
    <meta-data android:name="com.google.android.geo.API_KEY"
               android:value="YOUR KEY HERE"/>
iOS
Supply your API key in the application delegate ios/Runner/AppDelegate.m:

#include "AppDelegate.h"
#include "GeneratedPluginRegistrant.h"
#import "GoogleMaps/GoogleMaps.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GMSServices provideAPIKey:@"YOUR KEY HERE"];
  [GeneratedPluginRegistrant registerWithRegistry:self];
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
@end

相机Camera

https://github.com/sbis04/flutter_camera_demo

Game 引擎：https://github.com/flame-engine/awesome-flame ， https://flame-engine.org/ ， https://flutter.dev/games

点赞动画：https://github.com/duytq94/flutter-fb-reactions-animation

OpenIM：https://www.cnblogs.com/OpenIM/p/15067721.html ，https://github.com/openimsdk/open-im-flutter-demo ，另外一个聊天的：https://github.com/duytq94/flutter-chat-demo ， WebRTC聊天：https://github.com/flutter-webrtc ， P2P：https://gitcode.com/michal-wrzosek/p2p-chat/overview?utm_source=artical_gitcode

好看UI，widget：https://github.com/FlutterOpen/flutter-ui-nice?tab=readme-ov-file ， https://github.com/FlutterOpen，还在活跃的：https://github.com/OpenFlutter ，https://github.com/826327700/flutter_plugins_demo

官方Samples案例，可视化：https://flutter.github.io/samples/#

开发实战：https://github.com/CarGuo/gsy_flutter_demo

6-11

读两章flutter开发
1. 目前 Flutter 已经支持 iOS、Android、Web、Windows、macOS、Linux、Fuchsia（Google新的自研操作系统）等众多平台
2. AOT指的是"Ahead Of Time"，即编译器在运行之前编译程序的所有代码。与JIT（Just In Time）模式相比，AOT模式在运行时不需要再进行编译，因此可以提高程序的执行速度。在Dart语言中，采用AOT模式可以显著提升程序的性能，并且使得其执行速度远远超过JavaScript语言。
3. Dart 支持 AOT，Dart 运行时和编译器支持 Flutter 的两个关键特性的组合：
  - 基于 JIT 的快速开发周期：Flutter 在开发阶段采用 JIT 模式，这样就避免了每次改动都要进行编译，极大地节省了开发时间；
  - 基于 AOT 的发布包: Flutter 在发布时可以通过 AOT 生成高效的机器码以保证应用性能。而 JavaScript 则不具有这个能力。
地图demo加载并能运行起来
1. https://developers.google.com/profile/u/108223185425827780761，开发者页面
2. 信用卡不能用，奇怪：https://console.cloud.google.com/freetrial/signup/billing/TH?redirectPath=%2Fgoogle%2Fmaps-apis%2Fonboard;flow%3Djust-ask-flow;step%3Djust_ask&project=jason-1209
3. clone了，需要api key，nnd，暂放
尝试加入account相关场景和能力
1. 约定下上面的API

Flutter学习笔记-1

6-9

初始化Flutter

使用safari浏览器

使用Google/inspect

Game&Docs

Desgin

第1部分

第2部分

第3部分

关于技术部分

6-10

技术方案初步设想(chatgpt给的建议在上面，不一定靠谱)

三部分功能设想

Flutter 包Package开发

动画库

6-11

Comments

More from this blog

让你的私钥随时更换，可以四处旅行

人性之光-以自由之名

How to play with AI vibe coding？

It is Fun for me.

我的AI小助手：RAG 本地测试记录(updating...)

Command Palette

6-9

初始化Flutter

使用safari浏览器

使用Google/inspect

Game&Docs

Desgin

第1部分

第2部分

第3部分

关于技术部分

6-10

技术方案初步设想(chatgpt给的建议在上面，不一定靠谱)

三部分功能设想

Flutter 包Package开发

动画库

6-11

Comments

More from this blog