すらぼうの開発ノート

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

flutter

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

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

【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サイトな…

【Flutter】hiveの使用方法

本エントリではhiveを使ったデータ管理方法を説明する。 hiveについて 特徴 パフォーマンス 公式リンク 基本的な使用方法 実装の流れ pubspec.yamlを更新してインストール Hive.initFlutter()でhiveにデータの保存先を認識させる Hive.openBox( boxの名前 )…

【Flutter】DateTimeクラスの使用方法まとめ

本エントリではDateTimeクラスの使用方法を説明する。 DateTimeとは インスタンス生成 コンストラクタを利用 DateTime() DateTime.now() DateTime.utc() 文字列をパース プロパティ 各時刻桁 isUtc timeZoneName timeZoneOffset weekday 日付と時刻の操作 時…

【Flutter】equatableの使用方法

本エントリではequatableの使用方法を説明する。 eqatableとは 使い方 equatableを使用しない実装例 equatableを使用した実装例 equatableの実行速度 == でのインスタンス比較処理速度 eqatableとは pub.dev equatableはインスタンス同士を比較する処理を簡…

【Flutter】table_calendarの使用方法

本エントリではtable_calendarパッケージを用いたカレンダーの作成方法を説明する。 table_calendarとは インストール 主なプロパティ focusedDay firstDay lastDay calendarFormat onFormatChanged availableCalendarFormats onDaySelected selectedDayPred…

【Flutter】グラフ作成パッケージfl_chartの使用方法まとめ

本エントリではFlutter用グラフ作成パッケージfl_chartの基本的な使用方法を説明する。 fl_chartとは 概要 作成可能なグラフ fl_chart使用方法 曲線・折れ線グラフ 棒グラフ 円グラフ 散布図 レーダーグラフ fl_chartとは 概要 fl_chartはFlutterでグラフを…

【Flutter】数値(文字列)の桁数を揃える方法

Flutterにて数値(文字列)の桁数を揃えて表示する方法を説明する。

【Flutter】providerの使用方法

本エントリではproviderを用いた状態管理を以下の流れで説明する。 状態管理とは providerとは 概要 使用方法 データの準備 データの共有 データの取得 サンプルアプリ 動作 コード 解説 フォルダ構成 ポイント Todoインスタンスの共有 Todoインスタンスの一…

【Flutter】fl_chartで円グラフを作成する方法

本エントリではfl_chartで円グラフを作成する方法を以下の流れで説明する。 fl_chartとは 概要 作成可能なグラフ 円グラフ作成方法 グラフ化するデータ 完成グラフ fl_chartのインストール 使用するクラス PieChart PieChartData PieChartSectionData コード…

【Flutter】Scrollcontrollerで現在の表示位置を取得する

本エントリではScrollControllerを使用して現在の表示位置を取得する方法を以下の流れで説明する。 ScrollControllerとは 現在位置の取得方法 ScrollControllerとは ListViewやGridViewなどのスクロール可能なウィジェットのスクロール処理を管理する。 api.…

【Flutter / Dart】httpパッケージの使用方法

本エントリではhttpパッケージの使用方法を以下の流れで説明する。 httpパッケージとは httpパッケージ使用方法 URLの作成 GET POST レスポンスのパース httpパッケージとは httpはHTTPリクエストを作成する際に使用するパッケージ。 公式リポジトリにも記載…

【Flutter / Dart】Singleton(シングルトン)パターンの実装

本エントリではデザインパターンの一つである「Singleton」をFlutterアプリで実装する方法を説明する。 Singletonパターンとは 使用ケース 使用する際の注意 Flutterアプリでの実装例 コード ポイント factoryキーワードをコンストラクタの前に記述する fact…

【Flutter】sqfliteの使い方

本エントリではFlutter用SQLiteプラグインsqfliteでのデータ管理方法を以下の流れで説明する。 SQLiteとは sqfliteとは shared_preferencesとの違い sqfliteを利用すべきケース shared_preferencesを利用するケース 使い方 インストール sqflite実装フロー …

【Flutter】TextFormFieldパターン別デザイン設定方法

本エントリではパターン別にTextFormFieldのデザイン設定を説明する。 TextFormFieldとは パターン別デザイン デフォルト ヒント文字あり 枠線あり 背景色あり 選択時の枠線の色 ラベルテキストあり アイコンあり(テキストフォーム外) アイコンあり(テキ…

【Flutter】fl_chartで曲線・折れ線グラフを作成する方法

本エントリではfl_chartで曲線・折れ線グラフを作成する方法を以下の流れで説明する。 fl_chartとは 概要 作成可能なグラフ 曲線・折れ線グラフ作成方法 使用するクラス LineChart LineChartData LineChartBarData FlSpot FlDotData FlTitlesData AxisTitles…