Flutter開発においてAndroidでテキストフォントが中華フォントになってしまう問題の原因と解決方法 iOSは問題ないがAndroidだけデフォルトだと中国語の漢字になってしまう。糸へんが行書体のようになって違和感あり。システムフォントの「Roboto」「Noto Sans CJK」で日本語ではなく中国語が適用さ...

Flutterにおいてテキストを自動ループでネオンのように点滅アニメーションさせる方法４選。『ポケポケ』（ポケモントレーディングカードゲームポケット：Pokémon Trading Card Game Pocket）のUIのイメージ。リピートでフェードイン・フェードアウトのエフェクト付きで繰り返し自動でテキストカラーの...

AnimatedCrossFadeで切り替える画像の全面表示がうまくいかない問題の解決方法。背景に全面表示していた画像をAnimatedCrossFadeを使って切り替えるようにしたら全面表示できなくなった。 fitHeightで横長の画像をアスペクト比維持して縦長に引き伸ばして表示していた。firstChildとse...

Flutterにおいて２つの画像をクロスフェードでループ表示させる方法。フェードイン・フェードアウトのアニメーション付きで繰り返し自動で画像の表示切替がされるようなリッチなUIが作れる。iOS/Android共通で標準ウィジェットで使用可能。AnimatedCrossFadeを使って簡単に解決することができる。firs...

【Flutter】AnimatedTextKitでテキストが更新されない問題の解決方法 1度目のアニメーションはいいのですが、2度目以降同じAnimatedTextKitを使ってテキストだけ変更して画面のリビルドがされても、アニメーションが発動せず、テキストも変わりません。 リピート回数を1にしているせいかと思い、to...

Flutterにおいてテキストをタイプライターやテレビのクイズ番組の問題文のアニメーションのように、時間差で少しずつテキストを表示する方法。iOS/Android共通で使えます。animated_text_kitパッケージを使って簡単に解決することができます。サンプルコードのとおり、AnimatedTextKitのan...

Flutter開発者におすすめの書籍５選です。iOS/Androidモバイルアプリエンジニア向けにFlutter（Dart言語）を学習するのにおすすめの本を５つ紹介します。初心者だけでなく中級者にも十分で最新の環境構築方法や、Riverpodなどの状態管理についても触れられています。ハンズオン用にサンプルコードが充実し...

FlutterのTabBarにて左側に余白（パディングかマージン）が入るようになった。右端は問題なく、左端のみにpadding（margin）が入る。 FlutterのSDKバージョンを上げたためと思われる。v3.16系に上げたことで、TabBarのtabAlignmentプロパティが追加されており、タブの配置をカスタ...

ListViewやGridViewなどのリストをそのまま使っても、デフォルトではスクロールバーは表示されない。 スクロールバーがないと、スライドでコンテンツを移動した際に、全体のどのくらいの位置に移動したのかがわかりにくくなる。 スクロールバーを表示するためには、ScrollbarウィジェットでWrapするとよい。UI...

Flutterによるアプリ開発で動作確認する場合、実機やXcodeのシミュレーター、Androidのエミュレーターで確認することになりますが、デバッグビルドした場合には、画面右上に「DEBUG」という帯が表示されてしまいます。 このDEBUG表示はコード1行で簡単に非表示にすることができます。 アプリリリース時にも表示...