Flutter notes

Flutterに関するメモ書き

FlutterでBox2D.dartを使うサンプル

というものを昔作ったので、紹介します。 box2d_flame, spritewidget, flutter_shapeshttps://t.co/N511RRTmwW pic.twitter.com/ibAd5IdR1I— tnantoka (@tnantoka) April 10, 2019 Flutter 1.5.4でもBuildできました。 ソースコードはこちらです。 なお、box…

Flutter-Web-Landing-Pageを動かしてみた

GitHubのDart Trendingで流れてきたこのrepo。 READMEが白紙で最初は何が人気かわからなかったんですが、Web検索してみるとYouTubeの動画が出てきました。 www.youtube.com なるほど「Flutter for Webでレスポンシブなランディングページを作ってみた」的な…

GestureDetectorで図形をぐりぐり回す

マウスや指を動かした角度に合わせて何かを動かしたい……わりとよくある要件です。 atan2を使えばなんとかなりそうですが、 数学をまともに修めていない僕はいつも細かいところがわからなくなってしまいます。 そして、いつもこのサイトに助けられています。 …

flutter_secure_storageでセキュアに情報を保存する

公式プラグインのshared_preferencesを使えば、簡単に設定などを保存できますが、これは平文なのでセキュアではありません。 例えばWeb APIにアクセスするためアクセストークンは、iOSであればKeyChainを使うなどして保存する必要があります。 flutter_secur…

毎日やることをリマインドするアプリを作る その4:日次通知

続きです。 flutter_local_notificaitonsを使って、設定したい時間に通知を表示します。 github.com initState内で初期化しておいて… _flutterLocalNotificationsPlugin = FlutterLocalNotificationsPlugin(); const AndroidInitializationSettings initiali…

毎日やることをリマインドするアプリを作る その3:設定の保存

以下の続きです。 前回はタスクを保存できるようにしましたが、今回は設定を保存します。 保存にはshared_preferencesという公式プラグインを使います。 保存 ここではthenを使っていますが、awaitでももちろん問題ありません。 SharedPreferences.getInstan…

毎日やることをリマインドするアプリを作る その2:タスクの保存

以下の記事の続きです。 今回はタスクのデータを保存できるようにします。 まずは、JSONとの変換処理を書きます。 Task.fromJson(Map<String, dynamic> json) { name = json['name']; final List<dynamic> decodedHistory = json['_histories']; _histories = decodedHistory.cast<int>(); }</int></dynamic></string,>…

毎日やることをリマインドするアプリを作る その1:モック

タイトルの通りのアプリを作り始めました。 完全に自分用で、ストアにリリースするかはまだわかりません。 名前はそのままで「Nikka」にしました。 紙で軽く考えたものをそのままFlutterでモックにすることにしました。 できたのがこちら。 ここまでで使用し…

Flutter for WebでRounded Rectの上辺が描画されない問題を追う

※ この問題は現在のFlutter for Webでは解消しています 以下の記事でflutter_webを動かしていて、CanvasのdrawRRectがうまく動かないことに気づきました。 flutter_shapesの問題かもしれないので、最低限のコードを書いて実行してみます。 class _MyPainter …

Flutter ShapesのDemoをFlutter for Webで動かしてみた

以下の記事では、 まだテクニカルプレビューなので、本番に使えるような状態ではない と書きました。 webdev serveの重さだけでそう書いてしまいましたが、その後、公式のsamplesを見ていると、 buildされたものは普通に動いていたのでもう少し触ってみるこ…

Flutter Galleryの動かし方

Flutter Galleryは公式repoに含まれているサンプル集で、たくさんあるFlutterのWidgetの使い方の参考になります。 (所謂Kitchen Sinkというやつ) 手元でBuildできるようにしておくといじりながら挙動を確認できるので便利です。 自分の環境のFlutterのバー…

時計の読み方アプリで吹き出しが切れる問題

以下のエントリで作ったアプリですが、吹き出しが少し切れて残念になっていました。 現在、このビューはColumnを使って並べています。 Columnを使ったまま吹き出しのみをオーバーフローさせるのは難しそうです。 Stackに書き換えて並べればできそうですが、…

Flutter for Webを動かしてみた

Google I/O 2019にて、Flutter for Webが発表されました。 多くの人が「やってみた」記事を書いてることと思いますが、それは見ずにあえて自分でもやってみようと思います。 Flutter SDKのバージョンアップ at least v1.5.4 v1.5.4以上が必要ということなの…

CustomPaintを使って図形を描く

前回、Creative Coding的なものをやる手段の1つとしてゲームエンジンをあげました。 ゲーム的な機能が不要であれば、Canvasに図形を描く単純な方法もあります。 例えば、以下のコードをlib/main.dartに書くと、 import 'package:flutter/material.dart'; voi…

Flutter用のゲームエンジン

Creative Coding、Generative Artみたいなものをやりたかったので調べました。 p5の移植版などがあればそれが楽ですが、まだそういうものはなさそうなので、ゲーム用フレームワークを代替として使おうという魂胆です。 現状、以下の2つが有力っぽい。 Google…

時計の読み方アプリに「あと何分?」モードをつけた

以下の記事で作った時計アプリ。 我が子が今マスターすべきは「時計を見てあとどれぐらい時間があるのか把握する」というスキルなので、そのモードを追加しました。 今回は以下のようなクラスを使いました。 TabController TabBar TabBarView Expanded ソー…

時計の読み方アプリをさっくり作る

Flutterはちょっとしたアプリをサクッと作るのにとても良いです。 ストアに出そうとするといろいろ作業が発生して途端に面倒になる(Flutterのせいではない)のですが、個人的に使うようなアプリは本当にストレスフリーに作れます。 今回は子供用の時計の勉…

Fluter入門時に読んだもの

普段は形から入るタイプ(?)なので、新しいことをやる時はいろいろ本や記事を読み漁ってから始めます。 ただ、今回はコンテストの提出期限まで1ヶ月しかなく、5120バイトのサイズ制限に時間を取られることが予想されたので、最低限の情報だけ読んで進める…

Flutter notes始めました

Google製のクロスプラットフォームアプリ開発ツール、Flutter。 2019年2月末に、[Flutter Create](https://flutter.dev/create]というコンテストがきっかけで使い始めました。 (それまでも興味はあったけど触れていなかった) iOS開発の癖でiOSシミュレータ…