category / Flutter

Flutter

【Flutter】背景をグラデーションで表示する

Flutterで背景をグラデーションで表示します。 まずは、 AppBar に flexibleSpace を追加します。 また、 flexibleSpace に Container を設定します。 Container 内で、 decoration の BoxDecoration…

続きを読む
2022年06月19日1 分
Flutter

【Flutter】条件によって、表示する文章を変える方法

Flutterで条件により、表示する文章を変えたい場合、Getterを使います。 今回は、カウンターが0の場合は『プラスボタンをタップしてください:』、1以上の場合は『もっとプラスボタンをタップしてください:』を表示させます。 FlutterでGetterを使用するには、 get…

続きを読む
2022年05月02日1 分
Flutter

【Flutter】Flutterのパッケージやフォントをダウンロードで、Googleフォントを使用する

FlutterでGoogleフォントを使用します。 まずはパッケージであるgoogle_fontsを利用します。 ターミナルで、 flutter pub add google_fonts を実行します。 さらにターミナルで flutter pub get…

続きを読む
2022年05月01日2 分
Flutter

【Flutter】freezedを使用し、クラスモデルを生成する

Flutter の freezed を使い、immutable なモデルクラスを生成します。 まずは、必要なパッケージをインストールします。 freezed をインストールするために、ターミナルで、 flutter pub add freezed --dev…

続きを読む
2022年04月28日2 分
Flutter

【Flutter】hooks_riverpodを使用し、状態管理を簡単にする

Flutter のパッケージである、hooks_riverpod を利用し、フックとプロバイダで状態管理します。 基本コードは前回作成した、タップすると値が 2 倍になるアプリを使用します。 まずは、hooks_riverpod…

続きを読む
2022年04月24日1 分
Flutter

【Flutter】flutter_hooksを使用し、状態管理を簡単にする

Flutte のパッケージである flutter_hooks を使うことで、Flutter の状態管理が簡単になります。 ボタンをタップすると、数字が 2 倍になるアプリを作成します。 まずは、数字が表示される画面を作成しましょう。 次に、flutter_hooks…

続きを読む
2022年04月23日1 分
Flutter

【Flutter】flutter_riverpodを使用し、状態管理を実装する

Flutter のパッケージである、flutter_riverpod を使用し、状態管理を実装します。 まずは、flutter_riverpod をインストールします。 ターミナルで、 flutter pub add flutter_riverpod…

続きを読む
2022年04月22日2 分
Flutter

【Flutter】開発した内容が正常に動作するか、ユニットテストを実行する

Flutter では、テストをする方法がいくつかあります。 その中で、一番基本となるユニットテストを実行します。 まずは、画面に数字を表示させます。 main.dart 次に、掛け算を計算するファイルを作成しましょう。 utils フォルダに、for_calculate.dart…

続きを読む
2022年04月21日1 分
Flutter

【Flutter】数値を変更することができるスライダーを作成する

Flutter でスライダーを作成し、スライドの位置によって数値を変更します。 まずは、数値を表示する場所を作成します。 次に、変動する数値として、 _point を設定します。 現在 50 となっているところに、 _point を指定します。 Flutter…

続きを読む
2022年04月19日1 分
Flutter

【Flutter】get_itとcloud_firestoreで、Firebase Cloud Firestoreのデータを更新する

前回は、Flutterのパッケージであるget_itとcloud_firestoreを使い、Firebaseのデータベースにデータを削除しました。 今回は、Firebase Cloud Firestoreのデータを更新します。 firebase…

続きを読む
2022年04月18日3 分
Flutter

【Flutter】get_itとcloud_firestoreで、Firebase Cloud Firestoreのデータを削除する

前回は、Flutterのパッケージであるget_itとcloud_firestoreを使い、Firebaseのデータベースにデータを追加しました。 今回は、Firebase Cloud Firestoreのデータを削除します。 以前作成したコードは、こちらです。 pages…

続きを読む
2022年04月16日2 分
Flutter

【Flutter】get_itとcloud_firestoreで、Firebaseのデータベースにデータを追加する

