2024年01月の記事
全31件 (31件中 1-31件目)
1
-
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
コメント(0)
-
flutterでアプリの作成…？（Flutter入門講座_YouTube…）
こんばんは！ 「Flutterフラッター入門講座」の続きです…「#3 Flutter入門講座 Column/Row編」です。Column：縦に並べるRow：横に並べる並んでいる物をchildren と呼びます…MainAxisAliment：childrenの縦の位置・start・center・end・spaceEvenly：均等にスペースを空けて並べる・spaceBetween：両端のスペースが無い・spaceAround：両手を広げてぶつからない置き方CrossAxisAliment：並んでいる物の横の位置・start・center・end・stretch：横に伸びる感じMainAxisSize.min：カラムの余分なスペースがなくなる動作しています…分かりやすいですね…
2024.01.30
コメント(0)
-
flutterでアプリの作成…？（Flutter入門講座_YouTube…）
こんばんは！ 「Flutterフラッター入門講座」の続きです…「#2 Flutter入門講座 Widgetの基本」です。Flutterで使うプログラミング言語はDartmain関数 void main() { ここにコードを書く（Widget: ウィジェット）}例 void main(){ const b = 'バナナ'; const t = Text(b); const c = Center(child: t); const s = Scaffold(body: c); const a = MaterialApp(home: s); runApp(a);}Widget・Text・Center・Scaffold・MaterialApprunApp() でアプリを動かす上の例の変数の書き方を変更して void main(){ final a = MaterialApp( home: Scaffold( body: Center( child: Text('バナナ'), ), ), ); runApp(a);}分かりやすい動画です…
2024.01.29
コメント(0)
-
flutterでアプリの作成…？（Flutter入門講座_YouTube…）
こんばんは！ 「初めての Flutter アプリ」は終わりました… 難しかったですね…YouTubeで「Flutterフラッター入門講座」を見つけました… これで勉強してみます…コメントも評判いいです… ルビーDog さんの動画です…「#1 Flutter入門講座 環境構築〜プロジェクト作成」Flutterに必要なもの① Flutterコマンド・フラッターの本体・コードをアプリに変換してくれる② Vscode③ Chrome今までの勉強でこの3個は揃っていました…Vscode のFlutterです…ターミナルでflutter --version を入力しました…ですね…PCにChrome もインストールされていました…内容が分かりやすかったですね…
2024.01.28
コメント(0)
-
flutterでアプリの作成…？（初めての Flutter アプリ…）
こんばんは！ 「初めての Flutter アプリ」の続きです… 最後ですね…9. 次のステップColumn と 2 つの Text ウィジェットを持つ機能しないスキャフォールドを、レスポンシブで魅力的な小さいアプリに作り変えました。学習した内容✓ Flutter の動作に関する基礎知識✓ Flutter でレイアウトを作成する方法✓ ユーザー操作（ボタンを押すなど）をアプリ動作に接続する方法✓ Flutter コードを整理された状態に保つ方法✓ アプリをレスポンシブにする方法✓ アプリのルックアンドフィールを一貫したものにする方法Chrome の画像実機の画像内容が初心者には難しかったです…次のステップこのラボで記述したアプリでもっと実験する。同じアプリの高度なバージョンを確認して、アニメーション付きのリスト、グラデーション、クロスフェードなどを追加する方法を確認する。もっともっと初心者向けを探してみます… あるのかな…
2024.01.27
コメント(0)
-
flutterでアプリの作成…？（初めての Flutter アプリ…）
こんばんは！ 「初めての Flutter アプリ」の続きです…以下は、お気に入りページを実装する方法の一例に過ぎません。その実装方法が、コードをいじったり、UI を改良したり、独自の改造をしたりする動機になれば幸いです。以下が新しい FavoritesPage クラスです。 // ...class FavoritesPage extends StatelessWidget { @override Widget build(BuildContext context) { var appState = context.watch<MyAppState>(); if (appState.favorites.isEmpty) { return Center( child: Text('No favorites yet.'), ); } return ListView( children: [ Padding( padding: const EdgeInsets.all(20), child: Text('You have ' '${appState.favorites.length} favorites:'), ), for (var pair in appState.favorites) ListTile( leading: Icon(Icons.favorite), title: Text(pair.asLowerCase), ), ], ); }}このウィジェットは次のように動作します。・アプリの現在の状態を取得します。・お気に入りのリストが空の場合は、中央寄せされた「No favorites yet*.*」というメッセージを表示します。・そうでない場合は（スクロール可能な）リストを表示します。・リストの最初には概要を表示します（例: You have 5 favorites*.*）・次に、すべてのお気に入りについて反復処理を行い、それぞれに ListTile を構築します。あとに残っているのは、Placeholder ウィジェットを FavoritesPage で置き換えることだけです。完成です。出来ましたけど…
2024.01.26
コメント(0)
-
flutterでアプリの作成…？（初めての Flutter アプリ…）
こんばんは！ 「初めての Flutter アプリ」の続きです…LayoutBuilder の builder コールバックは、制約が変化するたびに呼び出されます。これは、次のような場合に発生します。・ユーザーがアプリのウィンドウのサイズを変更した。・ユーザーがスマートフォンの向きをポートレート モードから横表示に変えた、またはその逆を行った。・MyHomePage の横のウィジェットのサイズが大きくなり、MyHomePage の制約が小さくなった。・その他これで、現在の constraints を照会して、ラベルを表示するかどうかを決定できるようになりました。次の一行の変更を _MyHomePageState の build メソッドに加えます。 extended: constraints.maxWidth >= 600, // ← Here.これで、アプリが画面サイズ、向き、プラットフォームなどの環境に応答するようになりました。つまり、レスポンシブになったということです。残っているのは、先程の Placeholder を実際の [Favorites] 画面に置き換えることです。8. 新しいページを追加する目標は、favorites のリストを新しいステートレス ウィジェット FavoritesPage で表示し、そのウィジェットを Placeholder の代わりに表示することです。以下にポイントを示します。・スクロールする Column が必要なときには、ListView ウィジェットをします。・context.watch<MyAppState>() を使用して任意のウィジェットから MyAppState インスタンスにアクセスできることを忘れないでください。・新しいウィジェットを試したいのなら、ListTile に title（通常はテキスト用）、leading（アイコンまたはアバター用）、onTap（操作用）などのプロパティがあります。しかし、すでにご存じのウィジェットでも、同様の効果が得られます。・Dart では、コレクション リテラルの中で for ループを使えます。たとえば、messages に文字列のリストが含まれていると、次のようにコーディングできます。・関数型プログラミングのほうが詳しいようでしたら、Dart では messages.map((m) => Text(m)).toList() のようにコーディングすることもできます。もちろん、ウィジェットのリストを作成して、build メソッドの中で命令型で追加することもできます。・[Favorites] ページを自分で追加すれば、自身で判断することで、より多くのことを学べます。デメリットは、まだ自分で解決できない問題が発生する可能性があることです。注意: 間違っても構いません。それも学習の非常に重要な要素です。最初の一時間で Flutter の開発を完璧に行えるとは誰も期待していませんし、自分でも期待すべきでありません。何から始めて、どうやって調べたらいいのかも分かりません…
2024.01.25
コメント(0)
-
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
コメント(0)
-
flutterでアプリの作成…？（初めての Flutter アプリ…）
こんばんは！ 「初めての Flutter アプリ」の続きです…setState新しいステートフル ウィジェットで追跡する必要がある変数は selectedIndex の 1 つだけです。_MyHomePageState に次の 3 の変更を加えます。 var selectedIndex = 0; // ← Add this property. selectedIndex: selectedIndex, // ← Change to this. // ↓ Replace print with this. setState(() { selectedIndex = value; });変更点を確認しましょう。1. 新しい変数 selectedIndex を導入し、0 に初期化しました。2. NavigationRail の定義で、先程まであったハードコードの 0 の代わりに、この新しい変数を使用します。3. onDestinationSelected コールバックが呼び出されたときに、単に新しい値をコンソールに出力するのではなく、setState() の呼び出しの中で selectedIndex に代入します。この呼び出しは、前に使用した notifyListeners() メソッドに似ていますが、こちらは UI を更新するためのものです。これで、ナビゲーション レールがユーザー操作に応答するようになりました。しかし、右側の拡張された領域は同じままです。これは、表示するスクリーンの決定に selectedIndex を使用していないためです。selectedIndex を使用する_MyHomePageState の build メソッドの先頭、return Scaffold の直前に、以下のコードを配置します。 // ...Widget page;switch (selectedIndex) { case 0: page = GeneratorPage(); break; case 1: page = Placeholder(); break; default: throw UnimplementedError('no widget for $selectedIndex');}// ...このコードを確認しましょう。1. Widget 型の page という新しい変数を宣言しています。2. 次に switch 文で、selectedIndex の現在の値に基づいて、画面を page に代入しています。3. FavoritesPage はまだないので、Placeholder という、配置した場所に十字が入った四角形を描画して、その部分の UI が未完成であることを示す便利なウィジェットを使用します。4. また、switch 文にフェイル ファストの原則を適用し、selectedIndex が 0 でも 1 でもない場合にエラーをスローするようにしています。これによって以降のバグを防ぐことができます。ナビゲーション レールに新たなデスティネーションを追加して、コードの更新を忘れると、開発中にプログラムがクラッシュします（機能しない理由を推測したり、バグのあるコードを製品版に入れて公開したりすることを避けられます）。こうして、右に表示したいウィジェットが page に含まれるようになったので、その他にどんな変更が必要かは推測できるかもしれません。推測できないですね…
2024.01.23
コメント(0)
-
flutterでアプリの作成…？（初めての Flutter アプリ…）
こんばんは！ 「初めての Flutter アプリ」の続きです…変更点を確認しましょう。・まず、MyHomePage のすべての内容が新しいウィジェット GeneratorPage に抽出されています。MyHomePage ウィジェットの中で抽出されていないのは Scaffold だけです。・新しい MyHomePage には 2 つの子を持つ Row が含まれています。1 つ目のウィジェットは SafeArea で、2 つ目は Expanded ウィジェットです。・SafeArea は、その子がハードウェア ノッチやステータスバーで隠れないようにするものです。このアプリでは、このウィジェットが NavigationRail を包んで、ナビゲーション ボタンがモバイル ステータスバーなどで隠されるのを防いでいます。・NavigationRail の extended: false の行は true に変更できます。そうすることで、アイコンの隣のラベルが表示されます。これ以降のステップで、これを水平方向に十分なスペースがあるときに自動的に行う方法を学びます。・このナビゲーション レールには、2 つのデスティネーション（Home と Favorites）があり、それぞれにアイコンとラベルがあります。現在の selectedIndex の定義もしています。インデックスに 0 が選択されると最初のデスティネーションが選択され、1 が選択されると 2 つ目のデスティネーションがされます。以降も同様です。今のところ、0 にハードコードされています。・また、このナビゲーション レールでは、onDestinationSelected でデスティネーションのうちの 1 つが選択されたときに何が起きるかも定義しています。現時点では、要求されたインデックス値を print() で出力するだけです。・Row の 2 番目の子は Expanded ウィジェットです。Expanded ウィジェットは Row や Column で使用すると非常に便利です。これを使用すると、ある子は必要なだけのスペースを埋め（この場合は NavigationRail）、別のウィジェットは残りのスペースをできる限り埋める（この場合は Expanded）というレイアウトを表現できます。Expanded についての考え方を 1 つ言えば、「欲張り」だということです。このウィジェットの役割をもっと詳しく知るには、NavigationRail ウィジェットをもう一つの Expanded で包んでみてください。その結果、次のようなレイアウトになります。・ナビゲーション レールには左側に少しの残りスペースがあればよいですが、2 つの Expanded ウィジェットが使用可能な水平方向のスペースをすべて分け合っています。・Expanded ウィジェットの中には色の付いた Container があり、コンテナの中には GeneratorPage があります。こんなに難しくて「初めての Flutter アプリ」ですね… ステートレス ウィジェットとステートフル ウィジェットここまでは、状態に関するすべてのニーズを MyAppState が満たしてきました。これまでに記述してきたウィジェットがすべてステートレスなのは、それが理由です。それらのウィジェットには、自身の変更可能な状態が含まれていません。どのウィジェットも自身を変更できません。必ず MyAppState を経由させる必要があります。ナビゲーション レールの selectedIndex の値を保持する手段が必要です。また、onDestinationSelected コールバック内からこの値を変更できる必要もあります。MyAppState の別のプロパティとして selectedIndex を追加することもできます。これは機能します。しかし、すべてのウィジェットが自分の値を自分の中に保存すると、すぐにアプリ状態が無意味に肥大化することは想像に難くないでしょう。一部の状態は 1 つのウィジェットにだけ関連しているので、そのウィジェット内に留めるべきです。State を持つタイプのウィジェットである StatefulWidget の説明に入りましょう。まず、MyHomePage をステートフル ウィジェットに変換します。カーソルを MyHomePage の最初の行（class MyHomePage... で始まる行）に置き、Ctrl+. または Cmd+. を使用して [Refactor] メニューを呼び出します。次に、[Convert to StatefulWidget] を選択します。IDE によって新しいクラス _MyHomePageState が作成されます。このクラスは State を拡張しているため、自身の値を管理できます（自身を変更できます）。また、古いステートレス ウィジェットの build メソッドが（ウィジェットに残らずに）_MyHomePageState に移動しています。これはそのまま移動し、build メソッドの内容は変わっていません。今は単に別の場所にあるだけです。_MyHomePageState の先頭がアンダースコア（_）なのでクラスが非公開になり、これはコンパイラによって強制されます。色々と自動で作成してますが、内容が分かってないのですぐに「元に戻す」を使用しています…
2024.01.22
コメント(2)
-
flutterでアプリの作成…？（初めての Flutter アプリ…）
こんばんは！ 「初めての Flutter アプリ」の続きです… あと少しです…7. ナビゲーション レールを追加するほとんどのアプリでは、すべてを一画面に収めることができません。このアプリでは可能かもしれませんが、教育の目的で、ユーザーのお気に入りのための別の画面を作っていきます。2 画面を切り替えるために、初めての StatefulWidget を実装します。MyHomePage を 2 つのウィジェットに分割します。以下のコードに置き換えます。 // ...class MyHomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: Row( children: [ SafeArea( child: NavigationRail( extended: false, destinations: [ NavigationRailDestination( icon: Icon(Icons.home), label: Text('Home'), ), NavigationRailDestination( icon: Icon(Icons.favorite), label: Text('Favorites'), ), ], selectedIndex: 0, onDestinationSelected: (value) { print('selected: $value'); }, ), ), Expanded( child: Container( color: Theme.of(context).colorScheme.primaryContainer, child: GeneratorPage(), ), ), ], ), ); }}class GeneratorPage extends StatelessWidget { @override Widget build(BuildContext context) { var appState = context.watch<MyAppState>(); var pair = appState.current; IconData icon; if (appState.favorites.contains(pair)) { icon = Icons.favorite; } else { icon = Icons.favorite_border; } return Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ BigCard(pair: pair), SizedBox(height: 10), Row( mainAxisSize: MainAxisSize.min, children: [ ElevatedButton.icon( onPressed: () { appState.toggleFavorite(); }, icon: Icon(icon), label: Text('Like'), ), SizedBox(width: 10), ElevatedButton( onPressed: () { appState.getNext(); }, child: Text('Next'), ), ], ), ], ), ); }}// ...保存すると、UI の見た目は問題ありませんが、機能には問題があることがわかります。ナビゲーション レールの ♥︎（ハート）をクリックしても何も起きません。動作してますが、何をやっているのかな… これでいいのかな…
2024.01.21
コメント(0)
-
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
コメント(0)
-
flutterでアプリの作成…？（初めての Flutter アプリ…）
こんばんは！ 「初めての Flutter アプリ」の続きです… 動作しているので続けてみます…6. 機能を追加するアプリは機能し、ときには興味深い単語ペアを生成します。しかし、[Next] をクリックすると、単語ペアは永遠に失われてしまいます。「Like」ボタンのような、最適な提案を「記憶」する方法があるとよいでしょう。ビジネス ロジックを追加するMyAppState までスクロールして、次のコードを追加します。 // ↓ Add the code below. var favorites = <WordPair>[]; void toggleFavorite() { if (favorites.contains(current)) { favorites.remove(current); } else { favorites.add(current); } notifyListeners(); }favorites に MyAppState という新規のプロパティを追加しました。このプロパティは空のリスト [] で初期化されています。また、ジェネリクスを使って、このリストが <WordPair>[] のみを含むように指定しました。これにより、WordPair 以外を追加しようとすると、Dart によりアプリの実行すら拒否されるようになります。そうすると、favorites リストに望ましくないオブジェクト（null など）が隠れていないことがわかるので、それを安心して使うことができます。注: Dart には List（[] で表記）以外にもコレクション型があります。お気に入りのコレクションには Set（{} で表記）のほうが理にかなっているとも言えます。この Codelab では、わかりやすくするためにリストの利用を続けます。しかし必要であれば Set を使っても構いません。コードはさほど変わりません。新しいメソッド toggleFavorite() の追加も行いました。このメソッドは、お気に入りのリストから現在の単語ペアを取り除くか（すでにそこにある場合）、追加します（まだそこにない場合）。どちらの場合も、その後でこのコードから notifyListeners(); が呼び出されます。機能の追加は、思いついて追加したのかな… 最初から考えられていてアプリの作り方として追加になったのかな… 自分では無理ですね…
2024.01.19
コメント(0)
-
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
コメント(0)
-
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
コメント(0)
-
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
コメント(0)
-
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
コメント(0)
-
flutterでアプリの作成…？（初めての Flutter アプリ…）
こんばんは！ 「初めての Flutter アプリ」の続きです… コピペで出来ていますが内容は難しいです…最後は、すでに変更しているウィジェット、MyHomePage です。以下の番号付きの行は、それぞれ、上記コード内の行番号のコメントに対応しています。 // ...class MyHomePage extends StatelessWidget { @override Widget build(BuildContext context) { // ← 1 var appState = context.watch<MyAppState>(); // ← 2 return Scaffold( // ← 3 body: Column( // ← 4 children: [ Text('A random AWESOME idea:'), // ← 5 Text(appState.current.asLowerCase), // ← 6 ElevatedButton( onPressed: () { print('button pressed!'); }, child: Text('Next'), ), ], // ← 7 ), ); }}// ...最後は、すでに変更しているウィジェット、MyHomePage です。以下の番号付きの行は、それぞれ、上記コード内の行番号のコメントに対応しています。1. どのウィジェットでも、そのウィジェットを常に最新にするために、周囲の状況が変化するたびに自動的に呼び出される build() メソッドを定義します。2. MyHomePage では、watch メソッドを使用してアプリの現在の状態に対する変更を追跡します。3. どの build メソッドも必ず、ウィジェットか、ウィジェットのネストしたツリー（こちらのほうが一般的）を返します。この場合、トップレベルのウィジェットは Scaffold です。Scaffold はこの Codelab の対象ではありませんが、便利なウィジェットであり、実世界の Flutter アプリの多くで使用されています。4. Column は、Flutter における非常に基本的なレイアウト ウィジェットです。任意の数の子を従え、それらを上から下へ一列に配置します。デフォルトでは、その子を上に寄せます。すぐにこれを中央に寄せるように変更します。5. この Text ウィジェットは最初のステップで変更しました。6. この 2 つ目の Text ウィジェットは appState を取り、そのクラスの唯一のメンバーである current（WordPair）にアクセスします。WordPair には、asPascalCase や asSnakeCase などの便利なゲッターがあります。ここでは asLowerCase を利用しますが、これは別のものに変えても構いません。7. Flutter コードでは行末のカンマを多用します。このカンマに関しては、Column のパラメータ リストの最後（かつ唯一）のメンバーが children なので、必要ありません。それでも行末のカンマを使用するのはよいことです。メンバーの追加が簡単になるだけでなく、Dart の自動整形で行を追加する際のヒントにもなります。難しいです… 内容はまだ分からなくてもいいのかな…初めての動作MyAppState までスクロールして、getNext メソッドを追加します。 // ...class MyAppState extends ChangeNotifier { var current = WordPair.random(); // ↓ Add this. void getNext() { current = WordPair.random(); notifyListeners(); }}// ...新しい getNext() メソッドは、current に新しいランダムな WordPair を再代入します。また、監視している MyAppState に通知するために notifyListeners()（ChangeNotifier) のメソッド）の呼び出しも行います。残っているのは、ボタンのコールバックから getNext を呼び出すことだけです。 // ... ElevatedButton( onPressed: () { appState.getNext(); // ← This instead of print(). }, child: Text('Next'), ),// ...[Next] ボタンを押すたびに、新規のランダムな単語ペアが生成される動作していますが、内容が理解できません…
2024.01.14
コメント(0)
-
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
コメント(0)
-
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
コメント(0)
-
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
コメント(0)
-
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
コメント(0)
-
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
コメント(0)
-
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
コメント(0)
-
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
コメント(0)
-
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
コメント(0)
-
flutterでアプリの作成…？（Flutter実践入門…）
こんばんは！ Chapter2に入ります…Chapter2:Flutterアプリ開発の基本01.画面の構築・Widgetで画面を構築する・Chapter1の復習Widgetの関係はツリー構造となっており、親Widgetの配下に子Widgetを配置することで画面を構築していきます。Widgetは、画面を構成するパーツですが、単純に画面に表示されるテキストやボタンだけではなく、CenterやColumnのように子Widgetにレイアウト情報などの属性を与えるWidgetもあります。カウンタアプリは、Centerを親に持つTextのWidgetがあるため、画面の中央に文字列が表示されています。・Chapter1の復習・bodyにWidgetを追加する・STEP1. 文字列を表示する!Flutterにはホットリロードという機能が備わっており、デバッグ中にソースコードを修正して保存をすると、自動でエミュレータに変更内容が反映されます。出来てはいますが、トラブルに対応できるのかな…・STEP2. 2行目に文字列を表示する・STEP3. 3行目にボタンをたす・STEP4. 4行目に3個のアイコンを配置する・body以外にWidgetを追加するカウンタアプリのScaffoldには、bodyの他にもappBarやfloatingActionButtonもあります。appBarやfloatingActionButtonがある事を覚えることが…・DrawerにWidgetを追加する02.画面の更新・画面の更新・画面の更新の流れ・字列の更新例・Widgetの表示/非表示の切り替え更新ではなくWidgetの表示/非表示を切り替えたい場合があります。このような場合は、Widgetの前にif文を入れて、判定結果がtrueの時だけ表示させることもできます。自分で思いつけるかですね…内容が難しくなってきましたね…
2024.01.05
コメント(0)
-
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
コメント(0)
-
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
コメント(0)
-
flutterでアプリの作成…？（Flutter実践入門…）
こんばんは！ 「Flutter実践入門」Chapter1の続きです… まだ作業に入りません…03.Dartの概要Dartの特徴Dartは、Java/Python/JavaScriptなどのモダンな言語の特徴を備えており、メジャーなプログラミング言語を習得されている方であれば、違和感なく理解できると思います。やばいですね…・主な特徴１．UI用に最適化２．生産性の高い開発３．全てのプラットフォームで高速に動作・プログラム例・その他の特徴ここは、ですね…・Dartが備えている機能・演算子と型演算子、スプレッド演算: ...、変数修飾子、型、コレクションなど、アノテーション・制御構文条件分岐 : if、else、多分岐 : switch、case、ループ : for、while、forEach、for in、do while、制御 : break、continue、例外 : try、catch、finally、throw・関数/メソッド作業すれば分かるのかな…・オブジェクト指向・クラス・フィールド/メソッド・その他Dartでは、外部で定義されたパッケージの利用や非同期処理も可能です。何となくしか分かりませんね…04.環境構築・概要Flutterでは、下記の通り開発したいプラットフォームに合わせてツールをインストールする必要があります。Android : Android Studio、iOS : Xcode、Web : ChromeXcodeは無し Android StudioとChromeはインストールされています… この状況で進んでみます…
2024.01.02
コメント(0)
-
flutterでアプリの作成…？（Flutter実践入門…）
こんばんは！ 「Flutter実践入門」難しそうですね… Chapterに進みます…Chapter1:Flutterの概要FlutterやFlutterのプログラミング言語であるDartの概要を解説し、次のChapterから開発に入るための準備として、開発環境の構築を行います。01.Flutterとは・Flutterとは2017年にGoogleが発表したオープンソースのマルチプラットフォームの開発フレームワークです。Flutterはマルチプラットフォームなので、Android / iOS / Web / Windows / macOS / Linuxの6つのアプリを全く同じソースコードで開発できます。Flutterのプログラミング言語にはDartというコンパイル型言語が採用されています。どうなんでしょう…・なぜFlutterが注目されているのか・ポイント1. フリーかつオープンなフレームワーク・ポイント2. マルチプラットフォーム・ポイント3. Googleによる開発・ポイント4. 開発環境が整備されているFlutterはVSCodeを始め様々なIDE（統合開発環境）でプラグインが準備されており、開発やテストを簡単に行えます。加えて、FirebaseやCodemagicなどの優秀なクラウドサービスとの連携も容易で、開発の効率化をさらに後押しできます。・ポイント5. Google製品と相性が良いFlutterはGoogleが開発をしているため、他のGoogle製品と非常に相性が良いです。そのため、Googleの製品と非常に相性が良いです。マテリアルデザインやFirebaseが標準搭載もしくはプラグイン連携で簡単に利用できます。02.Flutterでアプリをリリースするまでの流れ・STEP1. 開発環境を構築するFlutterで開発を行うために必要なFlutterSDKをダウンロードしパスを通します。・STEP2. 画面と機能を作る描画を行うbuildというメソッドの中に、必要な要素(Widget)を入れて画面を構築していきます。・STEP3. テストをする・STEP4. スマートフォン機能を活用する・STEP5. クラウドサービスと連携する・STEP6. リリースをする出来るようになれば便利な気がしますが、難しそうですね… なかなか本題に入りませんね…
2024.01.01
コメント(0)
全31件 (31件中 1-31件目)
1
-
-
- 戦闘機の写真を撮るのが好き！
- ブルーインパルス
- (2024-11-01 06:30:09)
-
-
-
- 絵が好きな人！？
- 鳴門市ドイツ館「すえドンの各駅停車…
- (2024-09-15 20:25:53)
-
-
-
- 妖怪ウォッチのグッズいろいろ
- 今日もよろしくお願いします。
- (2023-08-09 06:50:06)
-
