【Flutter】【エラー対応】「range out of order in character class[***]」が発生する原因と対処法

今回は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…

【Flutter】【コピペでOK！】TextFieldに入力する文字を「数字のみ」や「英数字と記号のみ」のように制限する方法（サンプルつき）

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

【FlutterWeb】【AndroidStudio】LAN内の別デバイスでデバッグするための設定と実行方法について

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

【Flutter】【エラー対応】「A RenderFlex overflowed by pixels on the bottom」または「BOTTOM OVERFLOWED BY PIXELS」が発生する原因と対処法

今回は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】【1分で分かる】SingleChildScrollViewとは？基本の使い方【サンプルコード付き】

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

【Flutter】【1分で分かる】ListTileの基本の使い方を解説【サンプルコード付き】

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

【Flutter】【1分で分かる】ListViewウィジェットの基本的な使い方【サンプル】

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

【Flutter】【1分で分かる】Textウィジェットの基本的な使い方【サンプル】

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

【Flutter初心者用】Widget（ウィジェット）とは何か？

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

【レビュー】【Flutter入門書】「基礎から学ぶFlutter」本を読んでみました【おすすめ】

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

【Flutter初心者用】【コピペでOK！】カウントダウンタイマーを作ってみる

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