update articles

This commit is contained in:
falsycat 2023-06-29 08:28:18 +09:00
parent 247456ed11
commit b4fa8f0689
2 changed files with 78 additions and 48 deletions

View File

@ -1,59 +1,41 @@
--- ---
title: flutter title: flutter
tags: [note, info-tech, development, software, library] tags: [note, info-tech, development, library]
--- ---
## 概要 ## 概要
- マルチプラットフォーム GUIアプリケーション フレームワーク - flutterはマルチプラットフォーム GUIアプリケーション フレームワーク
- iOS/AndroidWebWindows/Linux/Mac組み込み - iOS/AndroidWebWindows/Linux/Mac組み込み
- Google製 - Google製
- 使用言語はDart - 使用言語は[Dart](note/info-tech/dart.md)
## インストール ## 環境構築
### Arch Linux - dart + flutterをインストール
- VSCodeにflutter用の拡張機能を追加
- [install-archlinux](note/info-tech/install-archlinux.md)の直後から,`flutter doctor`がオールグリーンになるまで ## 豆知識
- 1時間ぐらいは覚悟したほうがいい ### ウィジェットツリー
- 特にandroid-studioがクソでかいので[qemu](note/info-tech/qemu)イメージのリサイズをする羽目になった - `main`関数から`runApp`にウィジェットツリーを渡すことでメインループが始まる
- [参考文献](https://dev.to/nabbisen/flutter-3-on-arch-linux-shi-mefang-1m2j) - ウィジェットはStatelessなものとStatefullなものに大別できる
- 追記: [qemu](note/info-tech/qemu)上だとパフォーマンスがゴミすぎてまともに使えなかった X( - Statefullなウィジェットが更新`setState`)されると,そのウィジェットとその子孫のツリーが全て再構成(`build`)される
- ハードウェアアクセラレーションとか頑張ればいけるのかもしれないけど諦めてホストのMacbookに直接入れた - パフォーマンス悪そうに見えるけれど,ウィジェットツリーの変更部分のみをシステム内部のエレメントツリーに反映することで画面更新を行なっているので,最適化はされている
- HTMLレンダラみたいな感じ
#### 手順 ### 画面遷移
1. 依存のインストール - Navigatorが現在の画面の状態スタックを持つ
```bash - pushで画面遷移
pacman -S base-devel xorg-server xterm i3-wm noto-fonts git clang cmake ninja chromium - コルーチンのawaitで遷移先がpopされた時の値を受け取れる
visudo # いい感じに設定 & リログ - popで前の画面に戻る
- ユーザーからの戻るボタン押下でも勝手にpopされ得る
- 呼び出し元へ返す値を引数に設定できる
```dart
// push (遷移後の画面がpopされるまでyield)
final ret = await Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => Widget(),
),
);
git clone https://aur.archlinux.org/flutter.git // pop
cd flutter Navigator.of(context).pop("hello");
makepkg -sci # JDKはデフォルトを選択
cd ..
git clone https://aur.archlinux.org/android-studio.git
cd android-studio
makepkg -sci
cd ..
usermod -aG flutterusers user # 設定後にリログ
``` ```
2. Android Studioの設定
1. 初期設定は適当に
2. Android StudioからFlutterプラグインをインストール再起動
3. Flutterプロジェクトを作成
- flutter SDKのパス設定を忘れずに (`/opt/flutter`)
4. `Android SDK Command line tools`をインストール
3. flutter doctor
```bash
export CHROME_EXECUTABLE=chromium # 必要なら永続化する
git config --global --add safe.directory /opt/flutter
flutter doctor --android-licenses
flutter doctor # 完了
```
## 感想
- メジャーバージョンが同じでも後方互換性は乏しい
- 過去のプロジェクトをビルドしようとしてもよくわからないエラーが大量に出てくる

View File

@ -0,0 +1,48 @@
---
title: ArchLinuxへflutterをインストール
tags: [note, info-tech, development, howto]
---
## 初めに
- [install-archlinux](note/info-tech/install-archlinux.md)の直後から,[flutter](note/info-tech/flutter.md)のインストール方法を説明
- `flutter doctor`がオールグリーンになるまで
- 1時間ぐらいは覚悟したほうがいい
- 特にandroid-studioがクソでかいので[qemu](note/info-tech/qemu)イメージのリサイズをする羽目になった
- [参考文献](https://dev.to/nabbisen/flutter-3-on-arch-linux-shi-mefang-1m2j)
- 追記: [qemu](note/info-tech/qemu)上だとパフォーマンスがゴミすぎてまともに使えなかった X(
- ハードウェアアクセラレーションとか頑張ればいけるのかもしれないけど諦めてホストのMacbookに直接入れた
## 手順
### 1. 依存のインストール
```bash
pacman -S base-devel xorg-server xterm i3-wm noto-fonts git clang cmake ninja chromium
visudo # いい感じに設定 & リログ
git clone https://aur.archlinux.org/flutter.git
cd flutter
makepkg -sci # JDKはデフォルトを選択
cd ..
git clone https://aur.archlinux.org/android-studio.git
cd android-studio
makepkg -sci
cd ..
usermod -aG flutterusers user # 設定後にリログ
```
### 2. Android Studioの設定
1. 初期設定は適当に
2. Android StudioからFlutterプラグインをインストール再起動
3. Flutterプロジェクトを作成
- flutter SDKのパス設定を忘れずに (`/opt/flutter`)
4. `Android SDK Command line tools`をインストール
### 3. flutter doctor
```bash
export CHROME_EXECUTABLE=chromium # 必要なら永続化する
git config --global --add safe.directory /opt/flutter
flutter doctor --android-licenses
flutter doctor # 完了
```