前回は、Flutter のパッケージである get_it と cloud_firestore を使い、Firebase のデータベースの内容を表示しました。 今回は、Firebase のデータベースにデータを追加します。 前回、Firebase…

続きを読む
2022年04月15日2 分
Flutter

【Flutter】get_itとcloud_firestoreで、Firebaseのデータベースを実装する

Flutter のパッケージである get_it と cloud_firestore を使い、Firebase のデータベースの内容を表示します。 まずは、Firebase の Cloud FIrestore でコレクションとフィールドを作成しておきましょう。 Flutter…

続きを読む
2022年04月14日3 分
Flutter

【Flutter】get_itとFirebaseのAuthenticationを使用し、ユーザー登録機能を実装する

前回は、FlutterでFirebaseを使用するために設定し、ログインを実装しました。 今回は、ユーザー登録機能を実装します。 今回もFirebaseとFlutterをやりとりするのには、パッケージでget_itを使用します。 Firebase…

続きを読む
2022年04月13日2 分
Flutter

【Flutter】get_itでFirebaseを設定し、ログイン機能を実装する

Flutter で Firebase を使用するために設定し、ログインを実装します。 Firebase と Flutter をやりとりするのには、パッケージで get_it を使用します。 まずは、Firebase…

続きを読む
2022年04月11日7 分
Flutter

【Flutter】ログイン画面を実装する

Flutter でログイン画面を実装します。 まずは、どのデバイスでも対応できるように、画面サイズを取得します。 詳しくは、前回をご確認ください。 次に、ログイン画面を構成します。 横のスペースをデバイスサイズの 5%取るために、 horizontal…

続きを読む
2022年04月09日3 分
Flutter

【Flutter】デバイスの画面サイズを取得する方法

続きを読む
2022年04月08日1 分
Flutter

【Flutter】flutte_mapを使い、画面に地図を表示する方法

Flutter のパッケージである、 flutte_map を使い、画面に地図を表示します。 まずは、 flutte_map をインストールするために、ターミナルで、 flutter pub add flutter_map…

続きを読む
2022年04月07日2 分
Flutter

【Flutter】APIを取得し、取得した内容を画面に一覧表示する方法

