Flutter

Google Mapsでは対象の場所や施設をわかりやすく表示するためにマーカーが使われます。 単純なマーカーの表示方法は以前の記事で紹介しました。 flutterdev.hatenablog.com 今回は少し応用で、「画面に表示されている領域のマーカーだけ」を表示する方法です。 なぜ必要なのか？ イメージしやすいように、実際のアプリを例に説明します。 わたしが開発している「ダムめぐりガイド ビーバー」では、全国にあるダムがマップにマーカーとして表示されます。 大量のマーカーを表示したい場合の話 単純に「ダムのデータ」を「マーカー」に変換して追加すれば良いようにも思えますが、ダムは全国に1,0…

完全に小ネタ 以下の記事を参考にしてFlutterでログイン機能を実装した。 FlutterでFirebase Authenticationを使ったGoogleアカウントログインを実装してみた ただ、「ログインさせる方法」は分かったけど、「既にログインできているかどうかを確認する方法」はどうなんだろう？ となった。 結論 import 'package:firebase_auth/firebase_auth.dart'; final FirebaseAuth _auth = FirebaseAuth.instance; FirebaseUser user = await _auth.curre…

こんにちは、とりかつです。 最近、intel macからm1 macに乗り換えました！ my new gear... pic.twitter.com/Fkb6WYRlrC— Torikatsu (@torikatsu923) 2021年2月26日 乗り換えに当たって環境構築をしていたのですが、せっかくなので環境構築の手順をドキュメント代わりに記事にまとめてみようと思います。 環境構築の方針は以下の通りです。 極力apple cilicon nativeで動くものを選択する flutterの開発ができるようになる ポータビリティを高めるため、ミニマルな構成にすることを心がける 今回の記事で、全て…

flutter アプリで上記のエラーが出て、エミュレータが立ち上がらない。 >実機接続では普通にビルドできる。 結局下記のstackoverflow全能神が解決してくれた。stackoverflow.com Open Android Studio Tools -> AVD Manager Virtual Device -> Actions Click On Wipe data おそらくエミュレータにキャシュデータやらが蓄積しすぎていた様子。 上記を実行すると、VScodeでもエミュレータが立ち上がるようになった。 udacityとかcodelabとかいっぱいやってたからね。 wipeしたあとは…

