kii-memo-dev

最近、 FlutterのAPIドキュメント を良く眺めていますが、ドキュメントのページ内に含まれるサンプルコードの一部はブラウザ上で実際に実行して結果を確認出来る仕様になっています。 例： AnimatedList 、 FutureBuilder 、 PhysicalShape クラスなど 少し気になったので仕組みを検索した処、Webページのソースに『 DartPad 』というJavaScriptで書かれたオープンソースのスクリプトを組み込む事でFlutter/Dartで書かれた任意のコードがブラウザ上で実行可能になるそうです。 このサイトで、これまでに、いくつかのFluterコードを含む備忘録をメモしているので、今後のメモに使えるのではと思い、『 DartPad 』を使ってみました。 DartPadのWikiの 組み込みガイド にはGitHubのgistを表示する方法(①)と、タグ内にコードを埋め込む方法(②)の2つが紹介されていますが、この備忘録では後者の②を使った方法を簡単に紹介しています。 でも 、上記のガイドの通りにするだけだと、実際にページ内に表示されるDartPadの幅が300px程度しかなく、小さすぎて使い物になりませんでした。 そこで、CSSやJSを使って修正を加えたらDartPadをページ幅で表示が出来たので、 解決方法 もこの記事で紹介しています。 キーワード : #DartPadが小さい #DartPadをページ幅で表示する方法 [目次] DartPad組み込みガイド Converting code blocks to DartPad (コードブロックをDartPadに変換) [Solved] 何故か小さく表示されて使い物にならないDartPad... タグにスタイルを指定してみる 解決方１: CSSでiframeのスタイルを変更してページ幅に 解決方２: JavaScriptでスタイルを変更してページ幅に DartPad組み込みガイド DartPadのWi

👉 『コメ欄』クイックセットアップガイド 👉 サポートページ [ 目次 ] リリースノート v0.1.1g リリースノート v0.1.1f リリースノート v0.1.1e ツイキャス専門店 コメ欄 (v0.1.1g) 20/Aug/2022 公開 対応アンドロイド(API): Marshmallow (API 23) ~ 更新・修正事項 ビルドターゲットをAndroid 11 (API 31)からAndroid 12 (API 32) に更新。 各Android SDKモジュールのバージョン更新。 UIの更新 プリセットカスタムCSSの更新 アプリ内表示モード: ドロワーメニューに「メイン画面に戻る」を追加。 横画面表示中に、アプリ内表示モードで背景色/背景画像を選択する際に表示される選択アイコンの大きさを改善。 背景画像設定画面: インポートされた画像の削除機能の追加。 ヘルプ画面: カスタムCSSの外部リンクの更新。 ツイキャス専門店 コメ欄 (v0.1.1f) 30/Dec/2021 公開 対応アンドロイド(API): Marshmallow (API 23) ~ 更新・修正事項 Android SDKのcameraXモジュールのバージョン更新 ホーム画面表示モード終了後、アプリのメイン画面が再表示される仕様に変更。 「クイックスタートガイド」のリンクテキストを「クイックセットアップガイド」に更新。 ツイキャス専門店 コメ欄 (v0.1.1e) 17/Dec/2021 公開 対応アンドロイド(API): Marshmallow (API 23) ~ 更新・修正事項

AnimatedSwitcher ウイジェットを使って、2つのウイジェットの表示をアニメーション効果付きで切り替える際、前後で表示されるウイジェットに BoxFitプロパティで全画面に拡大表示しているウイジェットがあると 実際の表示が全画面にならない場合があったのでその解決法をメモしておきます。 キ－ワード : #AnimatedSwitcher #全画面表示 #layoutBuilder #カスタムLayoutBuilder [目次] AnimatedSwitcherウイジェット AnimatedSwitcher.defaultLayoutBuilder Stackウイジェットを親ウイジェットの大きさに合わせる 結果 現在、開発環境をFlutterに移行中のスマホアプリ 『コメ欄』 に、設定した複数の画像から１つをアプリの背景画像として表示させる画面があります。 画像の表示には Image ウイジェットを使っていますが、表示する画像の画素サイズが、スマホ画面の大きさとは違う場合がほとんどなので、Imageウイジェットの fit プロパティに BoxFit を指定して背景に設定する画像を画面の大きさに合わせて拡大、縮小や、引き延ばしをして表示出来る様にしています。 例:『コメ欄』の画面 (1080x2220) 画素が610x800 (①)と 808x808 (②)の画像が画面上に拡大表示されています (BoxFit.cover) 背景画像表示例 ① 背景画像表示例 ② 背景画像表示例 として「 いらすとや 」のサンプル素材を背景画像として使わせてもらいました。 AnimatedSwitcherウイジェット 背景画像は複数設定可能なため、アプリ内で切り替える事が出来ますが、その際に瞬時に画像が切り替わるのではなく、フェードアウト・フェードインを組み合わせたクロスフェ