バックエンドから API を取得し、取得した内容を画面に一覧表示します。 JSON データは、JSON Placeholder より photos( https://jsonplaceholder.typicode.com/ )を使用します。 まずは、flutter pub…

続きを読む
2022年04月06日3 分
Flutter

【Flutter】フォトギャラリーのように、画像を縦横に表示する方法

Flutterでフォトギャラリーのように、画像を縦横に表示するには、 GridView を使用します。 まずは、asssetsフォルダ内にimagesフォルダを作成し、画像を入れます。 pubspecc.yaml内に、画像の位置を指定します。 ターミナルで、 flutter…

続きを読む
2022年04月05日2 分
Flutter

【Flutter】画像を背景にし、リストで並べる方法

FlutterのListViewを使って、リストを作成します。 また背景は、画像を使用します。 まずは、asssetsフォルダ内にimagesフォルダを作成し、画像を入れます。 pubspecc.yaml内に、画像の位置を指定します。 ターミナルで、 flutter pub…

続きを読む
2022年04月04日1 分
Flutter

【Flutter】Widget内のコンテンツを画面からはみ出さずに表示する方法

例えば、Flutterで…

続きを読む
2022年04月01日1 分
Flutter

【Flutter】作成したページを別のファイルを作成に分割する

見通しを良くするために、Flutterでページごと別のファイルに分割します。 main.dartで、以下のコードがあるとします。 こちらのページを、別のファイルにします。 まず、pagesフォルダを作成し、home.dartを作成します。 main.dartのMyHomePage…

続きを読む
2022年03月26日1 分
Flutter

【Flutter】AlertDialogを使い、ポップアップウィンドウを表示する

Flutterでポップアップウィンドウを表示するには、AlertDialogを使います。 まずは、ポップアップウィンドウを表示するためのボタンを作成します。 _myDialogを作成し、その中に showDialog を設定します。 showDialog の context…

続きを読む
2022年03月24日1 分
Flutter

【Flutter】BottomNavigationBarを使い、アプリの下部にナビゲーションを設置する

アプリの下部にナビゲーションを設定するには、BottomNavigationBarを使います。 まずは、ナビゲーションによって切り替わる画面を簡単に作成します。 Scaffold に bottomNavigationBar を設定します。 bottomNavigationBar…

続きを読む
2022年03月23日1 分
Flutter

【Flutter】Switchを使い、オンオフのスイッチボタンを実装する

Flutterでオンオフのスイッチボタンを実装するには、 Switch を使用します。 まずは、 Scaffold 内に Switch を設定します。 スイッチの初期値を設定するため、 isOn を作成します。 Switch の中に、 value と onChanged…

続きを読む
2022年03月22日1 分
Flutter

【Flutter】DropdownButtonを使い、ドロップダウンを実装する

Flutterでドロップダウンを実装するには、 DropdownButton を使用します。 まずは、選択した値とリストを作成します。 build の中に DropdownButton を作成します。 value に取得したい値、今回は、 selectedValue…

続きを読む
2022年03月21日1 分
Flutter

【Flutter】TimePickerを使い、時刻の選択画面から時刻を取得する

Flutterで時刻の選択画面から時刻を取得します。 まずは、画面に現在の時刻を表示します。 dynamic型で dateTime を作成します。 次に、日付のデータを初期化しするために initState を使用します。 initState の中に、 TimeOfDay…

続きを読む
2022年03月20日2 分
Flutter

【Flutter】DatePickerを使い、カレンダーから日付を取得する

Flutterでカレンダーから日付を取得します。 まずは、画面に現在の日付を表示します。 dynamic型で dateTime を作成します。 次に、日付のデータを初期化しするために initState を使用します。 initState の中に、 DateTime で now…

続きを読む
2022年03月19日3 分
Flutter

【Flutter】Drawerを使い、ハンバーガーメニューを作成する

Flutterでハンバーガーメニューを作成します。 まずは、 AppBar を作成した画面を作成します。 appBar の下に、 drawer を追加します。 drawer には、 Drawer…

続きを読む
2022年03月17日1 分
Flutter

【Flutter】Tabを使い、画面を切り替える

Flutter でタブを切り替える場合、Tab を使用します。 まずは、 AppBar から作成してみましょう。 appBar の bottom に Tabbar を設定します。 TabBar の中に Tab…

続きを読む
2022年03月16日1 分
Flutter

【Flutter】Navigatorを使い、前のページに戻るボタンを作成する

Flutter で一つ前の画面に戻る機能を作成します。 まずは、MyHomePage、MySecondPage、MyThirdPage を作成します。 MyThirdPage で戻るボタンを作成し、MySecondPage へ遷移します。 MyThirdPage…

続きを読む
2022年03月15日1 分
Flutter

【Flutter】Navigatorを使い、ページ遷移の履歴を削除する

Flutter…

続きを読む
2022年03月15日1 分
Flutter

【Flutter】Navigatorを使い、遷移元のデータを遷移先へ受け渡す

今回は、Flutter で遷移元のデータを遷移先へ受け渡します。 遷移元は MyHomePage。遷移先は MySecondPage とします。 まずは、MyApp クラスの MaterialApp 内で、MyHomePage と MySecondPage…

続きを読む
2022年03月14日1 分
Flutter

【Flutter】Navigatorを使い、簡単にページ遷移する

今回は、Flutter でページ遷移をする方法を紹介します。 まずは、MyHomePage と MySecondPage を作成します。 MyHomePage にあるボタンをタップすると、MySecondPage…

続きを読む
2022年03月13日1 分
Flutter

【Flutter】TextFieldで入力した内容を状態管理する

Flutter を使い、TextField で入力した内容を状態管理します。 まずは、flutter create で作成されるカウンターアプリを修正し、画面を作成します。 タスクアプリを作成したいので、AppBar には、タスクを表示させます。 _MyHomePageState…

続きを読む
2022年03月12日2 分