Flutter notes

Flutterに関するメモ書き

カードをめくるエフェクト(Webでも動くやつ)

ふと、カードをめくる感じのアプリが作りたくなりました。 github.com よさげなパッケージがあったので、これを入れるだけで終わりか?と思って試してみました。 ネイティブでは普通に動きましたが、Webだとおかしくなってしまいました。 僕のFlutterのモチ…

Moyo: 色錯視

引き続き以下の本を参考に模様を描きます。 ふしぎな模様の描き方 今日は色錯視。 星はどちらもColor.redでfillしているはずですが、全然違う色に見えますね。 ソースコードは以下のリンクから。 Webでも動いています。 https://tnantoka.github.io/moyo/#/c…

Moyo: 三角形パズル模様

こんな感じのものを描きました。 ソースコードはこちらです。 Web版は以下からアクセスできます。 (やはりパーマリンクがあると直接目的の模様が見れて便利) https://tnantoka.github.io/moyo/#/trianglepuzzle なお、今回の模様は以下の本を参考にしまし…

GitHub Actionsを使ってFlutter for webをbuildしてGitHub Pagesで公開する

GitHub Actionsが使えるようになったらWeb版のデプロイを任せたいなぁと思っていたが、すっかり忘れていた。 週末に思い出してSign upしておいたら、昨日使えるようになっていたのでMoyoに設定してみた。 参考にしたのは以下の記事。Flutter(Android)をbui…

Moyo: 画像をクリップボードにコピーできるようにする(base64形式で)

引き続き暇な時はMoyoプロジェクトをいじっています。 https://github.com/tnantoka/moyo https://tnantoka.github.io/moyo/ せっかく書いた画像を保存したいな、と思ったので、クリップボードにコピーする機能を付けてみました。 (画像データそのままはク…

Moyo: Flutter Webで画面遷移したときにURLが変わるようにする

新しいWidgetを追加した記事を書く際にそこへのリンクが貼れないのが気になっていたので、 画面遷移した時にURL(path)が変わるようにしました。 参考記事の通りNavigator.pushNamedを使うと変わるようになりました。 最初はargumentsで表示するwidgetを指…

Moyo: タートルグラフィックス的なもの

久々の更新です。 Turtle Graphicsのスライドを見たので、それっぽいものをやってみました。 実装は単純。 以下のようなクラスを用意してその配列を_commandsに保持し、その値を元にCanvasの drawLine、 rotateを呼んでいるだけです。 enum CommandType { fo…

flutter_web packageで動かしていたプロジェクトをflutterに移行する

Web対応がFlutter本体にマージされたということで移行してみます。 公式の情報は以下のようなものがあります。 FAQ マイグレーションガイド 環境 upgradeで最新化。 $ flutter upgrade $ flutter --version Flutter 1.9.1+hotfix.2 • channel stable • https…

Flutter for Webをmasterチャンネルで試してみる

今までは https://github.com/flutter/flutter_web を使っていたけど、 Wiki によるとmasterチャンネルでも動く状態らしいので試してみた。 環境 $ flutter --version Flutter 1.9.8-pre.83 • channel master • https://github.com/flutter/flutter.git 設定…

今更ながらFlutter for DesktopのHello World

そういえば動かしてみたことなかったので。 masterチャンネルに切り替え $ flutter channel master $ flutter upgrade $ flutter --version Flutter 1.9.8-pre.38 • channel master • https://github.com/flutter/flutter.git macOS用のデスクトップ機能を有…

p5.dartをFlutter for Webで動かしてみた

processing (p5) の一部APIをFlutterで動くようにしてくれている素敵ライブラリ。 ふと「Flutter for Webでどのぐらい動くかな?」と思ったので試してみました。 結果は…こんな感じです。 こちらで触ってみることができます。 https://tnantoka.github.io/ka…

Moyo: ランダムダンジョン生成

本日は、ランダムなダンジョン生成を試してみました。 アルゴリズムは以下の本で存在を知った「棒倒し法」を簡易的に実装したものです。 Pythonでつくる ゲーム開発 入門講座 結果はこんな感じになりました。 迷路を生成 ダンジョンっぽく ソースコードはこ…

Moyo: グリッド表示

ゲーム的なものを描きたくなったので、その土台として全画面にグリッド表示をしてみました。 return SafeArea( child: LayoutBuilder( builder: (BuildContext context, BoxConstraints constraints) { return Container( child: CustomPaint( painter: _MyP…

Moyo: 円をふよふよアニメーションさせる

引き続き、いろんな模様を描いて遊んでいます。 今回は円の線を曲げるアニメーションです。 個人的に、図形描画の練習によく作るものなのですが、今回Flutterでもやってみました。 ソースは以下のとおりです。 import 'dart:math'; import 'package:flutter/…

Moyo: いくつも円を重ねる

前回、CustomPaintでいろいろ描いていくプロジェクトを作りました。 今回はたくさんの円を重ねる模様を書きました。 コードは以下のような感じです。 class _MyPainter extends CustomPainter { @override bool shouldRepaint(_MyPainter oldDelegate) { ret…

CustomPaintでいろいろ描いていくためのプロジェクト「Moyo」を作った

最近、Flutterのお勉強が捗っていません。 理由の1つは自分自身があまりモバイルアプリを使わなくなっており、それに伴って作りたいアプリも少なくなってきているからです。 では、何なら作りたいのか。 Creative CodingやGenerative Artのような何かを描く…

Flutter 1.5.4-hotfix.2 から Flutter 1.7.8+hotfix.3 にアップグレード

Flutter 1.7がリリースされましたね。 まず現在のバージョンを確認。 $ flutter --version Flutter 1.5.4-hotfix.2 • channel stable • https://github.com/flutter/flutter.git Framework • revision 7a4c33425d (2 months ago) • 2019-04-29 11:05:24 -070…

ポケモンのタイプ相性を覚えるためのゲームを作った(flutter_web版も)

前回、以下のようなライブラリを作りました。 これを使って、簡単なゲームを作ってみました。 ボタンをタップして弱点を答えるだけで特に複雑なことはやっていないので、ゲームエンジン系のライブラリは使いませんでした。 画面はこんな感じです。 Flutter f…

ポケモンのタイプ相性を扱うための簡易パッケージ

突如発表されたSwiftUIに浮気していたため、久しぶりの更新になってしまいました。 またぼちぼち更新していきたいと思います。 あと半年もしないうちにソード・シールドも発売するということでポケモンの予習に使えるアプリでも作ろうかなと考え中です。 と…

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のバー…