-
1
flutterでアプリの作成…？（初めての Flutter アプリ…）
こんばんは！ 「初めての Flutter アプリ」の続きです…ボタンを追加する「ビジネス ロジック」からは離れて、今度はまたユーザー インターフェースに関する作業を行いましょう。[Like] ボタンを [Next] ボタンの左に配置するには、Row が必要です。Row ウィジェットは、先程の Column と同等ですが、こちらは水平方向です。まず、既存のボタンを Row で包みます。MyHomePage の build() メソッドに移動し、ElevatedButton にカーソルを置いて、[Refactor] メニューを Ctrl+. または Cmd+. で呼び出し、[Wrap with Row] を選択します。保存すると、Row が Column と同じような働きをして、子を左にまとめているのがわかります（Column は子を上にまとめていました）。これを修正するために、前と同じ方法を使えますが、今回は mainAxisAlignment で行います。しかし、教育の目的で mainAxisSize を使用します。これは、Row に対して水平方向のスペースをすべて埋めないように指示するものです。 mainAxisSize: MainAxisSize.min, // ← Add this.UI は以前の形に戻りました。次に [Like] ボタンを追加し、それを toggleFavorite() に接続します。まず試しに、次のコードブロックを見ずに、自分でやってみてください。出来たような、カンニングをしたような感じですね…以下は、MyHomePage に 2 つ目のボタンを追加する方法の 1 つです。今回は ElevatedButton.icon() コンストラクタを使用してアイコン付きのボタンを作成します。また build メソッドの最初では、現在の単語ペアがすでにお気に入りにあるかどうかに応じて適切なアイコンを選びます。さらに、SizedBox を再度使用し、2 つのボタンの間隔を少し広げています。 // ↓ Add this. IconData icon; if (appState.favorites.contains(pair)) { icon = Icons.favorite; } else { icon = Icons.favorite_border; } // ↓ And this. ElevatedButton.icon( onPressed: () { appState.toggleFavorite(); }, icon: Icon(icon), label: Text('Like'), ),残念ながら、お気に入りを見ることはできません。ここで、完全に別の画面をアプリに追加することが必要になりました。動作しているだけです…
2024.01.20
閲覧総数 622
-
2
flutterでアプリの作成…？（Flutter入門講座_YouTube…）
こんばんは！ 「Flutterフラッター入門講座」の続きです…「#11 Flutter入門講座 go_router編」です…画面の進む、戻る方法go_router パッケージを使うnavigater（時代に合わなくなった） → navigater2.0（難しいくて複雑なので使いにくい）go_router はnavigater2.0を使いやすくするためのパッケージgo_router 便利な機能 パスと画面の組み合わせを決める・パスA － 画面A：/A － PageA・パスB － 画面B：/B － PageB・パスC － 画面C：/C － PageCpubspec.yaml に追加 dependencies: go_router: flutter_riverpod: flutter: sdk: fluttermain.dart にimport 文を書くinitialLocation: '/a',：アプリが起動したときのパスcontext.push()：'次の画面へ進むcontext.pop()：前の画面 へ戻るcontext.go()：画面を飛び越えて行くことができるこのパッケージは自分のアプリでも使うような気がします画面Cは、前に作った画面をコピペしました…動作はしました… 今回の動画も分かりやすいですね…
2024.02.07
閲覧総数 509
-
3
LED Photos…？
こんばんは！
2024.03.28
閲覧総数 538
-
4
flutterでアプリの作成…？（初めての Flutter アプリ…）
こんばんは！ 「初めての Flutter アプリ」の続きです…終わりそうで終わりません…その残り一つの変更の後の _MyHomePageState です。 child: page, // ← Here.これで、GeneratorPage と、この後で [Favorites] ページになるプレースホルダとの間で切り替わるようになりました。レスポンシブ次は、ナビゲーション レールをレスポンシブにします。つまり、十分なスペースがあるときに（extended: true を使用して）ラベルを自動的に表示するようにします。Flutter では、アプリを自動的にレスポンシブにするウィジェットがいくつか用意されています。たとえば、Row と Column に似た Wrap ウィジェットは、垂直方向または水平方向に十分なスペースがないときに、自動的に子を次の「行」に送ります（「追い出し」といいます）。FittedBox という、指定に従って利用可能なスペースに子を自動的に合わせるウィジェットもあります。しかし、NavigationRail は、どの状況でも十分なスペースがあることを認識できないため、十分なスペースがあるときに自動的にラベルを表示することができません。その判断はデベロッパーに任されています。MyHomePage が 600 ピクセル幅以上ある場合にのみ、ラベルを表示することにしましょう。注: Flutter は、長さの単位として論理ピクセルを使用します。これは、デバイス独立ピクセルとも呼ばれることもあります。8 ピクセルのパディングは、アプリが古い低解像度のスマートフォンで実行されているか、新しい「retina」デバイスで実行されているかにかかわらず、同じように見えます。物理ディスプレイでは、1 cm あたり約 38 の論理ピクセルがあり、1 インチあたり約 96 の論理ピクセルがあります。この場合に使用するウィジェットは LayoutBuilder です。これを使用すると、利用可能なスペースに応じてウィジェット ツリーを変更できます。繰り返しになりますが、VS Code にある Flutter の [Refactor] メニューを使用して、必要な変更を行います。ただし、今回は少々複雑になります。1. _MyHomePageState の build メソッドの中で、Scaffold にカーソルを置きます。2. [Refactor] メニューを Ctrl+.（Windows / Linux）または Cmd+.（Mac）で呼び出します。3. [Wrap with Builder] を選択し、Enter を押します。4. 新たに追加された Builder の名前を LayoutBuilder に変更します。5. コールバックのパラメータ リストを (context) から (context, constraints) に変更します。説明を理解する為には、色々とやればいいのかな… トラブルに遭遇すればもっと理解できるのかな…
2024.01.24
閲覧総数 486
-
5
flutterでアプリの作成…？（Flutter入門講座_YouTube…）
こんばんは！ 「Flutterフラッター入門講座」の続きです…予備知識（ターミナルで実行）flutter upgrade：flutter を最新版に新しくするflutter clean：余計なものを削除する「#13 Flutter入門講座 BottomNavigationBar編」ボトムナビゲーションバー：Scaffold の機能index の番号が0からふられる・BottomNavigationBarItem BottomNavigationBarItem( icon: アイコン, label: '文字', ),使用する時まで頭に残っていられるかな…他の部分と混ぜ合わせる事が出来るかな… 先に進んでみます…
2024.02.09
閲覧総数 511
-
6
flutterでアプリの作成…？（Flutter入門講座_YouTube…）
こんばんは！ 「Flutterフラッター入門講座」の続きです…「#24 Flutter入門講座 Firebase Auth編」長い動画ですね… 「難しいです」と書かれています…Firebase Auth：サインインを作るときに便利なサービス登録：Sign Up著名：Sign In、Sign On、Log in、Log On（Signed In、Signed In = true）退出：Sign Out、Log Out（Signed Out、Signed In = false）退会：Delete Account、Quit通常 アプリ側、サーバー側今回 ユーザー、クライアントアプリ、バックエンド基本の仕組みユーザーがアプリを使いたいアプリが「あなたは誰ですか」メールとパスワードを入力する画面ユーザーがメールとパスワードを入力してサインアップ２回目からはサインインSigned In ⇒ Signed Out問題点メール（ID）とパスワードを入力してアプリに入る方法をBasic認証Basic認証：徐々に廃止（メールは隠さないのでパスワードだけなので簡単にばれる） アプリが直接パスワードを扱うのがこわいポイント アカウントを無限に作れる（同一人物が他のアカウントを持っている） ユーザーの情報が分からない（メールアドレスが本人のものか）悪いアプリ（個人情報いただき！）ユーザーの方が「アプリにお前こそ誰だ」お互いに信頼できない解決策ソーシャルサインイン認証プロバイダー（信頼できる第三者に仲介してもらう）Google、Facebook、Play Games、Game Center、Apple、GitHub、Microsoft、X（Twitter）、Yahoo!Basic認証で大丈夫なケースメールアドレスが本人のものか確認して使う業務用アプリ（仕事専用のアプリ）通常の「Flutter入門講座」この位かな… 難しそうですね…
2024.02.22
閲覧総数 660
-
7
flutterでアプリの作成…？（Flutter入門講座_YouTube…）
こんばんは！ 「Flutterフラッター入門講座」昨日の続きです…コピペで動作はしましたが自分で他の機能と組み合わせることができるかな…画像を拡大していくと、切り替わりました…必要な機能ですが、忘れてしまいそうな機能ですね…最後に貼り付けているLED画像の制作をしていません… 過去に使用した白に赤文字の使い回しです…
2024.03.07
閲覧総数 877
-
8
flutterでアプリの作成…？（Flutter入門講座_YouTube…）
こんばんは！ 「Flutterフラッター入門講座」の続きです…「#29 Flutter入門講座 Dialog編」ダイアログはアプリの画面の上に出てきて大事な確認とかお知らせや注意をしてくれるUIのことです。フラッターでよく使われるウィジェットはアラートダイアログでGoogleがお勧めしているデザインでダイアログを作ることができます。ちなみにIOS風のデザインが好きな人はCupertinoAlertDialog（クパチーノアラートダイアログ）っていうウィジェットもあります。クパチーノはアップルの会社がある場所の名前のことです。コードの書き方は、アラートダイアログと書いてかっこを広げた中にタイトル、コンテンツ、アクションズを書いていきます。 AlertDialog( title: タイトル content:コンテント actions: [ アクションA アクションB) showDialog( context: context, builder: (_) => 表示したいダイアログ,);ダイアログは分かっても、自分で組み合わせて使うことができないと思います…
2024.03.17
閲覧総数 683
-
9
flutterでアプリの作成…？（Flutter実践入門…）
こんばんは！ Chapter1の続きです… トラブルが無ければいいのですが…・HelloWorldターミナルに「HelloWorld」が出力されるようになりました。・プログラムの基本構成１．「main.dart」ファイルのmain関数がエントリーポイント２．main関数は、MyAppを呼び出します。３．MyAppはMaterialAppという外枠の構築を行います。４．MyHomePageでは、アプリバー/テキスト/ボタンなどを作ります。５．ボタンが押された時のイベントとして_incrementCounterを作ります。!ビルドやアプリの起動がうまくいかない場合は、一度flutter cleanを実行して下さい。順調に出来てます…06.フォルダと画面の基本構成・フォルダの基本構成１．開発で直接使うプラットフォーム共通のもの(lib/test/pubspec.yamlなど)２．開発で直接使うプラットフォーム個別のもの(android/ios/webなど)３．開発で間接的に使うもの(.gitignore/READMEなど)・画面の基本構成FlutterはWidgetというパーツを組み合わせて画面を構築します。出来てはいますが、難しいですね…07.デバイスの設定・Chrome(Webアプリ)・Windows/macOS(デスクトップアプリ)・エミュレータ(Androidアプリ)・エミュレータ(iOSアプリ)・実機Chromeと実機で進めてみます…08.まとめChapter1は、終わりました… 動作はしていますが複雑ですね… この先は動作するのかな…
2024.01.04
閲覧総数 642
-
10
flutterでアプリの作成…？（Flutter実践入門…）
こんばんは！ Chapter3のトラブルの続きです…色々と調査してやりましたが…IMAGE_VIDEO(プロジェクト) > android > .gradle > app > build.gradle 48行にminSdkVersion flutter.minSdkVersion 21 を追加したり、元に戻して再実行したりしました…Chrome ではそこそこOKなのに、実機では「メソッドの数が 64k を超えているため、Android アプリをビルドするには Multidex サポートが必要です。 」出力されてしまいます…最終的には、android > app > build.gradle の50行目にmultiDexEnabled true // 追加と69行目にimplementation "androidx.multidex:multidex:2.0.1" // 追加して、何とか実機に表示が出来ました…思っていた通りに、トラブルが発生すると難しいです…この先は購入です…23 02.GPS24 03.センサー25 04.TTS(文字の音声化)26 05.STT(音声の文字化)27 06.まとめトラブルに何とか対応できましたが…
2024.01.08
閲覧総数 503
-
11
flutterでアプリの作成…？（Flutter実践入門…）
こんばんは！ Chapter3も終わりChapter4に進みます…28Chapter4:Firebaseとの連携バックエンドサーバをFirebaseというクラウドサービスを使って実装する方法01.Firebaseの概要・Firebaseの概要Firebaseは、Googleが提供するアプリ開発のプラットフォームです。クラウドサービスとして、アプリのサーバーサイドの機能を提供してくれます。・Firebaseの代表的なサービスAuthentication、Firestore、Realtime Database、Storage、Hosting、Functions、Machine Learning、Cloud Messaging、Crashlytics、Performance、TestLab、App Distribution、In-App Messaging、AdMob・Firebaseのメリット・Firebaseアカウントの作成Googleのアカウントを使用しました…・Firebaseプロジェクトの作成・Flutterアプリとの紐づけ方法Node.js/npm がインストールしました… 難しいです…Windows環境の場合は、dart pub global activate flutterfire_cliコマンド実行後に、「C:\Users\{username}\AppData\Local\Pub\Cache\bin」にパスを通して下さい。自分では出来ていると思います…「npm install -g firebase-tools」実行後に、npm WARN deprecated har-validator@5.1.5: this library is no longer supportednpm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142上記は表示されますが、OKなのかな…
2024.01.09
閲覧総数 489
-
12
flutterでアプリの作成…？（初めての Flutter アプリ…）
こんばんは！ 「初めての Flutter アプリ」の続きです… 先が長そうですね…最初のホットリロードlib/main.dart の最後で、1 つ目の Text オブジェクトの文字列に何かを追加して、ファイルを保存します。次に例を示します。 // ... return Scaffold( body: Column( children: [ Text('A random AWESOME idea:'), // ← Example change. Text(appState.current.asLowerCase), ], ), );// ...アプリはすぐに変化しますが、ランダムな単語は同じままです。これが Flutter の有名なステートフル ホットリロードの動作です。ホットリロードは、変更をソースファイルに保存したときにトリガーされます。凄いですね…ボタンを追加する次に、Column の下部で、2 つ目の Text インスタンスのすぐ下に、ボタンを追加します。変更を保存すると、アプリが再び更新されます。ボタンが表示され、それをクリックすると、VS Code のデバッグ コンソールに「button pressed!」というメッセージが表示されます。5 分で終わる Flutter 講座デバッグ コンソールを見るのも良いのですが、ボタンにはもっと意味のあることを表示したいものです。その前に、lib/main.dart のコードをよく見て、その動作を理解しましょう。 // …void main() { runApp(MyApp());}// ...このファイルの一番上に main() 関数があります。今の形では、MyApp で定義したアプリの実行を Flutter に指示するだけです。 // ...class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return ChangeNotifierProvider( create: (context) => MyAppState(), child: MaterialApp( title: 'Namer App', theme: ThemeData( useMaterial3: true, colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepOrange), ), home: MyHomePage(), ), ); }}// ...MyApp クラスは StatelessWidget を拡張しています。ウィジェットは、すべての Flutter アプリを作成する際の元になる要素です。ご覧のように、このアプリ自体がウィジェットです。MyApp 内のコードでアプリ全体をセットアップします。さらに、アプリ全体の状態を作成し、アプリに名前を付け、視覚的テーマを設定し、アプリの出発点となる「ホーム」ウィジェットを設定します。次に、MyAppState クラスでアプリの状態を定義します。今回は Flutter を初めて使うので、この Codelab は単純で的を絞ったものにします。Flutter には、アプリの状態を管理する強力な方法が多数あります。MyAppState では、アプリが機能するために必要となるデータを定義します。今のところ、現在のランダムな単語のペアを収めた変数が 1 つあるだけです。状態クラスは ChangeNotifier を拡張します。つまり、自身の変更に関する通知を行うことができるということです。たとえば、現在の単語ペアが変化したら、アプリ内のウィジェットが知る必要があります。状態は ChangeNotifierProvider を使用して作成されてアプリ全体に提供されます（MyApp の上記コードを参照）。これにより、アプリ内のどのウィジェットも状態を取得できるようになります。難しいです…
2024.01.13
閲覧総数 597
-
13
flutterでアプリの作成…？（初めての Flutter アプリ…）
こんばんは！ 「初めての Flutter アプリ」の続きです…アクセシビリティを高めるFlutter を使うことで、アプリのアクセシビリティはデフォルトで確保されます。たとえば、すべての Flutter アプリでは、アプリのすべてのテキストと対話的要素が、TalkBack や VoiceOver などのスクリーン リーダーから認識できるようになっています。なんらかの作業が必要となる場合もあります。このアプリの場合、生成された単語ペアを発音するにあたってスクリーン リーダーで問題が発生する可能性があります。人間であれば「cheaphead」を構成する 2 つの単語を問題なく識別できますが、スクリーン リーダーでは単語の途中の「ph」が「f」と発音される可能性があります。この簡単な解決方法は、pair.asLowerCase を "${pair.first} ${pair.second}" に置き換えることです。後者では、文字列補間を使用して、pair に含まれている 2 つの単語から "cheap head" などの文字列を作成しています。複合語ではなく 2 つの別々の単語を使うことで、2 つの単語がスクリーン リーダーに適切に識別され、視覚障がいのあるユーザーの体験が改善されます。とはいえ、pair.asLowerCase の視覚的な単純さは維持したいところです。Text の semanticsLabel プロパティを使用して、このテキスト ウィジェットの視覚的内容を、スクリーン リーダーにとってより適切な意味的内容でオーバーライドします。 semanticsLabel: "${pair.first} ${pair.second}",これで、UI は同じままで、スクリーン リーダーが生成された各単語ペアを正しく発音するようになりました。自分のデバイスでスクリーン リーダーを使用して、実際に試してみましょう。ヒント: Flutter には、自動テストや Semantics ウィジェットなど、アクセシビリティのためのツールが多数用意されています。色々なウィジェットがあるみたいですが、使って作成したアプリの説明が参あっても使えこなせない気がします…
2024.01.17
閲覧総数 567
-
14
flutterでアプリの作成…？（Flutter入門講座_YouTube…）
こんばんは！ 「Flutterフラッター入門講座」の続きです…「#4 Flutter入門講座 Image編」です。画像を画面に映し出す①画像を決められた位置に置いておくフォルダを作って画像を置くassets/images/画像②pubspec.yaml の編集 flutter: assets: - assets/images/①、②で画像を使う準備Image ウィジェット・Image.asset()：Image.asset('images/画像.jpeg')・Image.network()：Image.network('URL')・Image.memory()：直接画像をやり取りする場合・Image.file()：直接画像をやり取りする場合画像のサイズを変更してassets/images/に置きました…表示されました…画像や動画はバケットに置いておき、URLで呼び込む…分かりやすいですね…
2024.01.31
閲覧総数 502
-
15
flutterでアプリの作成…？（Flutter入門講座_YouTube…）
こんばんは！ 「Flutterフラッター入門講座」の続きです…「#9 Flutter入門講座 riverpod（状態管理）編」です…riverpod：変化するデータを簡単に画面に表示することができるriverpod 使うことによってデータのずれを無くすことができるriverpod を使う為に必要なパッケージpubspec.yaml に追加 dependencies: flutter_riverpod: flutter: sdk: flutterVSCode を使用していれば保存するとパッケージをダウンロードしておいてくれるmain.dart にimport 文を書くState：変化させたいデータの本体Stateデータを Provider の壁で囲む画面をConsumerWidget で作成する ref （Provider の壁に入るための鍵）が手に入るNotifier ：画面からref の鍵を預かってProvider の壁の中に入ってデータを変更する見張っていた画面に変更したデータが反映されるriverpod 他の便利な機能・autoDispose・family・FutureProvider…内容は分かったのかな… 何となく出来ました…動画の説明は分かりやすくてアプリは出来ましたが、作成時に自分が使うのには難しいですね…
2024.02.05
閲覧総数 517
-
16
flutterでアプリの作成…？（Flutter入門講座_YouTube…）
こんばんは！ 「Flutterフラッター入門講座」昨日の続きです…ターミナルの「サインインできませんでした」の上の表示を解析します…コピペして翻訳するとChrome でデバッグ モードで lib\main.dart を起動しています...Chrome 上のデバッグ サービスからの接続を待機しています...このアプリはデバッグ サービスにリンクされていますws://127.0.0.1:65298/1_NDA5dzeTo=/ws をリッスンするデバッグ サービス実行中に変更をホットリスタートするには、「r」または「R」を押します。さらに詳細なヘルプ メッセージを表示するには、「h」を押します。 終了する場合は「q」を押してください。Chrome 上の Dart VM サービスは、http://127.0.0.1:65298/1_NDA5dzeTo= で利用できます。Chrome 上の Flutter DevTools デバッガーとプロファイラーは、次の場所から入手できます。http://127.0.0.1:9101?uri=http://127.0.0.1:65298/1_NDA5dzeTo=[GSI_LOGGER-TOKEN_CLIENT]: インスタンス化されました。[GSI_LOGGER-CODE_CLIENT]: インスタンス化されました。「signIn」メソッドは、「idToken」を確実に提供できないため、Web では推奨されません。代わりに「signInSilently」と「renderButton」を使用してユーザーを認証します。詳細: https://pub.dev/packages/google_sign_in_webgoogle_sign_in プラグインの「signIn」メソッドはウェブ上で非推奨となり、2024 年第 2 四半期に削除される予定です。使用してください。代わりに「renderButton」を使用します。 見る：https://pub.dev/packages/google_sign_in_web#migrated-to-v011-and-v012-google-identity-services[GSI_LOGGER-TOKEN_CLIENT]: ポップアップ フローを開始します。[GSI_LOGGER-OAUTH2_CLIENT]: ポップアップ タイマーを開始します。[GSI_LOGGER-OAUTH2_CLIENT]: 確認ポップアップが閉じられました。難しいです… 「「signIn」メソッドはウェブ上で非推奨」関係あるのかな…嫌になりますね…
2024.03.01
閲覧総数 645
-
17
flutterでアプリの作成…？（Flutter入門講座_YouTube…）
こんばんは！ 「Flutterフラッター入門講座」の続きです…「#27 Flutter入門講座 envied編」秘密の情報は、.envに書いておけば安心これだけでは不十分…最終的に完成させるアプリの中には秘密の情報を入れておかなければいけませんから、例えばAndroidアプリのAPKファイルというものは分解して秘密の書かれた.envファイルを覗き込むことができてしまいます。.envファイルに秘密を書いて置くという文化はスマホアプリではなくてサーバーサイドで使われていた方法でした。サーバー側で動くコードはスマホアプリのように一般の人に手渡すことが無いので.envファイルを覗かれてしまう心配というものがなくてこの方法は正しい知識になります。その知識がそのままフロントエンドの世界フラッター開発者の世界にも流れてきたことによって.envファイルを使っておけば安心だっていう勘違いが生まれてしまったようです。・envied：パッケージ難読化：obfuscate < 暗号化：encrypy.envを分けて作って置くという理由は正しく理解しておくことが大切です。・管理したい情報を一箇所に集める・少しでも見えずらくするどこで使用したらいいのかな… 何となく分かるような気がしますが難しいですね…
2024.03.12
閲覧総数 806
-
18
flutterでアプリの作成…？（Flutter入門講座_YouTube…）
こんばんは！ 「Flutterフラッター入門講座」昨日の続きです…・SimpleDialog：シンプルにボタンを縦に並べただけのダイアログ・Dialog：枠だけ用意してくれていて中身は全部手作りして使うので少し難易度が高いウィジェットデザイン ・モーダル ・ポップアップ ・ボトムシート ・フルスクリーンデザインもいろいろとありますね…コピペで動作しました…ダイアログの事を覚えておけるといいですが…
2024.03.18
閲覧総数 610
-
19
flutterでアプリの作成…？（Flutter入門講座_YouTube…）
こんばんは！ 「Flutterフラッター入門講座」昨日の続きです…なかなか進みませんね…フィールドに「コーヒー」のテキストを打ち込み保存ボタンを押します…保存されていました…フィールドに「ジュース」のテキストを打ち込み保存ボタンを押します…保存されてますね… 内容は難しくて分かっていませんが動作は ですね… 次に進めます…
2024.03.22
閲覧総数 506
-
20
LED Photos…？
こんばんは！
2024.04.03
閲覧総数 499
-
21
flutterでアプリの作成…？（Flutter実践入門…）
こんばんは！ Chapter1の続きです… 作業に入りそうですね…04.環境構築・概要Flutterでは、下記の通り開発したいプラットフォームに合わせてツールをインストールする必要があります。Android : Android Studio、iOS : Xcode、Web : ChromeXcodeは無し Android StudioとChromeはインストールされています… この状況で進んでみます…・環境構築(Windows)1. Gitのインストール 作業しました…2. FlutterSDKのインストール 作業しました…3. Chromeのインストール スルーしました…4. Android Studioのインストール スルーしました…5. VSCodeのインストール 久しぶりの立ち上げで作業しました…6. Visual Studioのダウンロード Update作業をしました…いろいろなアプリが絡んでいますね…・環境構築(macOS) 省略ですね…・環境構築の確認(Windows/macOS共通) flutter doctor flutter doctorコマンドは、flutterと関連ツールのインストール状態やバージョンを確認できるコマンドです。何とか出来ているのかな05.HelloWorldFlutterには、プロジェクトの新規作成を行うと自動でセットアップされるカウンタアプリがあります。・プロジェクトの新規作成・カウンタアプリの起動出来ています… 勝手に作成してくれるので、トラブルがあると厄介ですね…
2024.01.03
閲覧総数 643
-
22
flutterでアプリの作成…？（Flutter実践入門…）
こんばんは！ 「初めての Flutter アプリ」の続きです…UI を中央に寄せるランダムな単語ペアの表示は十分改善されたので、次はアプリのウィンドウや画面の中央に配置しましょう。まず、BigCard が Column の一部であることを思い出してください。Column はデフォルトで子を上部にまとめますが、これは簡単にオーバーライドできます。MyHomePage の build() メソッドを次のように変更します。 // ...class MyHomePage extends StatelessWidget { @override Widget build(BuildContext context) { var appState = context.watch<MyAppState>(); var pair = appState.current; return Scaffold( body: Column( mainAxisAlignment: MainAxisAlignment.center, // ← Add this. children: [ Text('A random AWESOME idea:'), BigCard(pair: pair), ElevatedButton( onPressed: () { appState.getNext(); }, child: Text('Next'), ), ], ), ); }}// ...これによって、Column 内の子が主軸（縦軸）に沿って中央寄せされます。すでに子は交差軸に沿って中央寄せされています（言い換えれば、すでに水平方向に中央寄せされています）。しかし Column 自体は Scaffold 内で中央寄せされていません。これは Widget Inspector で確認できます。Widget Inspector はこの Codelab の範囲外ですが、Column がハイライト表示されているとき、それがアプリの幅全体を埋めていないのがわかります。子が必要とする水平方向のスペースしか埋めていません。この Column 自体を中央寄せすることができます。Column にカーソルを置き、[Refactor] メニューを呼び出し（Ctrl+. または Cmd+.）、[Wrap with Center] を選択します。アプリの表示は変わっているはずです。必要に応じて、もう少し調整できます。・BigCard の上の Text ウィジェットは削除できます。説明的なテキスト（「A random AWESOME idea:」）は、それがなくても理解できる UI になっているので、もはや不要だと言えるでしょう。そのほうがすっきりします。・BigCard と ElevatedButton の間に SizedBox(height: 10) ウィジェットを追加することもできます。そうすれば、2 つのウィジェットの間隔が少し広がります。SizedBox ウィジェットはスペースを埋めるだけで、それ自身は何もレンダリングしません。視覚的な「ギャップ」を作るためによく利用されます。このようなオプションの変更を加えると、MyHomePage のコードは次のようになります。 // ...class MyHomePage extends StatelessWidget { @override Widget build(BuildContext context) { var appState = context.watch<MyAppState>(); var pair = appState.current; return Scaffold( body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ BigCard(pair: pair), SizedBox(height: 10), ElevatedButton( onPressed: () { appState.getNext(); }, child: Text('Next'), ), ], ), ), ); }}// ...コピペなので動いて当然なのかな… 一つ一つは理解できても全体では分からなくなってますね…
2024.01.18
閲覧総数 586
-
23
flutterでアプリの作成…？（Flutter入門講座_YouTube…）
こんばんは！ 「Flutterフラッター入門講座」昨日の続きです…コードを順番にコピペします…・service.dart：OK・state.dart：5個NG import 'package:riverpod_annotation/riverpod_annotation.dart'; @riverpod：4個・state.g.dart：4個NG @ProviderFor(userChanges) @ProviderFor(user) @ProviderFor(signedIn) @ProviderFor(userId)pubspec.yaml に追加 dependencies: riverpod_annotation:dev_dependencies: riverpod_generator:・state.dart：OKになりました…・state.g.dart：OKになりました…pages.dart：5個NG import 文：2個 final service = AuthService();：2個 final userId = ref.watch(userIdProvider);import 文のフォルダを変更pages.dart：OKになりました…router.dart：9個NG import 文：2個 part 'router.g.dart'; GoRouter router(RouterRef ref) { builder: (_, __) => const SignInPage(), builder: (_, __, child) => UserIdScope(child: child), builder: (_, __) => const HomePage(), final signedIn = ref.read(signedInProvider); ref.listen<Object?>(signedInProvider, (_, newState) {router.g.dart：OKコピペして、修正するのも良く分からないので大変です…
2024.02.28
閲覧総数 540
-
24
flutterでアプリの作成…？（Flutter入門講座_YouTube…）
こんばんは！ 「Flutterフラッター入門講座」昨日の続きです…ぎりぎり位の動画なのかな…9 か月前 Flutterフラッター 入門講座になっているので、2023年の5月位の動画かな…5月だと動くと思うのですが…2022 年 4 月 30 日より、新規アプリケーションは Google Identity Services ライブラリを使う必要があります。既存のアプリケーションは、サポート終了日までプラットフォーム ライブラリを使い続けることができます。Google は、ウェブでユーザーの個人情報を守るために、アプリやサービスへのログインをデフォルトで安全なものにする取り組みを続けています。その実現に向けて、Identity API ファミリーの一員である Google Identity Services についてお知らせしました。これは、複数の ID サービスを 1 つのソフトウェア開発キット（SDK）にまとめたものです。先日、Google Identity Services ライブラリのアップデートをリリースし、OAuth 2.0 に基づいたユーザー認可とデータ共有の機能を追加しました。新しい Identity Services ライブラリでは、さまざまなセキュリティやプライバシーの改善が行われているため、古いプラットフォーム ライブラリのすべての機能との間に完全な下位互換性があるわけではありません。そのため、新しいライブラリへの移行とコードの変更が必要になります。Google API クライアント ライブラリから gapi.client を使っているウェブ アプリケーションは、Google API を呼び出すためのアクセス トークンを扱う際に、まもなく非推奨となるプラットフォーム ライブラリの gapi.auth2 モジュールを暗黙的に読み込んで使用していますそのため、ウェブ アプリケーションを更新し、新しい Identity Services ライブラリを明示的に追加する必要があります。そのうえで、アクセス トークンのリクエストを管理するようにし、auth2 モジュールへの参照を、同等の機能を持つ新メソッドで置き換えます。難しくてまだまだできません…サーバーが全然分からないので無理ですね…
2024.03.03
閲覧総数 712
-
25
flutterでアプリの作成…？（Flutter入門講座_YouTube…）
こんばんは！ 「Flutterフラッター入門講座」の続きです…「#28 Flutter入門講座 Stack編」・Stack：ウィジェットを奥の方向へ、数字でいうならZ軸の方向に向かって重ねて表示するためのウィジェットStackと書いてカッコを広げた中にチルドレンの各括弧をさらに広げておなじみの書き方で子供たちを並べていきます。この時上に書いたウィジェットは奥の方に重ねられていくのでABCという順番に並べていくと一番手前にはCのウィジェットが来ることに注意・Positioned：スタックの中で自由に場所を決めることができるウィジェット left：左right：右top：上bottom：下width：横幅height：縦幅ここの数字を状態管理で変化させていくことでウィジェットをつまんで動かしている・Align：キリがいい場所にウィジェットを置くことができる topLefttopCentertopRightCenterLeftCenterCenterRightbottomLeftbottomCenterbottomRight場所の事をフラッターではAlignment（アライメント）と呼ぶ意味は分かりますが、使いどころがピンとこないですね…「何を自分が作成したいか決まってないからなのかな…」
2024.03.14
閲覧総数 686
-
26
LED Photos…？
こんばんは！
2024.04.02
閲覧総数 564
-
27
LED Photos…？
こんばんは！
2024.04.07
閲覧総数 586
-
28
LED Photos…？
こんばんは！
2024.04.12
閲覧総数 550
-
29
flutterでアプリの作成…？（Flutter実践入門…）
こんばんは！ Chapter2の続きです…・StatefulWidgetとStatelessWidgetの違い・statefulとstatelessの違いstatefulは状態を持ち状態の変化を覚えている、statelessは状態を持たず常に同じ状態になっている・状態を持つメリットとデメリット状態を持つメリットは、何度も同じ情報を渡さなくても良いことです。状態を持つデメリットは、制御が複雑になることです。分かるような気はしますが、使い所の判断が…・StatefulWidget(カウンタアプリ)カウンタアプリはボタンを押すたびにカウントが増えていくアプリのため、状態を持つstatefulなアプリです。・StatelessWidgetStatefulWidgetとStateの2つのクラスを準備する必要はなく、StatelessWidgetを継承したクラスを作り、Stateと同じようにbuildメソッドでWidgetを配置します。「ウーン…」イメージが出来ませんね…動作はしています…実機でも動作しています…ハートを並べて見ました…タイトルの変更など…この先は購入ですが、出来そうな自身がないので今の所は迷いますね…03.パッケージの活用04.アプリの実装例05.アニメーション06.ページ遷移07.テスト08.DevTools09.まとめ素材があることはいいですね…
2024.01.06
閲覧総数 501
-
30
flutterでアプリの作成…？（初めての Flutter アプリ…）
こんばんは！ ネットで検索して「初めての Flutter アプリ」をやってみます…1. はじめにFlutter の動作に関する基礎知識、Flutter でレイアウトを作成する方法、ユーザー操作（ボタンを押すなど）をアプリ動作に接続する方法、Flutter コードを整理された状態に保つ方法、アプリをレスポンシブにする方法（画面の変更に対して）、アプリのルックアンドフィールを一貫したものにする方法すぐに面白い部分を体験できるように、基本的なスキャフォールドから始めます。英語が出来ないので単語を調べるので大変です…2. Flutter 環境をセットアップするエディタVisual Studio Code（VS Code）開発ターゲットを選ぶFlutter はマルチプラットフォームのツールキットです。・iOS、・Android、・Windows、・macOS、・Linux、・ウェブ今までの環境からAndroid（実機）とWindowsですね注意: 後からいつでも別のオペレーティング システムでアプリを実行できます。Flutter をインストールするFlutter SDK の最新のインストール手順は、常に docs.flutter.dev にあります。 1. Flutter SDK 2. Visual Studio Code と Flutter プラグイン 3. 選んだ開発ターゲットに必要となるソフトウェア（たとえば、Windows がターゲットなら Visual Studio、macOS がターゲットなら Xcode）「Flutter実践入門」を勉強したときに出来てますね…3. プロジェクトを作成する最初の Flutter プロジェクトを作成するVisual Studio Code を起動して、コマンド パレットを開き（F1、Ctrl+Shift+P、Shift+Cmd+P）、「flutter new」と入力します。[Flutter: New Project] コマンドを選択します。次に、[Application] を選択し、プロジェクトを作成するフォルダを選択します。ホーム ディレクトリや「C:\src\」などです。最後に、プロジェクトに名前を付けます。「namer_app」や「my_awesome_namer」などです。すると、Flutter がプロジェクト フォルダを作成し、VS Code がそのフォルダを開きます。ここまでは、復習ですね… ファイルが沢山あるので、理解出来るかな…
2024.01.11
閲覧総数 558
-
31
flutterでアプリの作成…？（初めての Flutter アプリ…）
こんばんは！ 「初めての Flutter アプリ」の続きです…テーマとスタイルを設定するカードがもっと目立つように、もっと豊かな色で塗りつぶします。一貫したカラーパターンを維持するのは常によいことですから、アプリの Theme を使用して色を選びます。BigCard の build() メソッドに次の変更を加えます。 final theme = Theme.of(context); // ← Add this. color: theme.colorScheme.primary, // ← And also this.上記の 2 行では、いろいろな処理を行っています。1 行目では、Theme.of(context) でアプリの現在のテーマをリクエストしています。2 行目では、カードの色をテーマの colorScheme プロパティと同じになるよう定義しています。カラーパターンには多数の色が含まれていますが、primary がこのアプリの最も目立つ特徴的な色です。これで、カードはアプリのプライマリ カラーで塗りつぶされます。MyApp までスクロールし、そこで ColorScheme のシード色を変更すると、この色とアプリ全体のカラーパターンを変更できます。ヒント: Flutter の Colors クラスには、Colors.deepOrange や Colors.red など、厳選された色のパレットに簡単にアクセスするための手段が用意されています。もちろん、任意の色を選択することもできます。たとえば、完全に不透明で純粋な緑色を定義するには、Color.fromRGBO(0, 255, 0, 1.0) を使用します。16 進数をお好みなら、Color(0xFF00FF00) という書き方もあります。色がスムーズなアニメーションで変化しています。これを暗黙的アニメーションと呼びます。多くの Flutter ウィジェットでは、UI を状態から状態へジャンプさせるのではなく、値と値の間を滑らかに補間します。カードの下の浮き上がりボタンの色も変化しています。これが、値をハードコードするのではなく、アプリ全体が対象の Theme を使用するメリットです。TextThemeこのカードにはまだ問題があります。テキストが小さすぎ、読みにくい色になっていることです。これを修正するために、BigCard の build() メソッドに次のような変更を加えます。 // ↓ Add this. final style = theme.textTheme.displayMedium!.copyWith( color: theme.colorScheme.onPrimary, ); // ↓ Change this line. child: Text(pair.asLowerCase, style: style),theme.textTheme, を使用して、アプリのフォントテーマにアクセスします。このクラスには、bodyMedium（中サイズの標準テキスト用）、caption（画像のキャプション用）、headlineLarge（大きな見出し用）などのメンバーがあります。displayMedium プロパティは、ディスプレイ テキスト用の大きなスタイルです。ここで「ディスプレイ」という単語は、ディスプレイ書体（見出し書体）などのタイポグラフィでの意味で使用されています。displayMedium のドキュメントには「ディスプレイ スタイルは短く、重要なテキストにのみ使用します」と書かれており、まさに我々のユースケースです。理論上、テーマの displayMedium プロパティは null にすることもできますが、このアプリの記述に使用している Dart というプログラミング言語は null 安全なので、null になる可能性のあるオブジェクトのメソッドは呼び出せません。この場合、! 演算子（感嘆符演算子）を使い、承知のうえで行っているということを Dart に対して保証できます（この場合に displayMedium が null でないことは確実です。断定できる理由は、この Codelab の範囲外です）。displayMedium の copyWith() を呼び出すと、定義した変更が反映されたテキスト スタイルのコピーが返されます。この場合は、テキストの色のみを変更しています。新しい色を取得するために、再びアプリのテーマにアクセスしています。カラーパターンの onPrimary プロパティには、アプリのプライマリ カラーに使用するのに適した色が定義されています。難しいです… 動作していなければ諦めています…気が向いたら、さらにカードを変更しましょう。出来ませんね…
2024.01.16
閲覧総数 609
-
32
flutterでアプリの作成…？（Flutter入門講座_YouTube…）
こんばんは！ 「Flutterフラッター入門講座」の続きです…「#14 Flutter入門講座 Switch/Slider編」・Switch・Slider value：バリュー thumb：サム track：トラック・RangeSlider：範囲を決める状態管理を使う… これがいまいち…動作はしていますが、使いどころの考えが浮かびませんね…
2024.02.10
閲覧総数 595
-
33
flutterでアプリの作成…？（Flutter入門講座_YouTube…）
こんばんは！ 「Flutterフラッター入門講座」の続きです…「#20 Flutter入門講座 font編」Fontを変える方法・https://fonts.google.com/ から探すセリフ：文字の曲がり角などの飾り付けサンセリフ（セリフ無し）monospace（モノスペース）：文字の横幅が同じmonoじゃない（プロポーショナル）手書き風（handwriting）・並び変えボタンでMost popular にする・Language をJapanese にする・文字を選んでDownload family を押す・Download したファイルを開いたらAssets > google_fonts フォルダを作成してxxx.ttf ファイルなどすべてを入れるpubspec.yaml に dependencies: google_fonts: flutter: assets: - assets/images/ - assets/google_font/ font を使う時はライセンスを確認OFL, GPL, BSD（OFL [商用利用：OK]を使ってコードを書き足す） LicenseRegistry.addLicense(() async* { final license = await rootBundle.loadString( 'google_fonts/OFL.txt', ); yield LicenseEntryWithLineBreaks( ['google_fonts'], license, ); }); 動作が… ミスは分かっているのですが、場所が分かりません…
2024.02.16
閲覧総数 565
-
34
flutterでアプリの作成…？（Flutter入門講座_YouTube…）
こんばんは！ 「Flutterフラッター入門講座」昨日の続きです…ライセンスの画面に、 Unable to load assets:"google_font/OFL.txt".The asset does not exist or has empty data.の表示が出ます… フォルダ名がgoogle_font になっていました… なかなか気が付けませんでした…google_font → google_fonts に変更して…ミスに気が付けたので良かったです… 勉強になりました…
2024.02.17
閲覧総数 564
-
35
flutterでアプリの作成…？（Flutter入門講座_YouTube…）
こんばんは！ 「Flutterフラッター入門講座」昨日の続きです…ブレークポイント：境目になっている横幅（最低限の横幅）Flutterで長さを表す単位はPixel（ピクセル）Orientation：方向を決める事 portrait（ポートレイト）：縦向き landscape（ランドスケープ）：横向き「useInheriteMediaQuery: true,」＊デバイスプレビューで縦横を切り替えるにはこの1行が必要ですが最新のFlutterで仕様変更がありそうですscreen_pod.dart：１つのファイルにまとめたもの 使い方はウィジェットの中で「final screen = ScreenRef(context).watch(screenProvider);」・NavigationRail：タブレットとかの時に画面の横側につけた縦長のバーはフラッターに入っているナビゲーションレールっていうウィジェットを使えば簡単に作ることが出来る・GridView：商品とか動画とかをマス目みたいに並べていきたいときはグリッドビューっていうウィジェットを使うflitter_screenutil パッケージもある普段何気なく使っていますが、考えられているのですね… 難しいです…
2024.03.06
閲覧総数 850
-
36
flutterでアプリの作成…？（Flutter入門講座_YouTube…）
こんばんは！ 「Flutterフラッター入門講座」昨日の続きです…まだ予備知識です…enum：種類が決まっている物（オリンピックのメダル 金, 銀, 銅、や曜日など） enam xxxx { xxxxxxxx, xxxxxxxx, xxxxxxxx,} enum medal { gold, silver, bronze,} enum day { sun, mon, tue, wed, thu, fri, sat,}・DropdownButton（ドロップダウンボタン） DropdownButton（ドロップダウンボタン）＋reverpod状態管理が出てくると難しく感じてしまいます…コピペなのに上手くいかなくて動作させるのも大変です…
2024.03.09
閲覧総数 842
-
37
flutterでアプリの作成…？（Flutter入門講座_YouTube…）
こんばんは！ 「Flutterフラッター入門講座」昨日の続きです…env = environment（動作環境）開発者ごとにパスワードを分けて作ってenvファイルを渡して管理したりと秘密を隠す以外にも便利な使い道はたくさんありますフラッター以外のプログラミングでもよく登場するものなので正しく理解してその恩恵に預かっていきたいですね。コピペで、動作はしましたが…main.dart の29行目 child: Text(Env.pass1),で実行main.dart の29行目 child: Text(Env.pass2),で実行動作しても良く分からないですね… 先に進みましょう…
2024.03.13
閲覧総数 750
-
38
flutterでアプリの作成…？（Flutter入門講座_YouTube…）
こんばんは！ 「Flutterフラッター入門講座」昨日の続きです…KV（キーバリュー）データの保存方法の中では一番簡単：データに印を付けて放り込んでいく。印の事をキーと呼んでデータのことをバリューと呼ぶデータを放り込んで保存 setString( 'drink', 'ウーロン茶',);取り出しgetString('drink');pubspec.yaml に追加 dependencies: shared_preferences:Widget ー 状態管理 ー ストレージ（KV）状態管理が絡むと難しいですね…
2024.03.20
閲覧総数 505
-
39
LED Photos…？
こんばんは！ ハードウェアの仕事が忙しくて先に進めません ごめんなさい…当分の間は、ネタが無いのでLEDの写真を貼り付けます…
2024.03.23
閲覧総数 499
-
40
LED Photos…？
こんばんは！
2024.03.25
閲覧総数 480
-
41
LED Photos…？
こんばんは！
2024.03.26
閲覧総数 517
-
42
LED Photos…？
こんばんは！
2024.03.27
閲覧総数 517
-
43
LED Photos…？
こんばんは！
2024.03.30
閲覧総数 520
-
44
LED Photos…？
こんばんは！
2024.04.06
閲覧総数 586
-
45
LED Photos…？
こんばんは！
2024.04.14
閲覧総数 609
-
46
flutterでアプリの作成…？（Flutter実践入門…）
こんばんは！ Chapter2が購入の関係で終わってしまいChapter3からです…Chapter3:スマートフォン機能の活用01.カメラとギャラリー・写真・パッケージのインストールどの様なパッケージがあるのかも覚えないとならないのかな…・実装例カメラとギャラリーの2つの方法で写真(画像)を取得して画面に表示させます。まず、FloatingActionButtonをカメラ用とギャラリー用に2つ準備し、対応するメソッドを呼び出しています。カメラから写真を取得する処理はimagePicker.pickImage(source: ImageSource.camera)、ギャラリーから写真を取得する処理はimagePicker.pickImage(source: ImageSource.gallery)で行っています。・動作イメージ・動画・パッケージのインストールカメラやギャラリーからの動画の取得はimage_pickerで良いのですが、動画の再生は別のパッケージが必要なため、video_playerというパッケージも追加で利用します。どのようなパッケージがあるのかな… 必要になった時に調べればいいのかな…・実装例・動作イメージ作業して苦労した事項です…写真の方は、手間どいませんでした…動画の方は、下記で苦労しました…Multidex support is required for your android app to build since the number of methods has exceeded 64k. See https://docs.flutter.dev/deployment/android#enabling-multidex-support for more information. You may pass the --no-multidex flag to skipメソッドの数が 64k を超えているため、Android アプリをビルドするには Multidex サポートが必要です。色々と調査して実行しましたが…
2024.01.07
閲覧総数 500
-
47
flutterでアプリの作成…？（Flutter実践入門…）
こんばんは！ Chapter4の続きです… Firebaseが絡んできて難しいです…コマンドプロンプトにてdart pub global activate flutterfire_cli を実行VSCodeでは、NGでした…「Check the spelling of the name, or if a path was included, verify that the path is correct and try again.」調査して、「Node.js/npm がインストールした後に、VSCodeで実行するには再起動が必用」でした…「Woohoo! Firebase CLI Login Successful You are logged in to the Firebase Command-Line interface. You can immediately close this window and continue using the CLI.」が、ブラウザに表示されました…最後に、必要なパッケージをインストールします。・プラットフォーム単位の紐づけ方法何とか出来てはいるのかな…02.Authentication・概要Authenticationは名前の通りユーザの認証機能を提供します。・メールアドレスとパスワードによる認証・有効化手順・パッケージのインストール・実装例「import 'firebase_options.dart';」のエラー処理が出来ないです…調査しても、分かりませんでした…ここで、「Flutter実践入門」を中断して、他の資料を探してみます…
2024.01.10
閲覧総数 532
-
48
flutterでアプリの作成…？（初めての Flutter アプリ…）
こんばんは！ 「初めての Flutter アプリ」の続きです… ここからが難しそうです…初期アプリをコピーして貼り付けるVS Code の左側のペインでエクスプローラが選択されていることを確認し、pubspec.yaml ファイルを開きます。このファイルの内容を置き換えます。pubspec.yaml ファイルでは、現在のバージョン、依存関係、同梱するアセットなど、アプリの基本情報を指定します。注: アプリの名前を namer_app 以外にした場合は、それに合わせて最初の行を変更する必要があります。このプロジェクトのもう一つの設定ファイルである analysis_options.yaml を開きます。その内容を、置き換えます。このファイルでは、Flutter がコードを解析する際の厳格さを指定します。今回は Flutter を初めて使うので、緩やかな設定にしています。これはいつでも後で調整できます。実際の製品版アプリの公開が近付けば、これよりも厳しくするのは間違いないでしょう。この2個のファイルの変更の必要性が良く分からないですね…最後に、lib/ ディレクトリの main.dart ファイルを開きます。このファイルの内容を置き換えます。このファイルの変更が、やりたい事ですね… コピペなので良く分かりません4. ボタンを追加するアプリを起動する最初に、lib/main.dart を開き、対象デバイスが選択されていることを確認します。VS Code の右下に、現在の対象デバイスを表示するボタンがあります。クリックして変更します。lib/main.dart を開いている間に、VS Code のウィンドウの右上にあるプレイ ボタンをクリックします。少し待つと、アプリがデバッグモードで起動します。注: 開発ターゲットがモバイル デバイスの場合、テキストの一部がノッチやステータスバーに隠されている可能性があります。動作しています…
2024.01.12
閲覧総数 508
-
49
flutterでアプリの作成…？（初めての Flutter アプリ…）
こんばんは！ 「初めての Flutter アプリ」の続きです… 動作しているので進みます…トラブルは対処できませんね…5. アプリを美しくするあまり良くありません。このアプリの主眼であるランダムに生成された単語ペアは、もっと目立たせる必要があります。それがこのアプリを使う最大の理由です。また、アプリのコンテンツが奇妙に中央から外れており、アプリ全体も白黒の退屈な配色になっています。ウィジェットを抽出する現在の単語ペアを表示する行は「Text(appState.current.asLowerCase)」のようになっています。これを複雑なものに変えるには、この行を抽出して別のウィジェットにするのが良いでしょう。UI の独立した論理部品を独立したウィジェットにすることは、Flutter で複雑性を管理するうえで重要な方法です。そのため、MyHomePage ウィジェットを次のように書き換えます。 var pair = appState.current; // ← Add this. Text(pair.asLowerCase), // ← Change to this.Text ウィジェットが appState 全体を参照することはなくなりました。次は [Refactor] メニューを呼び出します。VS Code では、次の 2 つの方法があります。 1. リファクタリングするコード（この場合は Text）を右クリックして、プルダウン メニューから [Refactor...] を選択する 2. カーソルをリファクタリングするコード（この場合は Text）に移動して、Ctrl+.（Win / Linux）か Cmd+.（Mac）を押す。[Refactor] メニューで、[Extract Widget] を選択します。「BigCard」などの名前を割り当て、Enter をクリックします。すると、新しいクラスである BigCard が現在のファイルの最後に自動的に作られます。このクラスは以下のようになります。 // ...class BigCard extends StatelessWidget { const BigCard({ super.key, required this.pair, }); final WordPair pair; @override Widget build(BuildContext context) { return Text(pair.asLowerCase); }}// ...リファクタリング後もアプリは正しく動作しています。カードを追加する次は、この新しいウィジェットを、このセクションの最初で構想したような、はっきりした UI にします。BigCard クラスとその中の build() メソッドを見つけます。前と同じように、Text ウィジェットで [Refactor] メニューを呼び出します。ただし今回は、ウィジェットの抽出を行います。今回は [Wrap with Padding] を選択します。これにより、Padding という Text ウィジェットの周囲に新しい親ウィジェットが作られます。保存すると、ランダムな単語が空間的な余裕を持って表示されます。パディングをデフォルト値の 8.0 から増やします。たとえば、パディングを増やすために 20 などを使用します。注: Flutter では、可能な限り、継承ではなく合成を使用します。ここでは、パディングは Text の属性ではなく、ウィジェットにしています。こうすることで、ウィジェットは 1 つの役割に集中することができ、デベロッパーは UI の合成方法に関して完全な自由を手に入れます。たとえば、Padding ウィジェットは、テキスト、画像、ボタン、独自のカスタム ウィジェット、アプリ全体のパディングに使用できます。このウィジェットで何を包んでも構いません。次は、レベルがもう一段階上がります。Padding ウィジェットにカーソルを置き、[Refactor] メニューを呼び出して、[Wrap with widget...] を選択します。これで親ウィジェットを選択できるようになります。「Card」と入力して、Enter を押します。これにより、Padding ウィジェットが、そして必然的に Text も、Card ウィジェットに包まれます。説明があるので出来ますが、自分で考えては出来ませんね…
2024.01.15
閲覧総数 605
-
50
flutterでアプリの作成…？（Flutter入門講座_YouTube…）
こんばんは！ 「Flutterフラッター入門講座」昨日の続きです…やっとFlutterに入りますね…ボタンを真ん中に置く（Googleが決めたブランドルールがある）ボタンでサービス関数を呼び出すボタンを押した時にサービスを呼び出して、サインインの関数を実行Flutterから、クライアントIDとスコープを送るpubspec.yaml > dependencies に「google_sign_in;」を追加するservice.dart にクライアントIDとscope（欲しい情報）を追加するGoogleにrequest で送るGoogleからresponse にデータが返ってくるGoogleがユーザーにscope（欲しい情報）を教えていいか確認アプリからサインイン画面が開くFlutterアプリでアクセストークンを受け取るnull の場合は中止にする（ユーザーが画面を閉じたりした場合）Flutterアプリは、アクセストークンをFirebaseに送るFirebase の画面設定 Googleサインインを有効にするpubspec.yaml > dependencies に「firebase_auth;」を追加するservice.dart に「Firebase にアクセストークンを送る」を追加するFirebase がアクセストークンをGoogleに送って情報を受け取ってサインインの処理をしてサインインを完了するまで自動で処理をするservice.dart にサインアウトのコードを付け足すコピペで作業してますが内容が難しくて… サーバーがからむと分かりませんね…
2024.02.25
閲覧総数 505
-
-
- 鉄道
- 東武 亀戸線 10000型『さのまる♥️と…
- (2026-05-27 08:56:51)
-
-
-
- 何か手作りしてますか?
- 革の財布を作る その15
- (2026-05-26 19:52:42)
-
-
-
- 妖怪ウォッチのグッズいろいろ
- 今日は妖怪ウォッチ見ました&今日の…
- (2026-01-20 16:20:04)
-
