すらぼうの開発ノート

モバイルアプリエンジニアのメモ

【Flutter】FVM(Flutter Version Management)の使い方

FVM(Flutter Version Management)とは FVMを使い始める前に FVMでSDKバージョンを切り替える手順 Flutterプロジェクトを作成する(新規にFlutterプロジェクトを作成する場合) FVMをインストール 各種設定を行う 環境変数 FVM_HOME .gitignore VSCode Andr…

【Flutter】BLoCパターンの実装

BLoCパターンとは BLoCパターンはアプリケーション開発に用いられるアーキテクチャパターンの一つ。 ざっくり以下のような特徴がある。 UIとビジネスロジックを分離する streamを利用してイベントと状態を管理する 次の記事に非常にわかりやすく説明されてい…

【Dart】Initializer list(コンストラクタにくっついているコロン「:」)の意味、使い方

意味 Initializer listとは、Dartのクラス内でコンストラクタ作成時に使用するキーワード。 このキーワードの役割は「メンバ変数を初期化する際の処理を記述する」こと。 使い方 基本の使い方は以下。 コンストラクタ() : 変数 = 値; 例 例で説明する。例え…

ワイヤレスイヤホンのスペックについて

最近ジムでのトレーニングのお供としてワイヤレスイヤホンを購入した。 その際に調べた内容を共有する。ワイヤレスイヤホン選びの参考にしてほしい。 イヤホンのスペック ノイズキャンセリング ノイズキャンセリングとは 種類 PNC(パッシブ ノイズ キャンセ…

【Swift】enum(列挙型)の使い方

enum(列挙型)とは 定義方法 値の取得 caseの値をArray型で取得する caseの個数を取得する enum(列挙型)とは 同じ型のデータをまとめるデータ型。 定義方法 次の様に定義する enum enum名{ case case名 .... } 例えばいくつかの動物の名称を「動物」とい…

【Swift】任意の少数桁で数値を四捨五入する方法

小数点第二位や三位など、任意の桁で四捨五入する方法を説明する。 方法 次の方法で任意の桁を四捨五入できる。 let digit: Int // 四捨五入したい桁 let val: Double // 四捨五入したい値 let adjuster = Double(truncating: NSDecimalNumber(decimal: pow(…

【Swift】配列から要素をランダムに取得する方法

配列からランダムに要素を取得する方法を説明する。 インデックスで指定する randomElement()を使う 例として次の配列を使い説明する。 let colorCandidates: [Color] = [ Color.black, Color.blue, Color.red, Color.green, Color.yellow, Color.orange, Co…

【SwiftUI】aspectRatio()メソッドに渡す.fitと.fillの違い

aspectRatio()メソッドに渡す.fitと.fillの違いについて説明する。 違い .fit .fill 少し詳しく aspectRatio()メソッド 図例 .fit .fill 違い .fit 指定された領域内にオブジェクトが収まるように表示される。 .fill 指定された領域内をオブジェクトが埋め尽…

【Swift】キャスト(型変換)について

本エントリではSwiftにおけるキャスト(型変換)についてまとめる。 キャスト(型変換)とは 種類 アップキャスト ダウンキャスト 方法 アップキャスト ダウンキャスト as! as? 参照 キャスト(型変換)とは 特定のインスタンスのデータ型を、他のデータ型に…

【Linux】treeコマンドでフォルダ構造を表示する

treeコマンドとは 指定したディレクトリに配置されているディレクトリ、ファイルをツリー状に表示してくれるコマンド。 mama.indstate.edu learn.microsoft.com インストール Linux apt install tree Mac brew install tree Windows コマンドプロンプトで元…

既存のデータからMarkdown形式のテーブルを作成する方法

Markdownは便利であり個人的にも多用している。 ただしテーブルを作成する際には、手打ちだとやや面倒。 そこで調べてみると以下のサイトが見つかった。 HTMLからもコピーできたりと、シンプルかつ多機能。 DeepLライクな見た目で使用しやすい。 markdown-co…

【Mac】スプレッドシートでよく使用するショートカット一覧

よくコマンドを忘れる為メモとして記載。 基本操作 操作 コマンド 列を選択 Ctrl+Space 行を選択する Shift+Space すべて選択 ⌘+A ⌘+shift+space 元に戻す ⌘+Z やり直す ⌘+Y ⌘+shift+Z fn+F4 検索 ⌘+F 値のみ貼り付け ⌘+shift+V 書式操作 操作 コマンド 太字…

【Flutter】CupertinoNavigationBarがchildで指定したウィジェットと重なる問題の対処方法

はじめに 対処方法 参考情報 はじめに CupertinoNavigationBarをCupertinoPageScaffoldにて使用すると、childに指定したウィジェットが隠れてしまう場合がある。 本エントリではその場合の対処方法を説明する。 対処方法 childウィジェットをSafeAreaでラッ…

【VSCode】フォームをタップした際キーボードを表示する設定方法

はじめに 方法 はじめに デバッグ時、フォームをタップした際に画面にキーボードを表示したいことがある。 画面上のキーボード 本エントリでは、Visual Studio Code(VSCode)で開発時フォームをタップした際に、キーボードを表示する設定方法を説明する。 …

【Linux】watchコマンドの使い方

watchコマンドとは インストール 使い方 基本系 オプション 実行間隔の変更:-n、--interval ヘッダーを非表示:-t watchコマンドとは 引数に指定したコマンドを定期実行できる。 ターミナルで実行する。 linux.die.net インストール homebrewでインストール…

【Flutter】PageViewの使い方

PageView 使い方 基本形 スクロール方向を縦に設定 ページが画面に占める割合を設定する 初期表示するページを指定する PageView ページ単位で子ウィジェットをスクロールできるレイアウトを作成するウィジェット。 以下の動画で動作の雰囲気がわかる。 yout…

【Flutter】Opacityの使い方

Opacity 使い方 基本系 例 opacity : 0.0 opacity : 0.25 opacity : 0.5 opacity : 0.75 opacity : 1.0 Opacity 子ウィジェットの透過率を設定するウィジェット。 api.flutter.dev 使い方 基本系 Opacity( opacity: ... , // 透過率 child: ... , // 透過率…

【Flutter】Spacerの使い方

Spacer 使い方 基本形 例 Spacerが1つのケース Spacerが2つ以上のケース Spacer サイズを指定できるスペースを作成するウィジェット。 RowやColumnなどのFlex系ウィジェットの子ウィジェットとして使用する。 スペースはFlex系ウィジェットのmain axis方向に…

【Flutter】AspectRatioの使い方

AspectRatio 使い方 文法 例 aspectRatio : 1 / 1 aspectRatio : 1.618 / 1 ( 黄金比 ) aspectRatio : 1 / 3 AspectRatio 子ウィジェットを指定した縦横比で表示するウィジェット。 SizedboxやContainerと異なる点は、縦横比を指定して子ウィジェットを表示…

【Flutter】ListTileウィジェットの使い方、デザイン

ListTileとは 使い方 タップ時の処理 ウィジェットの配置 タイトル サブタイトル 先頭位置 末尾位置 デザイン 背景色 アイコンの色 文字の色 ListTileとは api.flutter.dev ListTileは高さが固定されたリスト用のウィジェット。 タイトルやチェックボックス…

【Flutter】Sliderウィジェットの使い方、デザイン

Sliderウィジェットとは 使い方 基本系 例 最大値、最小値を指定 スライダーから指を離した際のイベントを指定 分割数の指定 ラベルの表示 デザイン ノブの色を指定 全体の色の指定 Sliderウィジェットとは api.flutter.dev マテリアルデザインのスライダー…

【Flutter】Checkboxウィジェットの使い方、デザイン例

Checkboxウィジェットとは 使い方 基本系 例 チェックボックスのタップを無効にする デザイン 背景色の指定 チェックマークの色指定 チェックのみを表示する 枠を丸にする 枠の太さを変更する サイズを変更する Checkboxウィジェットとは api.flutter.dev マ…

【Flutter】FutureBuilderの使い方

FutureBuilderとは 使い所 使い方 基本形 snapshotインスタンスの活用 connectionState hasData data FutureBuilderとは api.flutter.dev FutureBuilderは非同期で値が決定するFutureデータやStreamデータを扱うためのウィジェット。 使い所 ウィジェットを…

【Flutter】TextFormFieldの入力値を右寄せする方法

本エントリではTextFormFieldの入力値を右寄せする方法を説明する。 TextFormFieldとは 入力値を右寄せする方法 TextFormFieldとは TextFormFieldはユーザーに文字列を入力してもらうためのテキストフォーム作成用ウィジェット。 api.flutter.dev 入力値を右…

【Flutter/Dart】ループ処理まとめ

本エントリではFlutter/Dartにおけるループ処理の使い方について説明する。 ループ処理とは Flutter/Dartにおけるループ処理 ループ処理 for 文法 例 for...in 文法 例 forEach 文法 例 while 文法 例 do while 文法 例 ループ処理とは 特定の処理を何度も繰…

【Flutter】webview_flutterでリロード機能を実装する

本エントリではwebview_flutterでリロード機能を実装する方法を説明する。 webview_flutterとは リロード機能の実装方法 WebViewControllerのインスタンス化 onWebViewCreatedの設定 リロード処理 webview_flutterとは pub.dev webview_flutterとはFlutterア…

【Flutter】webview_flutterの使用方法

本エントリではwebview_flutterの使用方法を説明する。 webview_flutterとは Webviewとは 使用方法 インストール デフォルト表示 サイズ設定 背景色指定 イベントハンドラ系設定 ページの表示を開始した時 ページの表示が完了した時 ページをロードしている…

【Flutter】Placeholder(プレースホルダー)ウィジェットの使用方法

本エントリではPlaceholder(プレースホルダー)ウィジェットの使用方法を説明する。 Placeholder(プレースホルダー)とは 使用方法 デフォルト サイズ変更 Sizedboxなどでラップする fallbackHeight, fallbackWightなどで設定する 色変更 線の太さ変更 Pla…

【Flutter】「A RenderFlex overflowed by ... pixels on the bottom」エラー の対処方法

本エントリでは「A RenderFlex overflowed by ... pixels on the bottom」エラーの対処方法について説明する。 エラーについて 原因 発生例 対処方法 説明用コード(対処前) resizeToAvoidBottomInset: false SingleChildScrollViewでラップ エラーについて…

【Flutter】font_awesome_flutterの使い方

本エントリではfont_awesome_flutterの使い方を説明する。 font_awesome_flutterとは 使い方 インストール アイコン表示方法 アイコンの探し方 デザイン設定 サイズ カラー その他設定 セマンティックテキスト font_awesome_flutterとは pub.dev Webサイトな…