FlutterTrial
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
]
開始行:
#contents
** インストール [#bdd9de3f]
*** Ubuntu 18.04 へのインストール [#db219285]
- [[公式サイト（Linux）:https://flutter.dev/docs/get-star...
- 必須前提パッケージは全て事前にインストール済だった
-- 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...
beta/linux/flutter_linux_1.22.0-12.4.pre-beta.tar.xz
% Total % Received % Xferd Average Speed Time ...
Dload Upload Total ...
100 513M 100 513M 0 0 10.8M 0 0:00:47 ...
curl: (6) Could not resolve host: beta
Flutter initialized
Flutter 1.22.1 • channel stable • https://github.com/flu...
Framework • revision f30b7f4db9 (6 days ago) • 2020-10-0...
Engine • revision 75bef9f6c8
Tools • Dart 2.10.1
╔═══════════════════════════════════════════════════════...
║ Welcome to Flutter! - https://flutter...
║ ...
║ The Flutter tool uses Google Analytics to anonymously...
║ statistics and basic crash reports. This data is used...
║ Flutter tools over time. ...
║ ...
║ Flutter tool analytics are not sent on the very first...
║ reporting, type 'flutter config --no-analytics'. To d...
║ setting, type 'flutter config'. If you opt out of ana...
║ event will be sent, and then no further information w...
║ Flutter tool. ...
║ ...
║ By downloading the Flutter SDK, you agree to the Goog...
║ Note: The Google Privacy Policy describes how data is...
║ service. ...
║ ...
║ Moreover, Flutter includes the Dart SDK, which may se...
║ 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 -...
[✓] Flutter (Channel stable, 1.22.1, on Linux, locale ja...
[!] Android toolchain - develop for Android devices (And...
! Some Android licenses not accepted. To resolve th...
[!] Android Studio (version 4.0)
✗ Flutter plugin not installed; this adds Flutter sp...
✗ Dart plugin not installed; this adds Dart specific...
[!] VS Code (version 1.50.0)
✗ Flutter extension not installed; install from
https://marketplace.visualstudio.com/items?itemNam...
[!] 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 c...
4 of 6 SDK package licenses not accepted. 100% Computing...
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=D...
--- &ref(VSC_Dart.jpg);
-- Connected device
--- 開発用の Android 端末を USB 接続
- 再チェックで問題が無くなった
[local] munakata:~$ flutter doctor
Doctor summary (to see all details, run flutter doctor -...
[✓] Flutter (Channel stable, 1.22.1, on Linux, locale ja...
[✓] Android toolchain - develop for Android devices (And...
[✓] 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/s...
[local] munakata:~$ ls -l /snap/bin/
合計 0
lrwxrwxrwx 1 root root 13 10月 15 09:56 flutter -> /usr/...
lrwxrwxrwx 1 root root 13 9月 28 07:58 gnome-calculator...
lrwxrwxrwx 1 root root 13 9月 28 07:58 gnome-characters...
lrwxrwxrwx 1 root root 13 6月 2 13:19 gnome-logs -> /u...
lrwxrwxrwx 1 root root 13 6月 3 13:35 gnome-system-mon...
- &color(red){dart が snap でインストールされていない};、...
[local] munakata:~$ which flutter dart
/snap/bin/flutter
*** Android Studio へのインストール [#f953edd9]
- 上記の Flutter インストール中に Android Studio に Flutt...
- Android Studio で [ファイル] → [新規] → [新規 Flutter ...
-- ダイアログで Flutter SDK の場所に /snap/flutter を指定...
-- /home/munakata/Android/Sdk/Flutter_SDK ディレクトリー...
-- 改めてダイアログに &color(red){/home/munakata/Android/...
-- &ref(Android_FApp2.jpg);
- Flutter プロジェクトの作成 → 実行
-- マニュフェスト = /home/munakata/AndroidStudioProjects/...
-- Flutter コード（dart 言語) = /home/munakata/AndroidStu...
-- &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://flutt...
-- デフォルトのインストールでは 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 ->...
git: + 32f135ebf7...7ed19b19a9 experimental_skshaper ->...
git: * [new branch] flutter-1.23-candidate.1...
git: * [new branch] flutter-1.23-candidate.1...
git: * [new branch] flutter-1.23-candidate.1...
git: * [new branch] flutter-1.23-candidate.1...
git: * [new branch] flutter-1.23-candidate.1...
git: * [new branch] flutter-1.24-candidate.0...
git: cb0bdb4994..1133c2e85c master ->...
git: * [new branch] revert-67757-fast_start_...
git: * [new tag] 1.23.0-13.0.pre ->...
git: * [new tag] 1.23.0-18.0.pre ->...
git: Switched to a new branch 'beta'
git: Branch 'beta' set up to track remote branch 'beta' ...
Successfully switched to flutter channel 'beta'.
To ensure that you're on the latest build from this chan...
[local] munakata:~$ flutter upgrade
Flutter is already up to date on channel beta
Flutter 1.22.1 • channel beta • https://github.com/flutt...
Framework • revision f30b7f4db9 (7 days ago) • 2020-10-0...
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 rea...
[local] munakata:~$ flutter doctor
Doctor summary (to see all details, run flutter doctor -...
[✓] Flutter (Channel beta, 1.22.1, on Linux, locale ja_J...
[✓] Android toolchain - develop for Android devices (And...
[✓] 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 • An...
Web Server (web) • web-server • web-javascript • Fl...
Chrome (web) • chrome • web-javascript • Go...
- DartPad
-- DartPadはDartのコードをブラウザ上で実行できるサイト
-- Dart だけでなく Flutter の実行結果も表示できる
-- [[DartPad をブログなどに埋め込む方法:https://flutter.t...
--- Dart コードとコンソール(embed-dart)
--- Dart コードと小さめのコンソール(embed-inline)
--- Fluter コードとコンソールと HTML 出力(embed-flutter)
--- Fluter コードとコンソールと 装飾可能な HTML 出力(embe...
--- &ref(embd-html.jpg);
** Flutter の仕様 [#sde97f7c]
- レイヤー構造
-- &color(red){In Flutter, almost everything is a Widget....
-- Flutter での UI 作成は Widget と呼ばれる小さなパーツを...
-- [[Flutter:Widget一覧 (Qitta):https://qiita.com/matsuka...
--- 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 でモバイルアプリを作ってみる 入門編① 〜ヘッ...
-- [[Flutterでモバイルアプリを作ってみる入門編②~ボディ~:h...
- 参考 URL (Dart)
-- [[Flutter入門のためのDart入門:https://qiita.com/terado...
終了行:
#contents
** インストール [#bdd9de3f]
*** Ubuntu 18.04 へのインストール [#db219285]
- [[公式サイト（Linux）:https://flutter.dev/docs/get-star...
- 必須前提パッケージは全て事前にインストール済だった
-- 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...
beta/linux/flutter_linux_1.22.0-12.4.pre-beta.tar.xz
% Total % Received % Xferd Average Speed Time ...
Dload Upload Total ...
100 513M 100 513M 0 0 10.8M 0 0:00:47 ...
curl: (6) Could not resolve host: beta
Flutter initialized
Flutter 1.22.1 • channel stable • https://github.com/flu...
Framework • revision f30b7f4db9 (6 days ago) • 2020-10-0...
Engine • revision 75bef9f6c8
Tools • Dart 2.10.1
╔═══════════════════════════════════════════════════════...
║ Welcome to Flutter! - https://flutter...
║ ...
║ The Flutter tool uses Google Analytics to anonymously...
║ statistics and basic crash reports. This data is used...
║ Flutter tools over time. ...
║ ...
║ Flutter tool analytics are not sent on the very first...
║ reporting, type 'flutter config --no-analytics'. To d...
║ setting, type 'flutter config'. If you opt out of ana...
║ event will be sent, and then no further information w...
║ Flutter tool. ...
║ ...
║ By downloading the Flutter SDK, you agree to the Goog...
║ Note: The Google Privacy Policy describes how data is...
║ service. ...
║ ...
║ Moreover, Flutter includes the Dart SDK, which may se...
║ 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 -...
[✓] Flutter (Channel stable, 1.22.1, on Linux, locale ja...
[!] Android toolchain - develop for Android devices (And...
! Some Android licenses not accepted. To resolve th...
[!] Android Studio (version 4.0)
✗ Flutter plugin not installed; this adds Flutter sp...
✗ Dart plugin not installed; this adds Dart specific...
[!] VS Code (version 1.50.0)
✗ Flutter extension not installed; install from
https://marketplace.visualstudio.com/items?itemNam...
[!] 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 c...
4 of 6 SDK package licenses not accepted. 100% Computing...
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=D...
--- &ref(VSC_Dart.jpg);
-- Connected device
--- 開発用の Android 端末を USB 接続
- 再チェックで問題が無くなった
[local] munakata:~$ flutter doctor
Doctor summary (to see all details, run flutter doctor -...
[✓] Flutter (Channel stable, 1.22.1, on Linux, locale ja...
[✓] Android toolchain - develop for Android devices (And...
[✓] 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/s...
[local] munakata:~$ ls -l /snap/bin/
合計 0
lrwxrwxrwx 1 root root 13 10月 15 09:56 flutter -> /usr/...
lrwxrwxrwx 1 root root 13 9月 28 07:58 gnome-calculator...
lrwxrwxrwx 1 root root 13 9月 28 07:58 gnome-characters...
lrwxrwxrwx 1 root root 13 6月 2 13:19 gnome-logs -> /u...
lrwxrwxrwx 1 root root 13 6月 3 13:35 gnome-system-mon...
- &color(red){dart が snap でインストールされていない};、...
[local] munakata:~$ which flutter dart
/snap/bin/flutter
*** Android Studio へのインストール [#f953edd9]
- 上記の Flutter インストール中に Android Studio に Flutt...
- Android Studio で [ファイル] → [新規] → [新規 Flutter ...
-- ダイアログで Flutter SDK の場所に /snap/flutter を指定...
-- /home/munakata/Android/Sdk/Flutter_SDK ディレクトリー...
-- 改めてダイアログに &color(red){/home/munakata/Android/...
-- &ref(Android_FApp2.jpg);
- Flutter プロジェクトの作成 → 実行
-- マニュフェスト = /home/munakata/AndroidStudioProjects/...
-- Flutter コード（dart 言語) = /home/munakata/AndroidStu...
-- &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://flutt...
-- デフォルトのインストールでは 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 ->...
git: + 32f135ebf7...7ed19b19a9 experimental_skshaper ->...
git: * [new branch] flutter-1.23-candidate.1...
git: * [new branch] flutter-1.23-candidate.1...
git: * [new branch] flutter-1.23-candidate.1...
git: * [new branch] flutter-1.23-candidate.1...
git: * [new branch] flutter-1.23-candidate.1...
git: * [new branch] flutter-1.24-candidate.0...
git: cb0bdb4994..1133c2e85c master ->...
git: * [new branch] revert-67757-fast_start_...
git: * [new tag] 1.23.0-13.0.pre ->...
git: * [new tag] 1.23.0-18.0.pre ->...
git: Switched to a new branch 'beta'
git: Branch 'beta' set up to track remote branch 'beta' ...
Successfully switched to flutter channel 'beta'.
To ensure that you're on the latest build from this chan...
[local] munakata:~$ flutter upgrade
Flutter is already up to date on channel beta
Flutter 1.22.1 • channel beta • https://github.com/flutt...
Framework • revision f30b7f4db9 (7 days ago) • 2020-10-0...
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 rea...
[local] munakata:~$ flutter doctor
Doctor summary (to see all details, run flutter doctor -...
[✓] Flutter (Channel beta, 1.22.1, on Linux, locale ja_J...
[✓] Android toolchain - develop for Android devices (And...
[✓] 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 • An...
Web Server (web) • web-server • web-javascript • Fl...
Chrome (web) • chrome • web-javascript • Go...
- DartPad
-- DartPadはDartのコードをブラウザ上で実行できるサイト
-- Dart だけでなく Flutter の実行結果も表示できる
-- [[DartPad をブログなどに埋め込む方法:https://flutter.t...
--- Dart コードとコンソール(embed-dart)
--- Dart コードと小さめのコンソール(embed-inline)
--- Fluter コードとコンソールと HTML 出力(embed-flutter)
--- Fluter コードとコンソールと 装飾可能な HTML 出力(embe...
--- &ref(embd-html.jpg);
** Flutter の仕様 [#sde97f7c]
- レイヤー構造
-- &color(red){In Flutter, almost everything is a Widget....
-- Flutter での UI 作成は Widget と呼ばれる小さなパーツを...
-- [[Flutter:Widget一覧 (Qitta):https://qiita.com/matsuka...
--- 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 でモバイルアプリを作ってみる 入門編① 〜ヘッ...
-- [[Flutterでモバイルアプリを作ってみる入門編②~ボディ~:h...
- 参考 URL (Dart)
-- [[Flutter入門のためのDart入門:https://qiita.com/terado...
ページ名:
![[PukiWiki]](image/taikyoku.gif "[PukiWiki]")
