Flutter notes

Flutterに関するメモ書き

VOICEVOXクライアントを作ってみた

VOICEVOXに興味津々で触ってみたいのはやまやまなのですが、 しばらくはFlutterと戯れようと思っていたので… github.com 「そうだ、VOICEVOX APIをFlutterから叩けば両方の欲望が実現できるのでは!」ということで作ったものです。 こんな感じで動きます。 F…

VOICEVOXのopenapiを叩く

github.com をFlutterから触りたい。 future-architect.github.io を参考に進める。 $ brew install openapi-generator $ wget https://raw.githubusercontent.com/Hiroshiba/voicevox/main/openapi.json $ openapi-generator generate -i openapi.json -g d…

レスポンシブ対応

breakpoint 1つだけの単純な対応。 final isLargeScreen = MediaQuery.of(context).size.width > 600; で見てWidgetの構成を変えている。 コード全体はこちら。 github.com 参考 medium.com

ライセンス一覧を表示する

何かしらライブラリが必要なのかと思ったら標準機能に実装されていた。 - appBar: AppBar(title: const Text('Home')), + appBar: AppBar( + title: const Text('Home'), + leading: IconButton( + icon: Icon(Icons.info_outlined), + onPressed: () { + sh…

Riverpodの練習のために単純なメモ帳アプリを作った

github.com 「tter」をつけると一昔(二昔?)前のマッシュアップサービス感が出てしまいますね。 一覧画面と編集画面の非常にシンプルなもの。 ファイルはjsonとして保存。 Riverpodの練習をしたかったのでドキュメントやサンプルを眺めながら使ってみた。 …

flutter_shapesをNull Safetyに対応させた

昔作ったライブラリをNull Safetyに対応させた。 github.com といっても雑にmigrationを走らせただけなんだけど。

flutter_lintsを既存プロジェクトに入れる

Flutterのテンプレートにlinterが最初から入るようになったらしい。良いですね。 zenn.dev 昔Flutterを触っていたときは pedantic を使っていたけど、 これからは flutter_lints を使えばよさそう。 ということで既存プロジェクトに入れた。 pubspec.yaml de…

imageパッケージでアニメーションGIF生成(その2)

前回の記事(↓)の続き。 flutter.tnantoka.com 確かにアニメーション速度が遅くなっている。 それは今後の課題とする。 あと生成時間が長いのでそこもなんとかしたい。 の部分の対応。 前回は色の透明度をアニメーションさせたが、わかりづらいので変えた。…

imageパッケージでアニメーションGIF生成

次アプリを作るならアニメーションを作る系のものを作りたいな、と思っていて調べていたら imageパッケージでアニメーションGIFが作れそうだった。 良い参考記事を見つけたのでやってみた。 scrapbox.io まずは表示のためのCustomPainter。 といっても四角形…

Flutterに再入門してみようかと思う(準備のためにupgrade)

Fuchsiaが一般リリースされたこともあり、また触ってみようかな、という気になりました。 ちょうど昔作ったライブラリに、Null safety対応せんの?というissueが来てたし。 Connecting the dotsですね(?) というわけで、まずはアップグレード。 $ flutter…

XD to Flutterを動かしてみる

最近全然Flutterを触れていませんでしたが、以下のニュースをみかけたので、動かしてみました。 blogs.adobe.com Flutterのupgrade $ flutter channel stable $ flutter upgrade $ flutter --version Flutter 1.20.4 • channel stable • https://github.com/…

カードをめくるエフェクト(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に浮気していたため、久しぶりの更新になってしまいました。 またぼちぼち更新していきたいと思います。 あと半年もしないうちにソード・シールドも発売するということでポケモンの予習に使えるアプリでも作ろうかなと考え中です。 と…