Flutter 【Flutter】ユニットテストの方法
本記事では、Flutter でのユニットテスト（単体テスト）の方法について紹介します。 ユニットテストとは？ 特定の関数やクラスなどの最小単位（ユニット）が独立して正しく動作しているかどうかを検証するテストです。ユニットテストを導入すること...
Flutter 記事一覧
Flutter Flutter 【Flutter】クレヨンしんちゃん風のタイトル作成アプリをつくってみた
2024年11月24日(日)、「クレヨンしんちゃん」の「サトーココノカドー」のモデルとなっているイトーヨーカドー春日部店が閉店するそうです。 そこで、今回は「クレヨンしんちゃん」をテーマにしたアプリを Flutter で作成してみましたので...
Flutter 【Flutter】アイコンボタン、アイコン付きボタンの使い方
Flutter で、アイコンボタンやアイコン付きのボタンの使い方について紹介します！ アイコンボタン アイコンのみでボタンにしたい場合は、IconButton ウィジェットを使用します。 使い方 以下のように、IconButton は、ic...
Flutter 【Flutter】テキストにアニメーションを付ける方法
Flutter でテキストにアニメーションを付けて表示する方法について紹介します！今回は、animated_text_kit パッケージを使っていきます。 パッケージのインストール パッケージのインストール方法は、以下の記事で紹介しています...
Flutter 【Flutter】親 Widget と子 Widget 間でメソッドを参照する方法
Flutter で、親 Widget から子 Widget のメソッドを呼び出す方法と、子 Widget から親 Widget のメソッドを呼び出す方法について紹介します！ 子 Widget から親 Widget のメソッドを呼び出す方法 ...
Flutter 【Flutter】AnimationController でアニメーション付のHPゲージをつくってみた
今回は、以下の記事でつくった HP ゲージに、ダメージが入ると少しずつHPが削られていくようなアニメーションをつけてみました！そのソースコードと解説、使い方を紹介します！ アニメーション付HPゲージ ソースコード 以下がアニメーション付のH...
Flutter 【Flutter】ラベル付チェックボックス（CheckboxListTile）の使い方、デザイン変更方法
Flutter では、Checkbox ウィジェットを使えば、チェックボックスを表示できます。しかし、チェックボックスの横に文字などを表示して、文字部分をタップした時にもチェックボックスのチェック状態を切り替えたい場合、Checkbox ウ...
Flutter 【Flutter】Checkbox の使い方とデザイン変更方法
Flutter で、チェックボックスを表示する Checkbox ウィジェットについて紹介します！ 基本の使い方 Checkbox ウィジェットは、20〜27行目のように使用します。value プロパティと onChanged プロパティの...
Flutter 【Flutter】TextField で文字入力を受け付ける
Flutter で、文字入力を受け付けるためのフィールドを作成する TextField の ウィジェットの使い方を紹介していきます。 基本の使い方 以下のように、TextField を設置することで、テキスト入力フィールドを表示させることが...
Flutter 【Flutter】画面遷移を検知して処理を行う
Flutter で、画面遷移を検知して処理を行う方法について紹介します！ 方法 observer の登録 まずは、画面遷移イベントの observer を登録します。 以下のように、インスタンスを生成します。 final RouteObse...
Dart 【Dart】指定時間後に遅延実行する方法
Dartで、遅延実行させる方法をご紹介します！ 方法 遅延実行させる方法には、大きく分けて2つあります。一つは、sleep を使う方法、もう一つは、Future.delayed を使う方法です。 sleep sleep を使用する場合は、D...
Flutter 【Flutter】ローカルデータベースにデータを保存(永続化)する方法
Flutter で、ローカルデータベースにデータを保存する方法を紹介します！SQLite を扱う sqflite のパッケージを使用していきます。 パッケージのインストール sqflite のパッケージをインストールします。また、path ...
Flutter 【Flutter】扇形を描画する方法
CustomPainter を使って、扇形を描画する方法について紹介します！ 方法 描画クラスの作成 まずは、以下のように描画クラスを作成します。詳しい扇形の設定は、以下の解説をご覧ください。 import 'package:flu...
Flutter Flutter で VIVANT のドラムが使用するアプリを再現してみた（解説編）
Flutter で VIVANT のドラムが使用するアプリを再現してみた（作成編）で作成したソースコードを解説していきます！ 作成編は、以下ご参照ください！ ソースコード おさらいですが、作成したソースコードは以下になります。 import...
Flutter Flutter で VIVANT のドラムが使用するアプリを再現してみた（作成編）
Flutter で、VIVANT のドラムが使用しているアプリを再現してみました。Flutter を使用すれば、Android、iOS 両方のアプリを一度に作成できますので、ドラムのアプリが欲しいという方は、是非、以下を参考に作成してみてく...
Flutter 【Flutter】音声読み上げ機能の実装方法
Flutter で、音声読み上げ機能を実装する方法について紹介します！ 事前準備 flutter_tts というパッケージを使うと、文字を音声として読み上げる機能を簡単に実装できます。 パッケージをインストール まずは、flutter_tt...
Flutter 【Flutter】Table Widget で表を作成する
Flutter で表を作成するには、Table Widget を使用すれば作成できます。Column Widget と Row Widget を使用すれば、表形式に配置することはできますが、Table Widget を使用するとより簡単に表...
Flutter 【Flutter】タブのページをスワイプで切り替える方法
タブのページをスワイプで切り替える方法を紹介します！ 前提 タブでページを切り替えられるようになっていることが前提です。タブでのページ切り替えについては、以下の記事で紹介していますのでご参照ください。 方法 スワイプでページ切り替えを行うに...
Flutter 【Flutter】画面下部のタブでページを切り替え可能にする方法
Flutter で画面下部にタブを表示するには、BottomNavigationBar を使用します。今回は、この BottomNavigationBar を使用してタブでページを切り替えられうようにする方法を紹介します！ BottomNa...
Flutter 【Flutter】ListView にスクロールバーを表示させる方法
ListView でスクロールバーを表示する方法を紹介します！ListView の使い方については、以下の記事をご参照ください。 スクロールバーの表示方法 ListView にスクロールバーを表示するには、Scrollbar を使用します。...