すらぼうの開発ノート

flutterエンジニアのメモ

flutter

【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…

【Flutter】ウィジェットを傾ける方法

本エントリではウィジェットを傾けて表示する方法を以下の流れで説明する。 ウィジェットを傾ける方法 Containerのtransformプロパティで傾ける Transform.rotate()で傾ける RotatedBoxで傾ける 3つの方法の違い ウィジェットを傾ける方法 傾いていることが…

【Flutter / Dart】Json形式のデータを読み込む方法

本エントリではJson形式のデータを読み込む方法を以下の流れで説明する。 Json形式データ読み込み方法 準備 取得データ 使用ライブラリ 読み込み方法 Json形式データ読み込み方法 準備 取得データ 以下のJsonデータを説明用に読み込む。 ちなみにこちらのデ…

【Flutter】shared_preferencesを用いてデータの保存・読み取りをする

本エントリでは以下の流れでshared_preferencesの使い方を説明する。 shared_preferencesとは shared_preferencesの使い方 準備 インストール インスタンスの作成 データ保存・読み取り キーについて int型(整数)のデータ 保存方法 読み取り方法 double型…

【Flutter】Text ウィジェットのスタイル設定方法まとめ

Textウィジェットのデザイン設定をパターン別にまとめる。 Textウィジェットのスタイル設定方法 Textウィジェットのスタイルパターン 色付き文字 背景色付き文字 任意サイズ文字 細字文字 太字文字 超太字文字 イタリック文字 上線付き文字 下線付き文字 色…

【Flutter】「DEBUG」バナーを消す方法、任意の文字のバナーを表示させる方法

Flutterアプリではデフォルトで右上に「DEBUG」と書かれたバナーが表示されている。 「DEBUG」バナー 本エントリでは以下の流れで「DEBUG」バナーを消す方法、また任意の文字のバナーを表示させる方法を説明する。 「DEBUG」バナーを消す方法 任意の文字のバ…

【Flutter】ウォークスルー画面を簡単に作成する方法

アプリ開発時、以下の様な機能を実装したいケースがある。 「アプリ起動後に表示するウォークスルー画面」 この機能はPageViewクラスとsmooth_page_indicatorで簡単に作成できる。 本エントリでは以下の流れでウォークスルー画面を簡単に作成する方法を説明…

【Flutter】showTimePickerメソッドで時刻入力用ダイアログを作成する

アプリ作成時、以下の機能を作成したいケースがある。 ユーザーが時刻を入力するためのダイアログ・ポップアップ この様な場合、showTimePickerを用いると簡単に時刻入力用のダイアログが作成できる。 api.flutter.dev 本エントリでは以下の流れでshowTimePi…

【Flutter】AnimatedContainerでContainerのアニメーションを作る

アプリを開発していると以下の機能を実装したい時がある。 Containerのプロパティ変化をアニメーションで表示したい このような場合AnimatedContainerを用いると簡単にアニメーションが作成できる。 api.flutter.dev AnimatedContainer使用例 各プロパティ d…

【Flutter】AnimatedOpacityでフェードインするアニメーションを作る

アプリを開発していると以下の機能を実装したい時がある。 ウィジェットをフェードインで表示したい ウィジェットをフェードアウトしたい このような場合AnimatedOpacityを用いると簡単にアニメーションが作成できる。 api.flutter.dev AnimatedOpacity使用…

【Flutter】AnimatedSizeでウィジェットの大きさが変わるアニメーションを作る

アプリを開発していると以下の機能を実装したい時がある。 ウィジェットのサイズの変化をアニメーションで表現したい このような場合AnimatedSizeを用いると簡単にアニメーションが作成できる。 api.flutter.dev 本エントリでは以下の流れでAnimatedSizeを用…

【Flutter】AnimatedAlignで移動アニメーションを作る

アプリを開発していると以下の機能を実装したい時がある。 ウィジェットの位置を変化させた際に移動させるアニメーションを表示したい このような場合AnimatedAlignを用いると簡単にアニメーションが作成できる。 api.flutter.dev 本エントリでは以下の流れ…

【Flutter】Dialog(ダイアログ)を表示する方法

アプリ開発をおこなっていると次のような機能を実装したいケースがある。 ユーザーに選択肢を表示したい データを削除するので注意を促したい このようなケースではAlertDialogを用いてダイアログ(ポップアップ)を簡単に作成できる。 本エントリでは以下の…

【Flutter】Autocompleteで検索フォームに候補キーワードを表示させる

アプリ開発時Google検索フォームのように、入力したキーワードを元に候補キーワードを表示させたいことがある。 Googleの検索フォーム このようなケースではAutocompleteを用いると、「候補キーワード一覧を表示する入力フォーム」を簡単に実装することがで…

【Flutter】ChoiceChipで選択式のボタンを作成する

本エントリではChoiceChipで選択式ボタンを作成する方法を以下の流れで説明する。 ChoiceChipとは 概要 プロパティ ChoiceChipを使用したサンプルアプリ 動作画像 ソースコード 解説 ChoiceChipとは 概要 ChoiceChipは以下の様なウィジェットを作成するため…

【Flutter】InputChipでいい感じのchipボタンを作成する

Material Designのchipのページには以下のようなボタンデザインが紹介されている。 material design: chip このボタンを作成するためのFlutterのウィジェットはInputChipなのだが、デフォルトのままを使おうとすると、Material Designのページのボタンと微妙…

【Flutter】「ページを戻る機能」を無効化する方法

本エントリではデフォルトで実装される「ページを戻る機能」を無効化にする方法を説明する。 ページを戻る機能 ページを戻る機能を無効化する方法 「AppBarの左に表示される戻るボタン」を無効化する 「画面端から右スワイプスで戻る機能」を無効化する ペー…