#Flutter の記事一覧

【学生無料】GitHub Copilotを使用してコードをAIに書かせて生産性をあげよう！

Github Copilotの便利な機能と学生向け導入の注意点について簡単に紹介します。

【Flutter】GoRouterのStatefulShellRouteで気をつけること。。。

StatefulShellRouteについての注意点を解説

【Flutter】プログラミング初心者のFlutter勉強法

私はFlutterを勉強し始めて約半年ほどで、コンピュータサイエンスのバックグラウンドもないので、当初はFlutterの勉強にとても悩みました。なので今回は、初心者に役に立つ学習リソースをご紹介します。

【Flutter】permission_handlerで、許可していてもPermissionStatusがdeniedになってしまう時の対処方法(iOS)

【Flutter】WebでGoogle認証しようとしたらエラーが出た

Flutter webででGoogle認証しようとしたところ途中でエラーが出て詰まってしまったので、その時に行った対処法を紹介します。

Flutterアプリで使用するThemeDataをMaterial Theme Builderで作ろう

Material Theme Builderを使用してThemeDataを作成する手順を紹介

【Flutter】FastlaneとFirebase App Distributionでテストアプリ配布を自動化する

FastlaneとFirebase App Distributionでテストアプリ配布を自動化する方法をご紹介します。

Flutterでプロジェクトを作成するときにコピペで使えるパッケージ追加コマンド

可茂IT塾のFlutterプロジェクト新規作成時によく使うパッケージをコピペで追加するコマンドを共有します

【Flutter】flutter_datetime_picker_plus を使って時間フィールドをなくした分:秒の時間ピッカーを作成しよう

flutter_datetime_picker_plusというパッケージを使って、時・分・秒が選択できるピッカーから、分・秒だけを選択できるピッカーにする方法を紹介します。

【Flutter】Flutter で画像 URL をファイル形式に変換する

Flutterで画像URLをファイル形式に変換する方法を紹介します。

【flutter】カーソル選択したWidgetの情報を見る方法

