今回はFirestoreの作成手順とFlutterアプリからのデータ操作方法を見ていきます。 はじめに Cloud Firestoreの作成手順 Flutterアプリからのデータ操作方法 データ操作用に作成したUserクラス メソッド使用例（サンプル） おわりに はじめに 以下を前提にしています。 ・Windows環境・Flutterプロジェクト作成済み・FlutterプロジェクトとFirebaseプロジェクトの連携済み FlutterプロジェクトとFirebaseプロジェクトのどちらか、もしくはそのどちらも未作成・未連携の場合は以下記事を参考にしてください。 Cloud Firestoreの…

今回はタイトルの通り、Flutter×Firestore×Algoliaで全文検索を実装するサンプルです。 個人開発中のアプリで「全文検索（ここではSQLでいうLike句とほぼ同義）」を実装する必要があったため、今回はその備忘録も兼ねて実装手順を紹介しようと思います。 はじめに 全文検索とは 実装手順 ①Algoliaに登録し、プロジェクトの設定をする ②Firebase ExtensionsでSearch Firestore with Algoliaをインストールする ③Flutterで「algolia_helper_flutter」パッケージを導入する 1.「pubspec.yaml」に追…

こんにちは。今回は個人開発アプリの紹介記事となります。ぜひダウンロードして使ってみてください！ 開発したアプリ 開発環境 開発期間 開発の経緯 アプリの紹介 概要 機能 苦労したこと おわりに 開発したアプリ アプリ名：【レシート保存＆収支管理「レシマネ」】 AppStoreとGooglePlayにリリースしました。感想いただけるととても嬉しいです！ AppStore レシート保存＆収支管理「レシマネ」 Iori Kirihara ライフスタイル 無料 apps.apple.com GooglePlay play.google.com 開発環境 ・Windows11・Android Studi…

今回は、アプリで処理を待つ間に表示されるローディングのあのぐるぐるを実装するサンプルです。関数を作ってあるのでメソッドをコピペして呼び出してもらえればすぐに実装できます！ この記事で分かること ✅ローディングのぐるぐるの実装方法 目次 サンプル画面 サンプルコード 全文（main.dart） 実装手順の説明 ①ローディング関数作成 ②①を呼び出す ③時間のかかる処理を記述する ④ローディング画面を閉じる まとめ サンプル画面 以下画面のようにボタン押下で一定時間ローディング画面が表示されるサンプルです。 サンプルコード 全文（main.dart） import 'package:flutter…

今回は画面の下部にあるナビゲーションバーの実装方法サンプルです。 この記事で分かること ✅BottomNavigationBarの実装方法✅BottomNavigationBarの主なプロパティについて 目次 サンプル画面 サンプルコード 解説＆実装手順 ①ナビゲーションバーがタップされた場所を格納する変数を定義 ②ナビゲーションバーがタップされたときの挙動を記述した関数を定義 ③ナビゲーションバーのアイコンと文字をそれぞれ設定し②を呼び出す BottomNavigationBarの主なプロパティについて おわりに 参考 サンプル画面 このように、スマホアプリの画面下によくあるバーを実装します…

今回はTextFieldに入力した値を取得しボタン押下で画面に表示する、という動きのサンプルとなっています。ユーザーの入力値の受け取りやボタン押下で動きを持たせるなど、Flutterアプリ開発の基本のきの部分についての記事です。 この記事で分かること ✅TextFieldの入力値を受け取る方法✅ボタン押下で入力値などのデータを画面表示する方法 目次 サンプル画面 サンプルコード 実装手順と解説 ①入力値および表示内容を格納する変数を定義 ②「TextField」の「onChanged」プロパティでユーザーの入力値を格納 ③ボタン押下時の「onPressed」プロパティで「setState()」…

今回は、Flutterアプリの状態管理で大事なStatelessWidgetとStatefulWidgetの違いと使い分け、加えてInheritedWidgetについてまとめます。 この記事で分かること ✅StatelessWidgetとStatefulWidgetって何？✅StatelessWidgetとStatefulWidgetの違いと使い分け✅InheritedWidgetについて 目次 Flutterアプリの状態管理について StatelessWidget サンプルコード 実行画面 変化のある「StatelessWidget」？？ StatefulWidget サンプルコード 実行画…

今回はFlutterアプリ開発時に遭遇することのある「range out of order in character class[***]」というエラーについて原因と対処法を解説します。（***には英数字や記号等が入る） この記事で分かること ✅「range out of order in character class ～」が発生する理由✅「range out of order in character class ～」の具体例✅「range out of order in character class ～」の対処方法 目次 「range out of order in character…

