FlutterTrial の編集

#contents
** インストール [#bdd9de3f]
*** Ubuntu 18.04 へのインストール [#db219285]
- [[公式サイト（Linux）:https://flutter.dev/docs/get-started/install/linux]]
- 必須前提パッケージは全て事前にインストール済だった
-- bash curl file git 2.x mkdir rm unzip which xz-utils zip
-- libglu1-mesa (libGLU.so.1)

- snap を使って Flutter 一式を一括インストール 
 [local] munakata:~$ sudo snap install flutter --classic
 flutter 0+git.196a02a-dirty from Flutter Team✓ installed

- インストールチェック（専用コマンドが用意されている）
 [local] munakata:~$ flutter doctor
 Initializing Flutter
 Downloading https://storage.googleapis.com/flutter_infra/releases/stable/linux/flutter_linux_1.22.1-stable.tar.xz
 beta/linux/flutter_linux_1.22.0-12.4.pre-beta.tar.xz
   % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                  Dload  Upload   Total   Spent    Left  Speed
 100  513M  100  513M    0     0  10.8M      0  0:00:47  0:00:47 --:--:-- 11.1M
 curl: (6) Could not resolve host: beta
 Flutter initialized
 Flutter 1.22.1 • channel stable • https://github.com/flutter/flutter.git
 Framework • revision f30b7f4db9 (6 days ago) • 2020-10-08 10:06:30 -0700
 Engine • revision 75bef9f6c8
 Tools • Dart 2.10.1
 
 ╔════════════════════════════════════════════════════════════════════════════╗
  ║                 Welcome to Flutter! - https://flutter.dev                  ║
  ║                                                                            ║
  ║ The Flutter tool uses Google Analytics to anonymously report feature usage ║
  ║ statistics and basic crash reports. This data is used to help improve      ║
  ║ Flutter tools over time.                                                   ║
  ║                                                                            ║
  ║ Flutter tool analytics are not sent on the very first run. To disable      ║
  ║ reporting, type 'flutter config --no-analytics'. To display the current    ║
  ║ setting, type 'flutter config'. If you opt out of analytics, an opt-out    ║
  ║ event will be sent, and then no further information will be sent by the    ║
  ║ Flutter tool.                                                              ║
  ║                                                                            ║
  ║ By downloading the Flutter SDK, you agree to the Google Terms of Service.  ║
  ║ Note: The Google Privacy Policy describes how data is handled in this      ║
  ║ service.                                                                   ║
  ║                                                                            ║
  ║ Moreover, Flutter includes the Dart SDK, which may send usage metrics and  ║
  ║ crash reports to Google.                                                   ║
  ║                                                                            ║
  ║ Read about data we send with crash reports:                                ║
  ║ https://flutter.dev/docs/reference/crash-reporting                         ║
  ║                                                                            ║
  ║ See Google's privacy policy:                                               ║
  ║ https://policies.google.com/privacy                                        ║
 ╚════════════════════════════════════════════════════════════════════════════╝
 
 Doctor summary (to see all details, run flutter doctor -v):
 [✓] Flutter (Channel stable, 1.22.1, on Linux, locale ja_JP.UTF-8)
  
 [!] Android toolchain - develop for Android devices (Android SDK version 30.0.1)
     ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
 [!] Android Studio (version 4.0)
     ✗ Flutter plugin not installed; this adds Flutter specific functionality.
     ✗ Dart plugin not installed; this adds Dart specific functionality.
 [!] VS Code (version 1.50.0)
     ✗ Flutter extension not installed; install from
       https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
 [!] Connected device
     ! No devices available
 
 ! Doctor found issues in 4 categories.

- 指摘された問題を対策
-- Android license
 [local] munakata:~$ flutter doctor --android-licenses
 Warning: File /home/munakata/.android/repositories.cfg could not be loaded.     
 4 of 6 SDK package licenses not accepted. 100% Computing updates...             
 Review licenses that have not been accepted (y/N)?

-- 以下の4つの承認していないライセンスを承認した
--- &ref(License android-sdk-preview-license.txt);
--- &ref(android-googletv-license.txt);
--- &ref(License google-gdk-license.txt);
--- &ref(License mips-android-sysimage-license.txt);

-- Android Studio plug-in (Flutter, Dart)
--- Flutter plug-in のインストールで同時に Dart plug-in もインストールされた
--- &ref(Flutter_PI.jpg);

-- Visual Studio Code Dart plug-in
--- https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
--- &ref(VSC_Dart.jpg);

-- Connected device
--- 開発用の Android 端末を USB 接続

- 再チェックで問題が無くなった
 [local] munakata:~$ flutter doctor
 Doctor summary (to see all details, run flutter doctor -v):
 [✓] Flutter (Channel stable, 1.22.1, on Linux, locale ja_JP.UTF-8)
 [✓] Android toolchain - develop for Android devices (Android SDK version 30.0.1)
 [✓] Android Studio (version 4.0)
 [✓] VS Code (version 1.50.0)
 [✓] Connected device (1 available)
 
 • No issues found!

- PATH の設定は不要だった（snap でインストールした時に自動追加されていた）
-- コマンドラインから flutter -v で起動できた
-- /snap/bin の下にインストールされパスが通っていた
 [local] munakata:~$ echo $PATH
 /home/munakata/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin:/home/munakata/userbin/marp:/home/munakata/.local/bin
 
 [local] munakata:~$ ls -l /snap/bin/
 合計 0
 lrwxrwxrwx 1 root root 13 10月 15 09:56 flutter -> /usr/bin/snap
 lrwxrwxrwx 1 root root 13  9月 28 07:58 gnome-calculator -> /usr/bin/snap
 lrwxrwxrwx 1 root root 13  9月 28 07:58 gnome-characters -> /usr/bin/snap
 lrwxrwxrwx 1 root root 13  6月  2 13:19 gnome-logs -> /usr/bin/snap
 lrwxrwxrwx 1 root root 13  6月  3 13:35 gnome-system-monitor -> /usr/bin/snap

- &color(red){dart が snap でインストールされていない};、何故？
 [local] munakata:~$ which flutter dart
 /snap/bin/flutter

*** Android Studio へのインストール [#f953edd9]
- 上記の Flutter インストール中に Android Studio に Flutter plug-in と Dart plug-in のインストールを完了している
- Android Studio で [ファイル] → [新規] → [新規 Flutter プロジェクト] を実行
-- ダイアログで Flutter SDK の場所に /snap/flutter を指定してもエラー（Flutter SDK is not found...）になった
-- /home/munakata/Android/Sdk/Flutter_SDK ディレクトリーを作成し [SDK のインストール] を実行
-- 改めてダイアログに &color(red){/home/munakata/Android/Sdk/Flutter_SDK/flutter}; を指定すると先に進めた
-- &ref(Android_FApp2.jpg);

- Flutter プロジェクトの作成 → 実行
-- マニュフェスト = /home/munakata/AndroidStudioProjects/&color(red){flutter_app/android/app/src/main/kotlin/com/example/flutter_app/MainActivity.kt};
-- Flutter コード（dart 言語) = /home/munakata/AndroidStudioProjects/&color(red){flutter_app/lib/main.dart};
-- &ref(android_flutter_dart.jpg);
-- &ref(android_flutter_dart.jpg);

- Android Studio 上の Flutter Debug Toolbar
-- &color(red){Hot reload}; を使うとリビルドしなくても変更を反映できる
-- &ref(toolbar.jpg);

-- 仮想デバイス上で Flutter アプリ（インストール状態）を起動できた
-- &ref(1st_Flutter_app.jpg);

-- が、この時にも dart はコマンドライン上からは実行できない（見つからない）
 [local] munakata:~$ which flutter dart
 /snap/bin/flutter

** Flutter で Web アプリケーションを作成 [#xb9a6ecd]
- [[Write your first Flutter app on the web:https://flutter.dev/docs/get-started/codelab-web]] [#s4f13a86]
-- デフォルトのインストールでは Android と iOS 向けの画面開発環境がインストールされる
-- 下記の手順で Web アプリ（Chrome 上で実行）の開発もできるようになる
-- 上記のどのターゲットでもコードは共通で、ビルド時にターゲットを選択するだけ

[local] munakata:~$ flutter channel beta
 Switching to flutter channel 'beta'...
 git: From https://github.com/flutter/flutter
 git:    db6e2d8aa5..37ebe3d82a  dev                   -> origin/dev
 git:  + 32f135ebf7...7ed19b19a9 experimental_skshaper -> origin/experimental_skshaper  (forced update)
 git:  * [new branch]            flutter-1.23-candidate.14 -> origin/flutter-1.23-candidate.14
 git:  * [new branch]            flutter-1.23-candidate.15 -> origin/flutter-1.23-candidate.15
 git:  * [new branch]            flutter-1.23-candidate.16 -> origin/flutter-1.23-candidate.16
 git:  * [new branch]            flutter-1.23-candidate.17 -> origin/flutter-1.23-candidate.17
 git:  * [new branch]            flutter-1.23-candidate.18 -> origin/flutter-1.23-candidate.18
 git:  * [new branch]            flutter-1.24-candidate.0 -> origin/flutter-1.24-candidate.0
 git:    cb0bdb4994..1133c2e85c  master                -> origin/master
 git:  * [new branch]            revert-67757-fast_start_test -> origin/revert-67757-fast_start_test
 git:  * [new tag]               1.23.0-13.0.pre       -> 1.23.0-13.0.pre
 git:  * [new tag]               1.23.0-18.0.pre       -> 1.23.0-18.0.pre
 git: Switched to a new branch 'beta'
 git: Branch 'beta' set up to track remote branch 'beta' from 'origin'.
 Successfully switched to flutter channel 'beta'.
 To ensure that you're on the latest build from this channel, run 'flutter upgrade'

[local] munakata:~$ flutter upgrade
 Flutter is already up to date on channel beta
 Flutter 1.22.1 • channel beta • https://github.com/flutter/flutter.git
 Framework • revision f30b7f4db9 (7 days ago) • 2020-10-08 10:06:30 -0700
 Engine • revision 75bef9f6c8
 Tools • Dart 2.10.1

[local] munakata:~$ flutter config --enable-web
 Setting "enable-web" value to "true".
 
 You may need to restart any open editors for them to read new settings.

[local] munakata:~$ flutter doctor
 Doctor summary (to see all details, run flutter doctor -v):
 [✓] Flutter (Channel beta, 1.22.1, on Linux, locale ja_JP.UTF-8)
 
 [✓] Android toolchain - develop for Android devices (Android SDK version 30.0.1)
 [✓] Chrome - develop for the web
 [✓] Android Studio (version 4.0)
 [✓] VS Code (version 1.50.0)
 [✓] Connected device (3 available)
 
 • No issues found!

[local] munakata:~$ flutter devices
 3 connected devices:
 
 SH M07 (mobile)  • 353494090227537 • android-arm64  • Android 10 (API 29)
 Web Server (web) • web-server      • web-javascript • Flutter Tools
 Chrome (web)     • chrome          • web-javascript • Google Chrome 86.0.4240.75

- DartPad
-- DartPadはDartのコードをブラウザ上で実行できるサイト
-- Dart だけでなく Flutter の実行結果も表示できる
-- [[DartPad をブログなどに埋め込む方法:https://flutter.takuchalle.dev/posts/how-to-embed-dartpad-to-blog/]]
--- Dart コードとコンソール(embed-dart)
--- Dart コードと小さめのコンソール(embed-inline)
--- Fluter コードとコンソールと HTML 出力(embed-flutter)
--- Fluter コードとコンソールと 装飾可能な HTML 出力(embed-html)
--- &ref(embd-html.jpg);

** Flutter の仕様 [#sde97f7c]
- レイヤー構造
-- &color(red){In Flutter, almost everything is a Widget. Even the app itself is a widget. The app’s UI can be described as a widget tree.};
-- Flutter での UI 作成は Widget と呼ばれる小さなパーツを組み合わせる
-- [[Flutter:Widget一覧 (Qitta):https://qiita.com/matsukatsu/items/e289e30231fffb1e4502]]
--- Basics - 最初に知っておくべきウィジェット
--- Material Components - マテリアルデザインを実現するウィジェット
--- Layout - レイアウトのためのウィジェット
--- Styling - アプリのテーマやサイズ、パディングを実現するウィジェット
--- Scrolling - スクロール可能なウィジェット
--- Text - テキストウィジェット
--- Assets, Images, and Icons - 画像やアイコン、アセット管理ウィジェット
--- Input - ユーザー入力を取得するウィジェット
--- Painting and effects - 視覚効果を実現するウィジェット
--- Animation and Motion - アニメーションを実現するウィジェット
--- Interaction Models - タッチイベントとビューのルーティングウィジェット
--- Async - 非同期処理に基づいて自身をビルドするウィジェット
--- Accessibility
--- Cupertino(iOS-style widgets) - iOSデザインを実現するウィジェット

-- Widget を 入れ子にして UI 作っていく
-- Widget のレイヤー構造
-- &ref(f_layer.jpg);

** Flutter による画面開発事例 [#ub7cdb37]
- 参考 URL (Flutter)
-- [[Flutter でモバイルアプリを作ってみる 入門編① 〜ヘッダーとフッター〜:https://apps-gcp.com/introduction-of-flutter-about-header-and-footer/]]
-- [[Flutterでモバイルアプリを作ってみる入門編②~ボディ~:https://apps-gcp.com/flutter-body/]]
- 参考 URL (Dart)
-- [[Flutter入門のためのDart入門:https://qiita.com/teradonburi/items/913fb8c311b9f2bdb1dd]]

タイムスタンプを変更しない