mirror of
https://github.com/falsycat/ar.falsy.cat.git
synced 2024-12-25 16:14:50 +00:00
update articles
This commit is contained in:
parent
247456ed11
commit
b4fa8f0689
@ -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/Android，Web，Windows/Linux/Mac，組み込み
|
- iOS/Android，Web，Windows/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 # 完了
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
## 感想
|
|
||||||
- メジャーバージョンが同じでも後方互換性は乏しい
|
|
||||||
- 過去のプロジェクトをビルドしようとしてもよくわからないエラーが大量に出てくる
|
|
||||||
48
content/note/info-tech/install-flutter-on-archlinux.md
Normal file
48
content/note/info-tech/install-flutter-on-archlinux.md
Normal 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 # 完了
|
||||||
|
```
|
||||||
Loading…
Reference in New Issue
Block a user