MBP(はてな)

MacBook Pro,iPhone Xs,React

Flutter入門

2024/1/8更新

macOS Sonoma 14.2.1

M1 MacBook Air 2020

Xcode 14.3 (14E222b)

 

(M1 MacBook Airでは、以下を実行すると、flutter runでpod installエラーが出なくなった。)
(flutter_my_app2で$ flutter runして、実機で実行できた。)
($ sudo arch -x86_64 gem install cocoapods)
($ sudo arch -x86_64 gem install ffi
($ arch -x86_64 pod install)

 

$ brew install cocoapods 

https://zenn.dev/imasaka0909/articles/cae09eb794340d

 

$ mkdir flutter
$ cd flutter
$ git clone https://github.com/flutter/flutter.git -b stable
.zshrc にexport PATH="$PATH:$HOME/flutter/flutter/bin"を追加
$ source .zshrc
$ flutter precache
$ flutter doctor
$ flutter create my_app
$ cd my_app
$ flutter run

画面が表示される

No supported devices connected.
$ open -a Simulator
$ flutter run
iPhone実機を接続している場合は、どちらで実行するか聞かれるので選択
シミュレータに画面が表示される

iPhone実機にインストールするには、
$ flutter devicesして、
先頭の文字(0など)を覚えておき、
$ flutter build iosして、
$ flutter install -d 0(先程の先頭の文字)で
インストールできる

Mac(M1)で作ったFlutterアプリを実機iPhoneにインストールする。 - Qiita

 

flutter_my_app2 - MBP(はてな)

 

Flutter 2.10.0 channel stable ( $ flutter --version )  
$ git clone https://github.com/flutter/flutter.git -b stable
.zshrcに追加
export PATH="$PATH:~/flutter/bin"

$ source ~/.zshrc

$ flutter -v

macOS install - Flutter

 

シミュレータ iPhone 13 iOS 15.2 ( $ open -a Simulator)

Dart 2.7.0 

 

$ flutter precache
$ flutter doctor
$ open -a Simulator
$ flutter create my_app
$ cd my_app
$flutter run

macOS install - Flutter

 

$ flutter runでSimulatorに表示される

f:id:fedora9:20210403215249p:plain

 

実機で動かすときに必要

sudo gem install cocoapods 

macOS install - Flutter

 

 

Xcode 11.4でFlutterの実機デバッグでエラーになる。Flutter v1.15.3以降が必要。

($ flutter --version。$ flutter channel beta)

$ cd github/flutter_my_app

$flutter upgrade
$flutter clean
$flutter build ios

VSCodeでも実機インストールできた。

Xcode 11.4でFlutterの実機デバッグでエラーになった際の対応方法 - Qiita

 

FlutterのiOSビルドに失敗する | Building for iOS, but the linked and embedded framework 'App.framework' was built for iOS Simulator. (in target 'Runner' from project 'Runner') - Qiita

 

Flutter入門 - 簡単なアプリを作ってUI宣言やホットリロードなど便利機能の使い方を理解しよう - エンジニアHub|若手Webエンジニアのキャリアを考える!

 

iPhone実機にインストールは、Xcodeの方が早い(画面が表示されるまで42秒。VSCodeは2分15秒)。XCodeでflutter_my_app/iosを開き、実行。

シミュレータでは、VSCodeでホットリロードが早い(0.1秒)。停止した状態から起動は2分。

エディタはVisual Studio Codeが使いやすい(慣れているため)

Visual Studio Codeではエラーが出てインストール、起動ができなくなったので、Xcodeiosフォルダを開いて、実行するとインストール、実行できた。

 

Flutter - Qiita

 

リンク

 

Xcode - Xcodeでどうしても1つだけエラーが消せない|teratail

その無償アカウントで作られたプロビジョニングプロファイルの期限が1週間です。

iPhoneMacに接続して再度Xcodeでビルドして実行しなおせば、また1週間期限の新しいプロビジョニングプロファイルが作られて実行できます。

Xcodeでflutter_my_app/iosフォルダを開き、Cleanして、ビルドすると、VSCodeiPhoneにインストールして実行できた。

 

【swift】実機テストで「The maximum number of apps for free development profiles has been reached.」というエラーが発生

 無料で同時にインストールできるアプリは2個まで

 

エラーが出て実機でデバッグ開始できない時。

1 . FirebaseのGoogleService-Info.plistが重複エラー。ファイルを削除して、実機からアプリを削除すると開始できた。

2 . Info.plistの追加エラー。Info.plistを戻して、iPhoneのアプリを削除して、macを再起動すると開始できた。

 

ショートカットキー(Visual Studio Code)

F2 Rename Symbol

stfと入力すると、テンプレートが入力される(stfがステートフル、stlがステートレス)

ファイル検索 command + shift + f

コメントアウト  command + /

importの追加などエラー解決(quick fixed) command + .

定義へ移動 F12

Wrap with WidgetやRevemo Widgetなど control + shift + r または、command + .

Restart  command + shift + F5

ブレークポイント  F9

Step Over F10

Step In F11

Start Debuging  F5

指定した行で移動. control  + g

サイドバー表示/非表示 command + b

パネル表示/非表示 command + j

 

先にxcodeをインストールする。masxcode

(FlutterSDKをダウンロード。Downloadフォルダにflutterフォルダが展開される。)

$ mkdir git

$ cd git

$ git clone https://github.com/flutter/flutter.git -b stable
Choose your first type of app | Flutter

(flutterフォルダを~/developmentに移動。~/development/flutter/bin/flutter)

~/gitフォルダで、$ export PATH="$PATH:`pwd`/flutter/bin"

.zshrcにexport PATH=~/develop/flutter/bin:$PATHを追加。

$ flutter precache

$ flutter doctor

$ open -a Simulatorで、シミュレーターを起動。

$ flutter create my_app

$ cd my_app

(~/developmentフォルダで、)$ flutter run すると、Flutter Demo Home Pageが表示される。

mainのソースは、my_app/lib/main.dart

viで、一部変更して、flutter runしたTerminalでrを押すとホットリロードできた。

Visual Studio Codeダウンロード(1.14.1)してインストールして、起動して、command + shift + p install(View - Command Paletteを選択して)、
installと入力して、Extensions: Install Extensions.を選択
flutterと入力して、flutterを選択して、インストール

command + shit + p(View - Command Paletteを選択)して、
doctorと入力して、Flutter: Run Flutter Doctorを選択。
OUTPUTを確認。

File - Openで、my_appフォルダを開き、lib/main.dartを開き、
右下のno deviceを選択して、シミュレータを起動。
main.dartを変更して、保存すると、シミュレータに反映される。

my_appのソース(my_app/lib/main.dar)について、
 onPressed: _incrementCounter,
 右下の+ボタンが押された時に、_incrementCounterが実行される。F12で定義に移動。
  setStateの中で、_counter++
 ボタンが押された時に、ダイアログを表示するには、
 _incrementCounterの中でに処理を追加。CupertinoAlertDialog。
[Flutter] ダイアログの種類と使い分け方をカチッとまとめる #Flutter - Qiita
 command + / でコメントアウト
左上にハンバーガーアイコンを表示。
  Scaffoldにdrawer: Drawer(),を追加。
Drawer
 ボタンを追加。
  RaisedButton(child: Text("Button!"),onPressed:(){})
  FlatButton(child: Text("Button!"),onPressed:(){}),
  IconButton(icon: Icon(Icons.add_circle),onPressed:(){}),
Flutter開発する前に知っておきたい35のWidget一覧 #Flutter - Qiita

Write your first Flutter app, part 1 - Flutter

iPhone Xs実機で動かす。実機でもホットリロード可能。
$ cd my_appして、open ios/Runner.xcworkspaceして、xcodeを起動。
左上のRunnerプロジェクトを選択して、
iOS Deployment Targetを13.1に変更。
TARGETSのRunnerを選択して、Deployment infoでiOS 13.1に変更。Signing & Capabilitiesで、Teamを選択する時に、アカウントが追加できない時は、MACを再起動すると追加できた。パスワードはAppleIDのパスワードを入力。(iPhoneでAppleIDのページにログインして、Generate an app-specific password)

XcodeにApple IDのパスワードを入れても受け付けなくなった | MUSHIKAGO APPS MEMO

エラーが出て起動できない時は、iPhoneの設定の、General - Profile & Device Managementを開き、DEVELOPER APPを開き、Trustすると、起動できた。


Xcodeの実行ボタンを押すと、パスワードが聞かれるので、Macにログインする時のパスワードを入力。何度も聞かれるので、聞いてこなくなるまでパスワードを入力して、「常に許可」にすると、iPhoneに画面が表示される。

Macで開発していないAndroidエンジニア向け「iOS実機でFlutterを動かす手順」 #iOS - Qiita

sudo xattr -d com.apple.quarantine /PATH_TO_YOUR_FLUTTER_HOME/bin/cache/artifacts/libimobiledevice/idevice_id
【Flutter】“idevice_id”は、開発元を検証できないため開けません。への対処法

$ flutter build ios
$ flutter devices
$ flutter install -d 5
sudo xattr -d com.apple.quarantine /PATH_TO_YOUR_FLUTTER_HOME/bin/cache/artifacts/ideviceinstall/ideviceinstall

 

[1] . Flutterで簡単なアプリを作る Flutter Issueのタイトル一覧を表示 HTTP通信 リストビュー 画像の表示

Flutter入門 - 簡単なアプリを作ってUI宣言やホットリロードなど便利機能の使い方を理解しよう - エンジニアHub|若手Webエンジニアのキャリアを考える!

 

[flutter]実機でデバッグする方法 | Malin's Blog

.zshrcにEXPORT PATHを追加して、flutterにPATHを通して、Visual Studio Codeを再起動して、File - Openで、my_appフォルダを開いて、main.dartを開くと、右下のデバイスiPhone実機が表示され、iPhone実機でホットリロードができた。

sudo xattr -d com.apple.quarantine /PATH_TO_YOUR_FLUTTER_HOME/bin/cache/artifacts/usbmuxd/iproxy

絶対にくじけないFlutter開発環境構築(VS Code) - ryuichi111stdの技術日記

 

Choose your first type of app | Flutter

Hot reload | Flutter

Set up an editor | Flutter

https://www.casleyconsulting.co.jp/blog/engineer/4587/

Write your first Flutter app | Flutter

よく目にするFlutterに関する疑問への私感

豊富に用意されたWidget

An iOS-style alert dialog.


FlutterでCupertino UIのアプリを作ってみた #Flutter - Qiita

FlutterのHello Worldを超深掘った話 - ryuichi111stdの技術日記

 

Building layouts - Flutter

 

Adding interactivity to your Flutter app - Flutter

 

 

FlutterでQiitaのクライアントを作ってみた話 - Qiita

タイトルを表示できた。

title: issue['title'] as String,

 

Flutterを半日くらいやって良さげだと思ったこと - Qiita

 

mono 🎯 @自宅 💙 on Twitter: "FlutterのHotUI、超期待( ´・‿・`)全Flutter開発者が望んでいたものっぽい( ´・‿・`)
https://t.co/UsWJ9Hm4qk… "

 

マテリアルデザインの縮むヘッダーをFlutterで爆速で実装する|shogo yamada|note

 

FlutterのThemeを理解する

 

Layouts in Flutter - Flutter

 

Supernova Studio を使ってFlutterのコード吐き出してみた - Qiita

 

DataTable In Flutter - Flutter Tutorial

 

Flutter:Widget一覧 - Qiita

 

【Flutter】childとchildrenの違いを説明

https://yaba-blog.com/flutter-child-children/

 

【Flutter】Sign in with Appleで「com.apple.AuthenticationServices.AuthorizationError error 1000.」の対処法

 

Flutterでテキストファイルの出力と読み込み - Qiita

 

リストを表示する | わかりやすいFlutterリファレンス エヌ次元株式会社 (n次元 エヌジゲン)

【Flutter入門】シンプルなメッセージアプリのUIを作る - Qiita

 

Flutter | virtualiment

 

Flutterの効率良い学び方 - Flutter 🇯🇵 - Medium

 

Flutter はじめの一歩 - Flutter 🇯🇵 - Medium

 

https://www.youtube.com/watch?v=vb8YDD7KO00

 

図書館検索

Flutterの画面遷移 - Qiita.  

 

Flutterレイアウトのビジュアルデバッグ機能 - Qiita

 

FlutterサンプルアプリGalleryの縮小するヘッダを試す - Qiita

 

PushAndRemoveUtil

FlutterでIntent.FLAG_ACTIVITY_CLEAR_TOPてきなことをやる - Qiita

 

画面遷移

FlutterのNavigatorの使い方と仕組み - Qiita

 

Flutter でサンプルプログラムを理解する - Qiita

 

ファイル読み書き

Flutter でデバイスのファイルにアクセスする - Qiita

 

FlutterのStreamBuilderでFirestoreに保存されているデータを表示する - Qiita

 

FlutterのsetStateとは? - Qiita

 

Flutterクラス間の値の受け渡し - Qiita

 

DroidKaigi2018で発表したFlutterアプリの話のスライド補足 - Konifar's WIP 

 

CupertinoActivityIndicatorソース

CupertinoActivityIndicator & CupertinoApp dark mode by LongCatIsLooong · Pull Request #39289 · flutter/flutter · GitHub

 

Supernova Studioで Flutter爆速開発の夢を見れるか? / Supernova Studio and Flutter Ultra Speed Development - Speaker Deck

 

KotlinとJavaができる人向けDart速習 - Qiita

 

Flutterの基礎 - Qiita

 

仕組みを知れば怖くない! Flutter入門 - Speaker Deck

 

管理しやすい(と思う)Flutterプロジェクトのディレクトリ構造 - Qiita

 

Android / iOS アプリの開発にクロスプラットフォームの Flutter を実戦投入した|najeira|note

 

Flutterでスマホアプリを作ってみ(た | よう)【アドベントカレンダー2018 37日目】 | 東京工業大学デジタル創作同好会traP

 

さよならSketch、こんにちはFramer X|敢太|note

 

Flutterログ #1 Hello Worldしてみる|yagitatsu|note

 

Flutterログ #4 写真を選んで加工して表示する|yagitatsu|note

 

Flutterで簡単なアプリを作れるようになるまでの学習フロー|yasukotelin|note

 

Vimの補完を他エディタやIDEのような挙動にするようにする|yasukotelin|note

 

Macbook Airを買ったのでVim8からNeovimに移行してみた|yasukotelin|note

 

Editor+Markdownでノートを管理する|yasukotelin|note

 

社内keynoteテンプレートを作った話|date001|note

 

Adobe10年ユーザーがSketch初めて触ってみた|date001|note

 

Figmaというデザインツールがすごい|UTAGE.WORKS カワシマ [フリーランスウェブクリエイター]|note

 

TextStyle class - painting library - Dart API

 

Flutterチュートリアル「Building layouts」をやってみる〜AppBar表示まで〜 – obennkyoumemo

 

BottomNavigationBar をキープしたまま画面遷移する - Qiita

 

zshでpecoと連携するためのanyframeというプラグインを作った - Qiita

 

ghq + peco をもっと便利にするコマンド gch を作った - Qiita

 

Flutterでの画面遷移まとめ - Qiita

 

Flutter:Widget一覧 - Qiita

 

Flutterでの開発をスムーズに行うためのTips集 - Flutter 🇯🇵 - Medium

 

animations | Flutter Package

 

Flutter所感 - タオルケット体操

 

Flutterのツライとこ紹介|J.J. / Manhattan Code Inc.|note

 

Flutterに入門した - Qiita

 

FlutterのColumnとRowを使ってみた | Developers.IO

 

FlutterでAPIをコールしてデータを表示して見た | Developers.IO

 

flutter-test/t95_ios_settings_page at master · xster/flutter-test · GitHub

 

Google Developers Blog: Flutter Release Preview 2: Pixel-Perfect on iOS

 

Flutter Release Preview 2で追加されたCupertinoスタイルのWidgetを試してみた | Developers.IO

 

FlutterでPluginプロジェクトを作って実装してみた | Developers.IO

 

FlutterでColumnのコンテンツを画面中央に配置する - Qiita

 

【個人開発】Flutter と Firebase で夫婦のタスク共有アプリを作った話 - Qiita

 

Android開発者のためのFlutter説明文がためになったので全訳&要約 - Qiita

 

Flutterでコンパスアプリを作ってリリースした話 - Qiita

 

Flutter Form系Widgetの使い方 〜 すべてのWidgetを学習 - Qiita

 

animations | Flutter Package

 

相対比率 Expanded flex

Hello Flutterの次におさえたい Flutterのポイント その6 (レイアウト編)

 

Flutter の Widget ツリーの裏側で起こっていること - Flutter 🇯🇵 - Medium

 

Flutterで顔認証/指紋認証を簡単に実装する - Qiita

 

FlutterでTwitterクローンを作る|shogo yamada|note

 

FlutterでTwitterアプリをトレースする #1 (ホーム画面編-①) - HeavenOSK's Log

 

GitHub - HeavenOSK/Flitter: Tracing of Twitter Mobile App in Flutter

 

Flutter Twitter Clone Part 1 - IChoosedFlutter😇 - Medium

 

Flutter InstaClone StatefulWidgetでボタンを作成 – obennkyoumemo

 

iOS Icons - Download Free Icons PNG and SVG | Icons8

 

FlutterでFacebookアプリっぽいUI作ったよー - Qiita

 

android - How to connect Flutter App to sql server - Stack Overflow

 

Flutterで学ぶSQLite - Crieit

 

flutterでCustomClipperを用いて要素を切り抜く - Qiita

 

Flutter製チャットアプリを支える技術 - Qiita

 

Flutterでの画面遷移まとめ - Qiita

 

FlutterとAndroidStudioでカメラアプリを作る - Qiita

 

Flutter製のアプリでカメラを使う | Tesshu's Blog

 

新規アプリをFlutterで開発し始めて4ヶ月|kitoko552|note

 

live template

GitHub - mono0926/instagram-flutter

 

Flutterとは 何なのか 〜できること、できないこと|へぶん🦌|note

 

Flutterで作ったアプリをiPhoneとAndroidの実機用にリリースビルドする|nbht|note

 

Flutterで値を保存したり取り出したりする - Qiita  SharedPreferences

 

【Flutter】ステートウィジェッドメモ - Qiita. shoppinglist

 

#自分用メモ FlutterでIntlパッケージを使う(超簡易) - Qiita. numFormat

 

Flutter製のアプリ・サービスなど - Qiita

 

Flutterで写真を取得したい君に - Qiita. image_picker

 

Dash 5でFlutterのドキュメントを表示する - Qiita

 

Dash for macOS - API Documentation Browser, Snippet Manager - Kapeli

 

アプリ試作や個人制作を効率化するSwiftPMの運用 - Qiita. Swift Package Manager

 

Visual Studio Codeで簡単にショートカットキーを変更する方法 - Qiita. MacのKeyboardショートカットのF11をOFF

 

Figmaで作ったデザインをDartで吐き出してくれるFigma to Flutterを使ってみた - Qiita

 

【Xcode】ひらがな化APIを使ったアプリを作りました【Swift】 - Qiita. いらすとや

 

git cloneでエラーが出た時の備忘録 - Qiita. SSH設定

 

初対面の方と「スキルの交換」をしてきた話|へぶん🦌|note

 

Flutter 全部俺 Advent Calendar 2019 - Adventar

 

Publishing the Flutter LINE login plugin package for Flutter

 

[Flutter]AppStoreにあるような、タップすると拡大するカードを作ってみる - Qiita

 

Flutter カメラの映像を表示させるサンプル - Qiita

 

[Flutter] Sign in with Apple を Cloud Functions 無しで実装する - Qiita

 

CupertinoSlidingSegmentedControl by LongCatIsLooong · Pull Request #42775 · flutter/flutter · GitHub

 

New Cupertino (iOS-style) widgets: CupertinoContextMenu & CupertinoSlidingSegmentedControl : FlutterDev

 

【初心者】Flutter:APIでデータ取得して、一覧表示させるサンプルアプリ - Qiita. REQ | RES サンプルデータ

 

DartでTwitterライブラリを作ってpubに公開しました - LOGICKY BLOG

 

FlutterでTwitterにツイートを投稿する - Qiita

 

RNHBFav/src at master · YuheiNakasaka/RNHBFav · GitHub

 

ReactNativeで自分用のHBFavを作った - razokulover publog

 

ReactNativeでアプリを作る時の個人的な最小構成 - Qiita

 

Trelloに良記事リストを作っておくと便利 - razokulover publog

 

【Flutter】アプリ開発_初心者のアプリをプロっぽくする最強のpackegeを紹介 - Qiita

 

Flutterで無限スクロールを実装する際のTips - Qiita

 

Scrapboxで読書管理をするために「ScrapMedia」というFlutterアプリを作った - SIS Lab

 

Firebase AuthenticationをFlutterアプリに導入 - Qiita

 

Flutterでgoogleにログインする - makicamelの日記

 

リリースできなかったiOSアプリのソースを公開して供養する 🙏 - Qiita

 

ADO.NET vs ORM (Entity Framework, Dapper) - マイクロソフト系技術情報 Wiki

 

Flutterアプリ公開の最後のほうにやったこと|iiinaiii|note

 

ThemeData flutter/flutter

flutter/theme_data.dart at master · flutter/flutter · GitHub

 

Cupertino flutter/flutter

flutter/packages/flutter/lib/src/cupertino at master · flutter/flutter · GitHub

 

Flutterでカラーテーマを動的に変更する - サンダーボルト

 

jqコマンドでjsonを扱う - Qiita

 

GitHub - mdanics/fluttergram: A fully functional Instagram clone written in Flutter using Firebase / Firestore

 

GitHub - pd4d10/git-touch: Open source mobile client for GitHub, GitLab, Bitbucket and Gitea, built with Flutter

 

Animation and motion widgets - Flutter

 

Flutterで環境ごとにビルド設定を切り替える — iOS編 - Flutter 🇯🇵 - Medium

 

Firebaseを使用してiPhoneアプリをリリースし半年が経った事を晒す - Qiita

 

dex.fm — 046: Flutter  podcast

 

東京都 新型コロナウイルス患者発表者数 - 東京都_新型コロナウイルス陽性患者発表情報 - 東京都オープンデータカタログサイト

 

Flutterで台湾の「マスク在庫API」のアプリ作ってみた - Qiita

 

FlutterでのWidgetツリーへの状態伝播とアクセス制限の基本戦略

 

yushunのあうとぷっとすぺーす | 最近はFlutterの話題中心に更新

 

イマドキなAndroid音楽プレーヤーの作り方 - Qiita

 

VS Codeをスニペット作成は簡単で便利だった! - lisz-works

 

Visual Studio Codeのうれしい機能を使いこなして、初心者を最速で脱出する!《VSCode実践入門》 - エンジニアHub|若手Webエンジニアのキャリアを考える!

 

Qiita にflutter swiftui の引数を渡したい

Named routeに引数を渡すサンプルコード - Qiita

 

【Flutter】公式より多機能なWebViewプラグイン「flutter_inappwebview」の使い方 | サシミスタジオ

 

Flutter:逆引きCookbook - Qiita