Flutter
今回は、DartとFlutterの入門ということで、基礎の基礎を解説していきます。それでは、一緒に学んでいきましょう！ この記事で分かること ✅Dartの基礎✅Flutterの基礎 目次 はじめに DartとFlutterの概要 Dart言語入門 Dart言語の特徴 Dartの基本的な文法 変…
今回は、「Flutterを最近始めたよ！」という方や「Flutterとはそもそも何？」という方に向けて概要を簡潔にまとめてみました。これを読めば明日からFlutterについて語れます。笑 この記事で分かること ✅Flutterの概要 目次 はじめに：Flutterとは Flutterの…
今回は、Flutterで「go_router」というライブラリを用いた画面遷移を実装するサンプルです。 Flutterでの画面遷移については以前も記事にしたことがありますが、その時はFlutter標準の「Navigator」を用いた方法について解説しました。 今回の記事では、Navi…
今回はFirestoreの作成手順とFlutterアプリからのデータ操作方法を見ていきます。 はじめに Cloud Firestoreの作成手順 Flutterアプリからのデータ操作方法 データ操作用に作成したUserクラス メソッド使用例（サンプル） おわりに はじめに 以下を前提にし…
今回はタイトルの通り、Flutter×Firestore×Algoliaで全文検索を実装するサンプルです。 個人開発中のアプリで「全文検索（ここではSQLでいうLike句とほぼ同義）」を実装する必要があったため、今回はその備忘録も兼ねて実装手順を紹介しようと思います。 は…
こんにちは。今回は個人開発アプリの紹介記事となります。ぜひダウンロードして使ってみてください！ 開発したアプリ 開発環境 開発期間 開発の経緯 アプリの紹介 概要 機能 苦労したこと おわりに 開発したアプリ アプリ名：【レシート保存＆収支管理「レシ…
今回は、アプリで処理を待つ間に表示されるローディングのあのぐるぐるを実装するサンプルです。関数を作ってあるのでメソッドをコピペして呼び出してもらえればすぐに実装できます！ この記事で分かること ✅ローディングのぐるぐるの実装方法 目次 サンプル…
今回は画面の下部にあるナビゲーションバーの実装方法サンプルです。 この記事で分かること ✅BottomNavigationBarの実装方法✅BottomNavigationBarの主なプロパティについて 目次 サンプル画面 サンプルコード 解説＆実装手順 ①ナビゲーションバーがタップさ…
今回はTextFieldに入力した値を取得しボタン押下で画面に表示する、という動きのサンプルとなっています。ユーザーの入力値の受け取りやボタン押下で動きを持たせるなど、Flutterアプリ開発の基本のきの部分についての記事です。 この記事で分かること ✅Text…
今回は、Flutterアプリの状態管理で大事なStatelessWidgetとStatefulWidgetの違いと使い分け、加えてInheritedWidgetについてまとめます。 この記事で分かること ✅StatelessWidgetとStatefulWidgetって何？✅StatelessWidgetとStatefulWidgetの違いと使い分け…
今回はFlutterアプリ開発時に遭遇することのある「range out of order in character class[***]」というエラーについて原因と対処法を解説します。（***には英数字や記号等が入る） この記事で分かること ✅「range out of order in character class ～」が発…
今回はTextFieldに入力する文字を制限する方法についてです。いくつか例を用いて説明します。そのままコピペでOKです！ この記事で分かること ✅TextFieldに入力する値を制限する方法 目次 ①数字のみにしたい場合 ②英数字と記号のみにしたい場合 ③数字とハイ…
FlutterでWebアプリ開発のデバッグ実行時、開発機以外のデバイス（別のPCやタブレット、スマホなどの実機）で動かしたいときがあると思います。 そこで今回はLAN内の開発機以外のデバイスでデバッグ実行するためのAndroidStudioの設定と実行方法をまとめまし…
今回はFlutterアプリ開発時に遭遇することのある「A RenderFlex overflowed by * pixels on the bottom」または「BOTTOM OVERFLOWED BY * PIXELS」（どちらも同じ意味）というエラーについて原因と対処法を解説します。（*には数字が入る） この記事で分かる…
今回はFlutterのSingleChildScrollViewウィジェットについてです。 この記事で分かること ✅「SingleChildScrollView」ウィジェットって何？✅「SingleChildScrollView」ウィジェットの基本的な使い方✅「SingleChildScrollView」ウィジェットのプロパティとメ…
今回はListViewなどでよく使われる「ListTile」ウィジェットについてです。 この記事で分かること ✅「ListTile」ウィジェットって何？✅「ListTile」ウィジェットの基本的な使い方✅「ListTile」ウィジェットの主なプロパティとメソッドについて 目次 「ListTi…
今回はFlutterでよく使う「ListView」ウィジェットについてです。 この記事で分かること ✅「ListView」ウィジェットって何？✅「ListView」ウィジェットの基本的な使い方✅「ListView」ウィジェットの主なプロパティとメソッドについて 目次 「ListView」ウィ…
今回はFlutterでよく使う「Text」ウィジェットについてです。 この記事で分かること ✅「Text」ウィジェットって何？✅「Text」ウィジェットの基本的な使い方✅「Text」ウィジェットの主なプロパティとメソッドについて 目次 「Text」ウィジェットとは 具体例 …
こんにちは！文系プログラマーいおです！ 今回はFlutterアプリのWidgetについてまとめました。 Widgetとは？ サンプル サンプルコード（main.dart） サンプルコードのWidget構成 おわりに Widgetとは？ Flutterアプリの画面UIを構築するための部品のことを「…
こんにちは！文系プログラマーいおです！ 「基礎から学ぶFlutter」という本を読んでみたのですが、この本はFlutter初心者がFlutterの全体像をつかむためにとても最適な良書だと感じたので共有しておこうと思います。 読んだ本 こんな人におすすめ！ ✅Flutter…
こんにちは！文系プログラマーいおです！ 今回はFlutterアプリでカウントダウンタイマーを作る方法を具体的なコード例を用いてわかりやすく解説します。 サンプル画面 サンプルコード全文 main.dart 実装手順 ①カウントダウン用の変数を定義 ②Timer.periodic…
こんにちは！文系プログラマーいおです！ 今回はWindowsでFlutterとFirebaseを使ってアプリを開発する環境を構築するための手順をまとめようと思います。 はじめに ①Firebaseにプロジェクトを追加する 1.Firabaseのサイトにログイン 2.プロジェクトの命名 3.…
こんにちは！文系プログラマーいおです！ 今回はFlutterでQRコードを生成して表示するサンプルです。 サンプル画面 サンプルコード全文 実装手順 ①qr_flutterのインストール ②qr_flutterのインポート ③QRコード化するURLを格納した変数を定義 ④QrImage()でQR…
こんにちは！文系プログラマーいおです！ 今回はFlutterで日付をドラムロールで選択し、画面に表示しているテキストの値を、選択した日付に変更する方法をまとめました。 サンプル画面 サンプルコード全文 実装手順 ①DatetimePickerのインストール ②Datetime…
こんにちは！文系プログラマーいおです！ Flutterアプリをいざ作ろう！！と思ったときにまずぶつかる疑問、 「MaterialApp」「Scaffold」て何者？？ ということで今回は「MaterialApp」「Scaffold」の役割と使い方について、Flutterプロジェクトを立ち上げた…
こんにちは！文系プログラマーのいおです！ 今回はFlutterのアプリ内に画像を表示させる方法についてわかりやすく記事にまとめてみようと思います。 画像表示手順 ①画像ファイルを置くためのフォルダ作成 ②①に画像ファイルを置く ③pubspec.yamlの編集 pubspe…
こんにちは！文系プログラマーのいおです！ 今回はFlutterでWindowsデスクトップアプリを作るために必要な環境構築作業についての記事を書こうと思います。 はじめに Visual Studioで「C++によるデスクトップ開発」のインストール 1. Visual Studioの導入 2.…
こんにちは！文系プログラマーのいおです！ 今回はFlutterのsetState()メソッドについて、Flutterプロジェクトを立ち上げたときのデフォルトのサンプルプログラムを用いて説明する記事を書こうと思います。 はじめに 値を変化させるsetState() setState()に…
こんにちは！文系プログラマーのいおです！ 今回はFlutterでの画面遷移時に、前画面から次の画面へデータを受け渡す方法について具体的なプログラム例を用いて解説します。 はじめに データの渡し方 コンストラクタとは 具体的なプログラム例 First Page 実…
こんにちは！文系プログラマーのいおです！ Flutterで画面遷移のプログラムを組んでいて、 エミュレーターでテスト中、 「戻る」ボタンを押下。 あれ、、、、 なんか真っ黒な画面が出て画面が動かなくなった…なにこのブラックアウト… このような状態になった…
