| ページ一覧 | ブログ | twitter |  書式 | 書式(表) |

MyMemoWiki

Flutter

提供: MyMemoWiki
2021年10月17日 (日) 02:52時点におけるPiroto (トーク | 投稿記録)による版 (→‎SDK)
ナビゲーションに移動 検索に移動

| Dart | ブログカテゴリ(Flutter) | Android Studio | Flutter macos | FlutterFire | Flutter 手順 | Flutter Riverpod |

目次

Flutter

ステップずつ仕組みを学べる良書

Install

Windows


  1. > git clone https://github.com/flutter/flutter.git -b stable
  • 上記インストールパス\bin にPATHを通す

Mac


開発者登録

Flutter SDK インストール


  1. sdkダウンロード
  2. unzipで解凍
    1. ユーザーホームディレクトリ/opt/flutter
  3. .bash_profile にPATH登録
    1. export PATH="~/opt/flutter/bin:$PATH"
  4. flutter doctor コマンドで必要な作業のチェックとヘルプ
  1. $ flutter --version
  2. Flutter 1.12.13+hotfix.8 channel stable https://github.com/flutter/flutter.git
  3. Framework revision 0b8abb4724 (9 weeks ago) 2020-02-11 11:44:36 -0800
  4. Engine revision e1e6ced81d
  5. Tools Dart 2.7.0
  6. delhi:~ hirotoyagi$ flutter doctor
  7. Doctor summary (to see all details, run flutter doctor -v):
  8. [✓] Flutter (Channel stable, v1.12.13+hotfix.8, on Mac OS X 10.15.3 19D76, locale ja-JP)
  9. [✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
  10. [✓] Xcode - develop for iOS and macOS (Xcode 11.4)
  11. [✓] Android Studio (version 3.6)
  12. [✓] VS Code (version 1.43.2)
  13. [!] Connected device
  14. ! No devices available
  15.  
  16. ! Doctor found issues in 1 category.

Xcode設定手順


  • xcodeのダウンロード
  • command line tools の有効化
  1. $ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer/
  2. $ sudo xcodebuild -runFirstLaunch
  • cocoapods のインストール
  1. $ sudo gem install cocoapods
  2. $ pod setup
  • シミュレーターの起動
  1. $ open - a Simulator
  • プロジェクトの作成
  1. $ flutter create my_app
  • プロジェクトディレクトリで以下で実行
  1. $ flutter run

Linux


プロジェクトにFirebaseを統合


  • プロジェクトフォルダで以下を実行しXcodeで
  • ios
  1. $ open ios/Runner.xcworkspace
  • macos
  1. $ open macos/Runner.xcworkspace
  • 開発者IDを登録

0512 ios bundle id2.png

Flutter xcode sign.png

Flutter pod google signin.png

  • iPhoneでデベロッパーを信頼
    • 「設定」>「一般」>「プロファイル」または「プロファイルとデバイス管理」の順にタップします。 「エンタープライズ App」見出しの下に、該当する開発元のプロファイルが表示されます。 「エンタープライズ App」見出しの下で開発元のプロファイルの名前をタップし、その開発元を信頼するように設定

Ios firebase.png

Firebase sdk.png

Google service info plist.png

  • ビルドエラー

diff: /../Podfile.lock: No such file or directory diff: Manifest.lock: No such file or directory error: The sandbox is not in sync with the Podfile.lock. Run ‘pod install’ or update your CocoaPods installation.`

    • 以下xcodeではなく、コマンドで成功
  1. pos update
  2. pod install
  3. flutter build ios
  4. flutter run

Integrating client project Pod installation complete! There is 1 dependency from the Podfile and 4 total pods installed.

[!] Automatically assigning platform `iOS` with version `8.0` on target `Runner` because no platform was specified. Please specify a platform for this target in your Podfile. See `https://guides.cocoapods.org/syntax/podfile.html#platform`.

[!] CocoaPods did not set the base configuration of your project because your project already has a custom config set. In order for CocoaPods integration to work at all, please either set the base configurations of the target `Runner` to `Target Support Files/Pods-Runner/Pods-Runner.profile.xcconfig` or include the `Target Support Files/Pods-Runner/Pods-Runner.profile.xcconfig` in your build configuration (`Flutter/Release.xcconfig`). delhi:ios hirotoyagi$

プロジェクト

作成


  1. $ flutter create --overwrite --org "{パッケージ}" --project-name {プロジェクト名} --platforms=windows,macos,android,ios,web .

デバイスの確認


  1. $ flutter devices
  2. 2 connected devices:
  3.  
  4. macOS (desktop) macos darwin-x64 macOS 11.6 20G165 darwin-x64
  5. Chrome (web) chrome web-javascript Microsoft Edge 94.0.992.50

実行


  • web
  1. $ flutter run -d web-server

環境構築

SDK


Widget

拡張パッケージ


Flutter Studio

UIをデザイナで作成できる

Sample

https://flutter.github.io/samples/gallery.html


A few resources to get you started if this is your first Flutter project:

- [Lab: Write your first Flutter app](https://flutter.dev/docs/get-started/codelab) - [Cookbook: Useful Flutter samples](https://flutter.dev/docs/cookbook)

For help getting started with Flutter, view our [online documentation](https://flutter.dev/docs), which offers tutorials, samples, guidance on mobile development, and a full API reference.

Firebase

FlutterFire


Flutter.dev 公式プラグイン


Firebase Auth

example

Google Sign in

example

Firebase Storage


CROS Webでファイルのダウンロード


  • cros.json
  1. [
  2. {
  3. "origin": ["*"],
  4. "method": ["GET"],
  5. "maxAgeSeconds": 3600
  6. }
  7. ]
  • deploy
  1. gsutil cors set cors.json gs://<your-cloud-storage-bucket>

画面遷移

  • https://qiita.com/granoeste/items/19c119ffc36a016e6223
  • Flutter の画面遷移では Navigator を使用します。
  • Navigator は、ウィジェットをスタックで管理します
  • スプラッシュやログイン画面の様な一方通行の画面遷移の場合は、pushReplacement を使用、 この場合、ログイン後はホーム画面がスタックのルートの画面になります。
  • ホーム画面からその他画面、またその他画面への遷移し戻ることが出来るようにする場合は、次の画面への遷移に push、画面を戻るときは pop を使用
  • スタックされたその他画面から、すべての画面をクリアしてホーム画面へ戻りたい場合は、popUntil を使用します。 popUntil は条件に一致するまでスタックから画面をpopして行きます
  • ダイアログを表示する場合は、showDialogを使用します。showDialog の内部コードでは、push が呼ばれています。ダイアログを閉じる場合は、pop を使用
  • ログアウトで、全ての画面を破棄してスプラッシュを表示する場合は、 pushAndRemoveUntil を使用します。pushAndRemoveUntil は条件に一致するまでスタックから画面を除いて行きます

JSON シリアライズ/デシリアライズ

json_annotation: ^4.1.0 json_serializable: ^5.0.0 build_runner: ^2.1.1

状態管理

Flutter Riverpod


Widget

Layout

LayoutBuilder

Tips

イメージ読み込みエラー対応

  1. Image.network(
  2. imageURL ?? '',
  3. errorBuilder: (context, object, stacktrace) {
  4. return Text('NO IMAGE');
  5. },
  6. ),

画面サイズoverflow時の対応


Flutter : 画像の選択

  • サイズがはみ出て、以下のようなエラーが出る場合の対応
  1. ════════ Exception caught by rendering library ═════════════════════════════════════════════════════
  2. The following assertion was thrown during layout:
  3. A RenderFlex overflowed by 236 pixels on the bottom.


Webで動作しているか判定


  1. import 'package:flutter/foundation.dart' show kIsWeb;
  2.  
  3. if (kIsWeb) {
  4. // running on the web!
  5. } else {
  6. // NOT running on the web! You can check for additional platforms here.
  7. }

Visual Studio Codeデバッグ


Microsoft Edgeでデバッグ


AndroidX対応

メニュー

ドロワーメニュー

  1. return Scaffold(
  2. appBar: AppBar(),
  3. drawer: Drawer(),
  4. body: Center(),
  5. );

ポップアップメニュー

画面遷移

呼び出し元

  1. RaisedButton(
  2. onPressed: (){
  3. Navigator.push(
  4. context,
  5. MaterialPageRoute(builder: (context) => SecondRoute()),
  6. );
  7. },
  8. child: const Text('Open Second Screen'),

呼び出し先

  1. import 'package:flutter/material.dart';
  2. class SecondRoute extends StatefulWidget {
  3. @override
  4. State<StatefulWidget> createState() {
  5. return _SecondRouted();
  6. }
  7. }
  8. class _SecondRouted extends State<SecondRoute> {
  9. @override
  10. Widget build(BuildContext context) {
  11. return Scaffold(
  12. appBar: AppBar(),
  13. body: Center(),
  14. );
  15. }
  16. }

Dialog

画像選択

画像切り抜き

DB

Sqlite

トラブル


Googleサインインを利用したときに、PlatformException(sign_in_failed, com.google.android.gms.common.api.ApiException: 10: , null)エラー


  1. keytool -list -v -alias androiddebugkey -keystore ~/.android/debug.keystore
  1. $ keytool -keystore .android/debug.keystore -list -v
一度誤ったキーストアを使用してしまった場合、flutter clean を行う
  1. $ flutter clean

flutter doctor --android-licenses でエラー


  1. calcutta:tenarai_online hirotoyagi$ flutter doctor --android-licenses
  2. Exception in thread "main" java.lang.NoClassDefFoundError: javax/xml/bind/annotation/XmlSchema
  3. at com.android.repository.api.SchemaModule$SchemaModuleVersion.<init>(SchemaModule.java:156)
  4. at com.android.repository.api.SchemaModule.<init>(SchemaModule.java:75)
  5. at com.android.sdklib.repository.AndroidSdkHandler.<clinit>(AndroidSdkHandler.java:81)
  6. at com.android.sdklib.tool.sdkmanager.SdkManagerCli.main(SdkManagerCli.java:73)
  7. at com.android.sdklib.tool.sdkmanager.SdkManagerCli.main(SdkManagerCli.java:48)
  8. Caused by: java.lang.ClassNotFoundException: javax.xml.bind.annotation.XmlSchema
  9. at java.base/jdk.internal.loader.BuiltinClassLoader.loadClass(BuiltinClassLoader.java:606)
  10. at java.base/jdk.internal.loader.ClassLoaders$AppClassLoader.loadClass(ClassLoaders.java:168)
  11. at java.base/java.lang.ClassLoader.loadClass(ClassLoader.java:522)
  12. ... 5 more

Flutter doctor androidsdk.png

flutter run (ios) でエラー


  1. error: Unable to load contents of file list: '/Target Support Files/Pods-Runner/Pods-Runner-frameworks-Debug-input-files.xcfilelist' (in target 'Runner'
  2. from project 'Runner')
  3. error: Unable to load contents of file list: '/Target Support Files/Pods-Runner/Pods-Runner-frameworks-Debug-output-files.xcfilelist' (in target 'Runner'
  4. from project 'Runner')
  • Cocoapods の更新
  1. $ sudo gem install cocoapods
  2. $ cd ios
  3. $ pod install