今回はTextFieldに入力する文字を制限する方法についてです。いくつか例を用いて説明します。そのままコピペでOKです！ この記事で分かること ✅TextFieldに入力する値を制限する方法 目次 ①数字のみにしたい場合 ②英数字と記号のみにしたい場合 ③数字とハイフンのみにしたい場合 まとめ おわりに ①数字のみにしたい場合 TextField( keyboardType: TextInputType.number,//数字のキーボードを表示 inputFormatters: [FilteringTextInputFormatter.digitsOnly]//数字のみ入力可にする ) ke…

FlutterでWebアプリ開発のデバッグ実行時、開発機以外のデバイス（別のPCやタブレット、スマホなどの実機）で動かしたいときがあると思います。 そこで今回はLAN内の開発機以外のデバイスでデバッグ実行するためのAndroidStudioの設定と実行方法をまとめました。 この記事で分かること ✅LAN内の開発機以外の実機デバイスでデバッグするためのAndroidStudioの設定と実行方法 目次 デバッグ設定 開発機のIPアドレスを確認 AndroidStudioの設定 デバッグ実行 実機デバイスで確認 まとめ デバッグ設定 開発機のIPアドレスを確認 コマンドプロンプトを開き「ipconf…

今回はFlutterアプリ開発時に遭遇することのある「A RenderFlex overflowed by * pixels on the bottom」または「BOTTOM OVERFLOWED BY * PIXELS」（どちらも同じ意味）というエラーについて原因と対処法を解説します。（*には数字が入る） この記事で分かること ✅「A RenderFlex overflowed by pixels on the bottom」が発生する理由✅「A RenderFlex overflowed by pixels on the bottom」の対処方法 目次 「A RenderFlex over…

今回はFlutterのSingleChildScrollViewウィジェットについてです。 この記事で分かること ✅「SingleChildScrollView」ウィジェットって何？✅「SingleChildScrollView」ウィジェットの基本的な使い方✅「SingleChildScrollView」ウィジェットのプロパティとメソッドについて 目次 「SingleChildScrollView」ウィジェットとは 使用例 サンプルコード（main.dart） サンプル画面 全プロパティの説明 child clipBehavior controller dragStartBehavior ha…

今回はListViewなどでよく使われる「ListTile」ウィジェットについてです。 この記事で分かること ✅「ListTile」ウィジェットって何？✅「ListTile」ウィジェットの基本的な使い方✅「ListTile」ウィジェットの主なプロパティとメソッドについて 目次 「ListTile」ウィジェットとは 使用例 サンプルコード 画面 各プロパティの説明 leading title subtitle trailing isThreeLine まとめ 「ListTile」ウィジェットとは ListTileは高さが固定された単一の行で、通常はテキストと先頭または末尾にアイコンが置けるウィジ…

今回はFlutterでよく使う「ListView」ウィジェットについてです。 この記事で分かること ✅「ListView」ウィジェットって何？✅「ListView」ウィジェットの基本的な使い方✅「ListView」ウィジェットの主なプロパティとメソッドについて 目次 「ListView」ウィジェットとは リスト項目が固定（静的）の場合 サンプルコード 画面 説明 リスト項目が可変（動的）の場合 サンプルコード 画面 説明 リスト項目間に線などのウィジェットを表示する場合 サンプルコード 画面 説明 まとめ 「ListView」ウィジェットとは ListViewは一覧表示をしたい場合に利用するウ…

今回はFlutterでよく使う「Text」ウィジェットについてです。 この記事で分かること ✅「Text」ウィジェットって何？✅「Text」ウィジェットの基本的な使い方✅「Text」ウィジェットの主なプロパティとメソッドについて 目次 「Text」ウィジェットとは 具体例 使用しているプロパティの説明 textAlign overflow style その他よく使うプロパティの説明 softWrap maxLines textScaleFactor まとめ 「Text」ウィジェットとは Textは文字列を表示するためのメソッドです。第1引数に表示する文字列を指定します。 具体例 Text( '…

こんにちは！文系プログラマーいおです！ 今回はFlutterアプリのWidgetについてまとめました。 Widgetとは？ サンプル サンプルコード（main.dart） サンプルコードのWidget構成 おわりに Widgetとは？ Flutterアプリの画面UIを構築するための部品のことを「Widget」と呼びます。Flutterではこの「Widget」を様々組み合わせていくことで、画面を作成していきます。 サンプル 以下はFlutterプロジェクトを作成したときにデフォルトで作成されるサンプルコードです。 サンプルコード（main.dart） import 'package:flutte…

こんにちは！文系プログラマーいおです！ 「基礎から学ぶFlutter」という本を読んでみたのですが、この本はFlutter初心者がFlutterの全体像をつかむためにとても最適な良書だと感じたので共有しておこうと思います。 読んだ本 こんな人におすすめ！ ✅Flutterを始めてみたけど構成や全体像が見えない ✅Flutter初心者なので、基礎から丁寧に進めたい ✅他のプログラミング経験はあるがFlutterはこれから始める 私見 読んだ本 (function(b,c,f,g,a,d,e){b.MoshimoAffiliateObject=a; b[a]=b[a] function(){ar…

こんにちは！文系プログラマーいおです！ 今回はFlutterアプリでカウントダウンタイマーを作る方法を具体的なコード例を用いてわかりやすく解説します。 サンプル画面 サンプルコード全文 main.dart 実装手順 ①カウントダウン用の変数を定義 ②Timer.periodic()メソッドを記述し、タイマーを作成 Timer.periodic()メソッドについて おわりに サンプル画面 以下のように、アプリを実行するとカウントダウンするだけのシンプルなアプリです。 サンプルコード全文 main.dart import 'dart:async'; import 'package:flutter/…

こんにちは！文系プログラマーいおです！ 今回はWindowsでFlutterとFirebaseを使ってアプリを開発する環境を構築するための手順をまとめようと思います。 はじめに ①Firebaseにプロジェクトを追加する 1.Firabaseのサイトにログイン 2.プロジェクトの命名 3.Googleアナリティクスのアカウント作成（なくてもOK） ②FlutterアプリにFirebaseを追加する 1.プロジェクトの追加 2.Firebase CLIのインストールとログイン 3.flutterfire_cliのインストールと設定 4.必要なパッケージのインストール 5.Firebaseの初期化…

こんにちは！文系プログラマーいおです！ 今回はWindows11環境にGitをインストールする方法についてです。 そもそもGitとは インストール手順 インストールの確認 おわりに そもそもGitとは Gitは、複数の人が同じファイルを編集する際に、誰がいつどのような変更を加えたかを記録し、管理することができるツールです。これにより、ファイルの変更履歴を確認したり、過去の状態に戻したりすることができます。 macOSにはこのGitが標準でインストールされていますが、Windowsだとインストールが必要です。 インストール手順 下記URLからgitのインストーラをダウンロードする。 https:…