実装した物 github.com 方針 閉じたいWidgetに画面遷移(またはモーダル表示)する スクロール位置に応じてそのWidgetを閉じる 画面遷移 閉じたいWidget(ソースコード: SliverItemView)を表示する方法としては、以下の3パターンを検討。 Navigator.push(context, MaterialPageRoute(fullscreenDialog: true, builder: ...)でページ下部から新しいページが出てくるようなアニメーションで画面遷移 showModalBottomSheetでモーダル表示（何故か上部のSafeAreaが無視されるの…

さて、第一回では、通例のインストールを行いました。最後に動作確認をしましたが、そのアプリケーションをちょこちょこ変更しながら、Flutter に用意されている Widget を試してみましょう。 1. サンプルプログラムの概観 動作確認用に作成した flutter_app を開きましょう。第一回から続けて読んでいる方は、開いている状態でしょう。 恐らく、目の前には main.dart ファイルのプログラムが見えているはずです。見えていない方は、ウィンドウ左側のツリーメニューから、"Project" - "flutter_app" - "lib" - "main.dart" と開いていくと、見つ…

こんにちは、エンジニアの @muttsu_623 です。 最近、開発を頑張っている自分へのご褒美として念願だった『左右分離型キーボード』のMISTEL『Barocco MD770 静音赤軸』を購入しました。 Mistel BAROCCO MD770 RGB メカニカルキーボード 英語配列 85キー 左右分離型 CHERRY MX RGB 静音赤軸 ブラック MD770-PUSPDBBT1発売日: 2020/01/30メディア: Personal Computers 購入してからまだ2週間くらいなのでまだ効果を実感できているわけではありませんが、肩が開かれた状態で姿勢良く開発を行うことができるた…

どうも、ぶりっちゅです！ 早くも週末、土曜日です。 今日もアプリアイコンの製作にいそしむ。 昨日までの最新版がこちら。 右下が角丸じゃないのが気になるので修正。 枠線はないほうがいいような気がしたので、枠線なしにする。 本が細すぎるのが気になるので、ちょっと太くしてみる。 これでいいかな！？と思い、アプリに反映。インストールしてみると、 ちっちゃい！！！！ 文字が読めないのは、まあ、飾りなのでよいのですが、猫もちっちゃい。 老眼の私にはもう、なんだか識別不能。。。 やっぱり、Androidの「Adaptive Icon」でもわかりやすいアイコンにしたいな。。 と全面的に見直し。 ボールペンで下…

わんぱく Flutter！ 第一回 Flutter をインストールするよっ！ 最近話題の Flutter、もう使ってますか？ 私もこの程、利用を開始致しました。丁度よいので、開発履歴をここにまとめて行こうと思います。第１回は ー そう、インストールからです。 Flutter は、Android アプリケーションでも iOS アプリケーションでも Web アプリケーションでも開発することができますが、今回は Android 用アプリケーションを開発して行きます。 1. 準備 Android 用の開発環境として、Android Studio をインストールしておきます。 Android Studi…

Flutterで地図のあるアプリを作るとき、最初に候補にあがるのがGoogle Mapsだと思います。 今回はFlutterでGoogleMapsを表示してみます。 google_maps_flutterパッケージを利用して、API Keyの取得〜マップの表示の実装までをまとめます。 FlutterでGoogle Mapsを表示する流れ パッケージの入手 pub.dev まずはパッケージを手に入れましょう。pubspec.yamlに以下を追記します。 google_maps_flutter: 0.5.33 API Keyの取得 Google Mapsの利用にはAPI Keyが必要です。 入手す…

どうも、ぶりっちゅです！ 昨年末から少しずつ勉強していたFlutter。 時間を見つけてちょこちょこ勉強しながら、こつこつ作ったFlutter初アプリ『ぶっくるん』をGoogle Playに公開しました。 まあまあありきたりな読書管理アプリなのですが、自分好みのものができました。 図書館で古いものも含めていろいろ借りるのですが、読んだ本でも忘れてしまいがちで、『これ、よんだっけな・・？』ということがたまにあります。 実際、同じ本借りちゃった。。。みたいなこともありましたし。 なので、読んだ本の管理は必要なのです。あと、「読んだ積み重ね」を可視化できるのもよいですね。「こんだけ読んだ～」みたいな…

Flutterでandroidが上がらなかったのでメモ $ fvm flutter doctor Downloading android-arm-profile/darwin-x64 tools... 2.0s Downloading android-arm-release/darwin-x64 tools... 1.1s Downloading android-arm64-profile/darwin-x64 tools... 1.6s Downloading android-arm64-release/darwin-x64 tools... 1.3s Downloading android…

Google Mapsでは対象の場所や施設をわかりやすく表示するためにマーカーが使われます。 単純なマーカーの表示方法は以前の記事で紹介しました。 flutterdev.hatenablog.com 今回は少し応用で、「画面に表示されている領域のマーカーだけ」を表示する方法です。 なぜ必要なのか？ イメージしやすいように、実際のアプリを例に説明します。 わたしが開発している「ダムめぐりガイド ビーバー」では、全国にあるダムがマップにマーカーとして表示されます。 大量のマーカーを表示したい場合の話 単純に「ダムのデータ」を「マーカー」に変換して追加すれば良いようにも思えますが、ダムは全国に1,0…

完全に小ネタ 以下の記事を参考にしてFlutterでログイン機能を実装した。 FlutterでFirebase Authenticationを使ったGoogleアカウントログインを実装してみた ただ、「ログインさせる方法」は分かったけど、「既にログインできているかどうかを確認する方法」はどうなんだろう？ となった。 結論 import 'package:firebase_auth/firebase_auth.dart'; final FirebaseAuth _auth = FirebaseAuth.instance; FirebaseUser user = await _auth.curre…

モチベーション Flutterアプリ作成のチュートリアル、作成をするにあたって調査していると、Flutterアプリの状態管理にはProvider及びその後継であるRiverpodを使用するのがセオリーだという記事を見た。 どこでも手放しに称賛されているので、とりあえず導入、使用方法を理解しておくべきだと判断。 そのうえで、メリデメについて自分なりに考察したい。 導入 dependencies: flutter_riverpod: flutter pub get 使用方法 例えばAmplifyのInitializeをFutreProviderに、状態をStateProviderに持たせようとする…

2021年2月のサーバーレス関連まとめです。こちらのイベントで取り上げる内容です。 serverless-newworld.connpass.com 2021年2月のリリース 1月に引き続き2月もあまりアップデートはなかったです。逆にその分Lambdaなんかはre:Inventでお腹いっぱいになった機能追加にキャッチアップするいいタイミングかもですね。 タイトルだけで内容がわかるようなものは特にコメントしていません。 AWS Lambda が Node.js 14 のサポートを開始 Top Level AwaitってことはNode.jsのv14.3以降ってことですね、きっと でもLambdaで…

昨日から前にUdemyで購入したFlutterの講座を英語のシャドウィングの教材にしています。 すごくちょうど良いスムーズな声の持ち主で、シャドウィングに最高です。 しかも講座自体が9時間もあるので、たっぷり練習できます🤩 先生のYouTubeチャンネルもありました。

Riverpodの使っているFlutterのアプリケーションで，StateNotifierで提供しているオブジェクトをwatchし，それをダイアログに渡して表示させたり，stateを変更したい場合，ダイアログそのものでwatchする必要がありそうです(引数で渡すだけではNG)． Dialog内でもStateNotifierから提供させるオブジェクトをwatchしてあげないと，stateの変更がUIに反映されませんでした． もちろん，ダイアログも ConsumerWidgetを継承させてあげる必要があります． class Dialog extends ConsumerWidget { @over…

ハロートナミです。 n年ぶりに合格通知書見ました。 合格したので、2021年春より放送大学へ入学し、学生としてやっていきます。 放送大学とは www.ouj.ac.jp 物凄く簡単に言うと、必要資格(高卒等)があれば誰でも入れる大学です。 特殊な学校ではありますが、｢文部科学省に設置認可された正規の大学｣であり、正真正銘の(?)大学です。 入学方法は入学金と在籍期間によっていくつか種類があるのですが、最も長期間在籍出来る全科履修生として入学予定です。 よって、春からトナミは社会人学生で、飽きなければこの後10年間学生です。対戦よろしくお願い致します。 なんで入学したか 勉強したかったからです。…

モチベーション 引き続きFlutterAmplifyのチュートリアルやる Amplifyサイトのチュートリアル なんかAWSのチュートリアルと書いていることががっつり違う。 書いてあることの正しさからして、Amplifyサイトのチュートリアルのほうがよさそう 役割によるファイル分割など、Flutterアプリ自体の作り方についてはAWSのチュートリアルのほうが参考になる とはいえ、それはそれで別で学べばいいところなので、基本的にAmplifyサイトのチュートリアルを参照するべき アプリ雛形作成 私はAndroidStudioを使用しているため、ウィザードで作成した。 Amplifyインストール …

blog.dr1009.com できないできない言っていたweb対応ができてしまいました。 TSのtypesを使えばDartの型定義できそう……でも手でやるの全然わからん……と思ってたら js_facade_gen というツールが用意されていることに気づき、型定義の方法がわかったあたりから加速した印象。 github.com npmみると5年前のpublishになっているけれど、GitHubだともうちょっと進んでいるようなので、もうちょっとメンテナンスがされないかな〜という感じ。 こう言った情報をつぎはぎしてなんとかやっていくしかないんでしょうね。 www.npmjs.com 個人で書いている…

状況 Next.js触ってみたりとか、いろいろ迷走している状況だが、やっぱりモバイルアプリ作りたいのもあってFlutterを見てみている。 モチベーション クロスプラットフォーム素敵 何なら将来的にはWebも対応するらしい Amplify用のSDKが新しく出たって！（AWSに慣れてしまってGCPいじれないマン） Googleのブラウザで動作するスクリプト言語への執念が見えるのがなんとなく素敵。 チュートリアル Amplify公式のチュートリアルと、AWSが提供しているチュートリアルがある。現在私がやってみているのはAWS公式のほう。 https://aws.amazon.com/jp/gett…