flutter開発をする際、UIが崩れてしまったけどどのWidgetが原因かわからない。。と思ったことはありませんか？今回はそんな時に使える"Widget Inspector"`を紹介します。

【Flutter】flutter webでmark downを表示する

flutter webでmark downファイルの表示方法を紹介します

【Flutter】ClipPathとCustomClipperを使用して既存のWidgetを切り抜く方法

ClipPathとCustomClipperを使用して既存のWidgetを切り抜く方法についてコードを用いてわかりやすく解説します。

【Flutter】ValueKeyとGlobalKeyの活用方法

ValueKeyとGlobalKeyを用いて、ウィジェットを効率的に識別し管理する方法を説明します。

【Flutter】get_itを使ってお気に入り機能を作ってみた！

get_itパッケージの利用で簡単にお気に入り機能を作成していきます

【運用中のDBとうまく付き合うBFF開発】③ 複雑な条件分岐に宣言的プログラミングで立ち向かう

複雑な条件分岐を宣言的プログラミングで解決する開発の工夫と方法を解説します

【運用中のDBとうまく付き合うBFF開発】② passport-localを使った認証とハッシュソルトの実装

認証とハッシュソルトの実装を解説します

【運用中のDBとうまく付き合うBFF開発】① NestJSとPrismaで生SQLを使ってデータを取得する

生SQLを駆使してデータを取得するPrismaの活用方法を解説します

Flutter × Shaderでクリスマスイブを祝おう！

flutter_shadersというパッケージを使用し、Flutterで美しいShaderを表示する方法を紹介します。

Flutterで生体認証を実装する

Flutterで生体認証の実装方法について紹介します。生体認証をアプリに導入することで、認証が楽になることに加え、セキュリティーを強化したユーザー体験を提供できるようになります。

【Flutter】スクロールでFloatingActionButtonのアニメーションをつける！

アプリによくある右下のボタンの表示をアニメーションで変更していきます。

FlutterのtextScaleFactorが非推奨になっていた件について

アプリ内の文字サイズ設定に使用するtextScaleFactorが非推奨になっていた件について

【Flutter】重なり合いのUIの作り方

タイトル画像のような、ちょっとずつ重なりあった状態の作り方を共有します！

【Flutter】Riverpodのv2対応の公式ドキュメントでの気づきをまとめてみた

Flutterの状態管理パッケージであるRiverpodのv2対応のドキュメントが完成したようなので、一通り目を通して新たな気づきをまとめてみました。

【Flutter】APIKeyをenviedで隠す方法

flutterのプロジェクトでAPIを使うことがあると思います。ただ、APIはAPIKeyの機密性を保っていないと、第三者にAPIKeyを盗まれ、多額の支払いなどの危険性があります。その為、今回はenviedを使用した、APIKeyを隠す方法を紹介していきます。

0からFlutter:文系エンジニアの挑戦

文系大学　→ 新卒SES入社　→ Flutterを使う自社開発企業に内定をもらう　Flutterエンジニアとして内定をいただくまでの道のりを紹介します。

Twitter（X）のタイムラインをFlutterのアプリに埋め込んでみた

Twitter（X）のタイムラインをFlutterのアプリに埋めこむ実装について解説します

【Flutter/Dart】SharedPreferencesの端末内保存データをAndroidStudioで確認する方法

SharedPreferencesのストレージ内に何が保存されているかを確認したいときみなさんはどうしてますか？私は以前までは、ログに出力させたりして確認していました。しかし、そんな面倒なことをしなくても、データを簡単に確認する方法がありましたのでご紹介します。

【Flutter】go_routerを使って簡単な画面遷移を実装する

go_routerを使って簡単な画面遷移を実装する方法を解説します。

【Flutter】Dio × Riverpod で不要になった通信処理をキャンセルする方法

DioとRiverpodを組み合わせて不要になった通信処理をキャンセルする方法についてコードを用いて分かりやすく解説します。

【Flutter】AppBarをスケスケに！？

flutterのappbarを透過させてみました

Retrofit使ってFlutterのAPI通信を実装する

Retrofit使ってFlutterのAPI通信を実装する方法を解説します。

Flutter webでFileをImageウィジェットとして表示する

Flutter WebではImage.file()が使えないため、別の方法で実装します！

【flutter】 Stateful,riverpod,flutter_hooksの３種類のDropdownButtonを比較する

flutterの状態管理にはStatefulWidgetを使う方法、riverpodを使う方法、flutter_hooksを使う方法の3つが主流かと思います。今回は3つの実装方法を比較し、どの実装方法が良いかを見ていきたいと思います。

【Flutter】評価バー(rating_bar)を実装する

Flutterで簡単に評価バーを実装する方法をご紹介します。

【Flutter】OrientationBuilderを使用して画面の向きにUIを対応させる

OrientationBuilderを使用して画面の向きにUIを対応させる方法を解説します。

【Flutter】Google_ML_Kitで遊んでみた

Google_ML_Kitを用いた文字認識機能&GCPの文字翻訳を実装する記事です

PageViewを使ってFlutterで画像を複数の画面上で共通化する方法

PageViewを使って、Flutterで違和感なく背景画像を固定したまま画面遷移する方法の記事です。

FigmaでFlutter向きのアプリデザインを簡単に作成する方法

個人開発する時のデザイン案としてFigmaで作成することがあると思います。Flutterで開発しやすいデザインを簡単に作成できる方法を紹介したいと思います。

FlutterでDEBUGタグを削除する

Flutterでシミュレータや実機デバイスでビルドする時に画面右上にDEBUGタグがあると思います。今回の記事では、そのタグの削除の仕方について紹介します。

【経験談】可茂IT塾出身のFlutterエンジニアとしてフリーランスで３年間働いてみた

フリーランスのFlutterエンジニアとして働き始めて、もうすぐで3年が経ちます。その経験談を残してみようかなと思います。

【Flutter】RSSでブログのまとめ機能を作ろう

フィード（RSS,ATOM）を使用してアプリ内にブログのまとめ機能をつくってみましょう

Flutterでレビュー機能を実装

ストアにリリースしたアプリのレビューをアプリ内から行える実装を紹介します。アプリにレビュー機能を実装することで、今後の開発の改善に活かしていきましょう。

新卒入社して３ヶ月が経ちました

Flutterエンジニアとして新卒入社して３ヶ月経ちましたので、色々語ります！

【ESP32】 ESP32の位置情報をFlutterで反映させてみた

ESP32で取得できる値をFlutterで反映する方法を解説します。

【Flutter】APIを叩いて猫の画像を表示させてみる

Flutterで、公開されているAPIを叩いて猫の画像を取得して表示させてみます。

【Google Places API】google mapの写真をFlutterで表示させてみた

google mapの特定の位置情報を取得することができる便利なAPIです。個人開発で使えそうかと思ったので試験程度で試してみました。

flutter build ipa コマンドでビルドをApple Store Connectへアップロードする方法

flutter build ipaコマンドを使って、Apple Store Connectへビルドをアップロードする方法をご紹介します。

Flutter webでネットワーク画像が表示されないエラーの対処法

Flutter webでThe following ImageCodecException was thrown resolving an image codec: のエラーが出た時の対処法です

Flutter webにFirebase v9を入れようとしたら方法がめっちゃ変わってた

Flutter webにFirebase v9を入れたら全然Webアプリが起動してくれなくて、実は導入方法がめちゃくちゃ変わってました。

【Flutter】折りたたみのUIを実現する

Flutterで折りたたみのUIを作れるパッケージを見つけたのでシェアします。

fvmとdirenvでFlutterのバージョン管理をする

複数プロジェクトでFlutterバージョンがそれぞれ異なることがあります。その際におすすめなfvmとdirenvでのバージョン管理方法を解説します。

可茂IT塾での長期インターンを経てエンジニア就活を終えた話

就活浪人をした一浪中堅私立文系大生の私が可茂IT塾での長期インターンを経てエンジニアとして内定をいただきました。今回は可茂IT塾の長期インターンに応募するか迷っている方、エンジニアになろうと考えている方などに向けて記事を書いていきます。

Flutterで状態管理などでよく使うパッケージについて調べてみた

普段何気なく使っているパッケージについてまとめました。hooksやriverpod、StateNotifier、Consumer等、状態管理をするにあたってよく使われているパッケージについて紹介しているので、新しい発見や復習ができる内容になっています。

【検証】Flutterでenhanced enumsの使い方を試してみる

Dart2.17で拡張されたenum(enhanced enums)の機能を解説します。Flutterでのアプリ開発中でのenumの使い方の幅が広がる内容です。

【Flutter/Dart】メソッドの引数の書き方まとめ

名前付き引数、名前なし引数、必須引数、デフォルト引数など色々あるので整理してまとめました。

【Flutter】FlutterGenを使う

flutterで画像やフォントのパスをタイプセーフに指定できるようになるおすすめのパッケージを紹介します。

【Flutter】Widgetを強調する

BackdropFilterを使ってWidgetを強調してみましょう！

【Flutter】DeviceOrientation以外でアプリの設定を変更して画面の向きを固定する方法

Flutter製アプリの画面の向きを固定する方法を解説します。

FlutterとAlgoliaを使って全文検索をしてみた

FlutterでAlgoliaを用いた全文検索を紹介します。チャットアプリなどの検索機能の実装に役立ちます。

【Flutter】簡単に画像のプレビュー画面を作りたい

ほぼコピペでできる写真のプレビュー画面の作り方をお教えします！！

Flutterでメールを送る方法[コピペで3分！]

Flutterでflutter_email_senderを用いたメール送信機能の実装方法をご紹介します。お問い合わせ機能の実装時などに役立ちます。

【Flutter】 ListView の最後にリストを追加して、別の Widget を表示させる

ListView はデータの数だけ同じ Widget を返す使い方が多いですが、条件に合わせて、リストを追加して、別の Widget を返す実装を紹介します。

【Flutter】スクロール可能なリストにScrollbarを表示させる

ListViewやSingleChildScrollViewで作ったリストの横にスクロール用のバーを表示させたいあなたのために書きました。

【Flutter】コピペで使えるFloatingActionButtonのアニメーション

パッケージなしで簡単に実装できる！コピペで使える万能なFloatingActionButtonのアニメーションを紹介します。

introduction_screenを使って今あるFlutterアプリをリッチにしよう！

今あるアプリをもっとリッチなものにしたい時に役立つのがintroduction_screenというライブラリーです！このライブラリーはアプリ内で簡単にアプリを紹介するページを作成することができます。この記事では、そのやり方について紹介していきます。

【Flutter】ShaderMaskを使ってアイコンにグラデーションをつける

Flutterのグラデーションについて解説します

Flutterでテキスト検索機能を実装する方法

Flutterでテキスト検索機能する方法をご紹介します。完全一致、部分一致、その他の検索実装のコツが学べます。

【Firebase】 カスタム認証を使ってユーザー登録をする

LINEログインなど、Firebase側が用意していない認証方法を使ってユーザー登録をする際に、カスタム認証を通すことで、メールログインなどと同じようにFirebaseでユーザー管理ができるようになります。

【Flutter】StackでWidgetを重ねてUIを作る

Stackを使えば、Widgetを重ねてUIを作ることができます。

MacでFlutterの環境構築をする手順

MacでFlutterの環境構築をする手順を解説します。

(初学者向け)riverpodで作るContainerテスターアプリ①

riverpodを使って簡単なアプリを作ってみます。StatefulWidgetと比べた時のriverpodの使い方を解説しているので、ぜひご覧ください！

【Flutter】マテリアルデザインのアイコンに飽きた方へ

Flutterにはマテリアルデザインのアイコンがありますが「なんか飽きたな」「flutter感をなくしたい」「主張が強すぎる」と思われた方にとっておきのパッケージをご紹介します。

マテリアルデザインのままiOSぽさを出す

CupertinoWidgetを使わずiOSぽさを出してみます。

【Flutter】 Navigatorメソッドの違いを知る

FlutterのNavigatorは画面遷移をするためのWidgetクラスになります。各メソッドの違いと挙動をまとめてみました。

flutterのアプリでurl_launcherを使ってURLをWebブラウザで表示する

flutterには、アプリ内でUIや処理を記述しなくてもブラウザを起動してWebサイトを立ち上げてくれるurl_launcherという便利なライブラリーがあります。今回の記事ではそのurl_launcherの実装の仕方について説明していきます。

Flutterでのextension(拡張関数)の便利な使い方

Flutterでのextension(拡張関数)の使い方を紹介します。extensionを使いこなすことができれば、かなりコードもスッキリします。

【Flutter】 ダイアログを出す方法

Flutterでダイアログを出すにはshowDialogメソッド、AlertDialogウィジェット、SimpleDialogウィジェットを使います。

Flutterのアニメーションをほんの少しだけ試してみる①

アニメーションってあんまり触らないですよね・・・。今回はアニメーションを簡単に表現できる、AnimatedContainerを使ってみたいと思います！

【Flutter】MapをListに変換して、ListViewで表示する

MapをListに変換するのは初心者には必須のスキルです

知っておくべきTextFieldのfocusの扱い方3選【Flutter】

FlutterのTextFieldのfocusを使いこなせるようになるために、知っておくべき機能を３つご紹介します。

カウンターアプリから新しいアプリを作る(初心者向け)続き

初心者はカウンターアプリから新しいアプリを作ることで、Flutterの勉強になります。

カウンターアプリから新しいアプリを作る(初心者向け)

初心者はカウンターアプリから新しいアプリを作ることで、Flutterの勉強になります。

FlutterのFirebaseAnalyticsでScreenViewイベントにカスタムパラメータを渡す方法

FlutterのFirebaseAnalyticsでScreenViewイベントにカスタムパラメータを渡す方法を解説します。

【Flutter】市松模様を作る方法

Flutterで市松模様を作ってみたのでポイントを解説します

【Flutter】 オブジェクトを含んだFreezedクラスをJSONに変換する

オブジェクトを含んだFreezedクラスをJSONに変換するときに遭遇したエラーの解決策をブログにしました。

Flutterで正規表現を用いたemailのvalidationを実装

emailのvalidationを題材に、Flutterで使用する正規表現について解説します。

【Flutter】SVG画像が黒くなってしまうことの対処法

FlutterでSVG画像を使った時に黒潰れが起きてしまった時の原因と対処法をお伝えします

FlutterのContainerで角丸のUIを実装する方法

FlutterでのContainerで角丸を実装する方法をサクッと解説します。

InheritedWidgeを使って、カウンターアプリを作ってみた

Flutterの状態管理を理解するためにinheritedWidgetを使ってカウンターアプリを作り直してみました。

最初のスマホアプリ開発で何を作れば良いかわからない人のために

プログラミングを始めてつまずきがちなのは、最初に何を作れば良いかわからない問題だと思います。今回はスマホアプリで最初のアプリを作る参考になる情報をご紹介します。

flutter_native_splashを使ってsplashページを実装する

アプリを立ち上げるときの待機画面としてsplashページというものがあります。今回の記事ではそのsplashページを簡単に実装することができるflutter_native_splashの実装の仕方について説明していきます。

Flutterでのtooltipの使い方

Flutterでのtooltipの使い方を説明します。

【Flutter】 Spacerウィジェットの紹介

FlutterでRowやColumnを使ってUIを作る際にSpacerを使えば複雑なレイアウトも簡単に作ることができます。

【Flutter】RiverpodでProviderScopeのoverrideをどう使うか

Riverpodの不便な部分を解消する、ProviderScopeのoverrideをどう使うか解説します。

【5分】FlutterでQRコードの生成・読み取りする方法まとめ

Flutterでqr_flutterを用いたQRコードの生成と、qr_code_scannerを用いたQRコードの読み取り方法を紹介します。

FlutterToastの使い方

何かの処理が正常に働いた時やエラーが生じた時にユーザーにメッセージで伝える方法の一つに、fluttertoastを利用する方法があります。今回は、fluttertoastの利用方法についてご紹介していきます。

Flutter Drawerの使い方

ページ遷移のためのナビゲーションを表示させるには、タブやドロワーなどの選択肢があります。この記事ではFlutterでアプリを作る際によく使用する、ドロワーによる画面の切り替え方法を解説します。

可茂IT塾ではFlutterインターンを募集しています！

可茂IT塾ではFlutterインターンを募集しています！可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

【Flutter】easy_localizationを使ったシンプルな言語変換アプリの作成方法

Flutter製の言語変換アプリの作り方を解説します。easy_localizationを用いて、ボタン一つで言語変換できるアプリです。

【Flutter】 タブで画面を切り替える方法

Flutterでアプリを作る際によく使用する、タブによる画面の切り替え方法を解説します。画面をタブで整理するなら、DefaultTabController、TabBar、TabBarViewを使うのが最適です。

Flutter WebのhistoryモードのNavigationとRoutingをFirebase Hostingで行う方法

Flutter WebのhistoryモードのNavigationとRoutingをFirebase Hostingで行い、Flutter Webでも通常のWebページと同じようなURLでRoutingできるようになる方法を解説します。

FlutterのCircularProgressIndicatorの使い方まとめ

Flutterでよく使用するCircularProgressIndicatorの色やアニメーションの変え方を解説します。

Flutterでconfettiパッケージを使って紙吹雪を出す方法

ゲームをクリアした時、タスクを完了した時、目標を達成した時など、紙吹雪を出しておめでとうの気持ちを伝えたい時ってありますよね。

超初心者向け、Flutterアプリ開発体験講座を開催しました！

可茂IT塾が教えるオンラインIT講座。「全くの初心者でも3時間でFlutterアプリが作れる」講座です。どんな人が、どのように初めてのアプリを完成させていくのか。ブログで解説しました。

東和製作所のインターンでAndroidアプリを開発しました!

2020年12月に美濃加茂市にある東和製作所の2週間のインターンに参加させて頂きました。インターンはタブレット＋バーコードリーダーをAndroidアプリで完結させるという内容でした。

Flutter ドラッグ＆ドロップできるWidgetの作成

Flutter Widgetをドラッグ＆ドロップしてデータのやり取りをする方法を紹介します。

FlutterのSnackBarを表示する

SnackBarの記事は世の中にたくさんあるのですが、詳しく書かれすぎて逆にわかりにくいと感じていました。なので最低限の使い方だけをシンプルにまとめました。

SharedPreferencesにnullが入った配列を保存しようとするとエラーになる

配列を使って値を管理していたのですが、SharedPreferencesに値を保存するところでアプリが落ちてしまいました。解決策を共有します。誰かのお役にたちますよう、、、

Flutter で reactive_forms を使った場合のバリデーション方法

Flutter のアプリ開発中に学んだことを共有する回です。reactive_forms というパッケージを使って、メールアドレスやパスワードの入力チェックをより簡単に行う方法を紹介します。