CATEGORY

Flutter標準

  • 2023年3月8日

【Flutter】ネットワーク画像の読み込み直後にイベントを実行

対象者 Flutterアプリで、ネットワークから画像をダウンロードが完了し、表示されるときの処理を設定したい はじめに チャットアプリの外観を実装しています。 メッセージを入力したときに画面がスクロールダウンして一番下に行くようにします。しかし画像があると、メッセージ入力直後にスクロールダウンしても、画像は読み込まれていないため、画像がサイズ0として計算された状態でスクロールされました。そして、そ […]

  • 2023年3月4日

【Flutter】画像の色を反転させる(白黒を入れ替える)

対象者 Flutterで画像の色(白黒)を反転させたい人 はじめに 画像を表示するときに、反転させる機能があったので、ご紹介します。 背景に白黒の画像を使うと、ライトモードとダークモードの切換時にこの機能でいけそうです。画像を2枚用意しなくてすみます。 実施するソース まあ、NetworkImageやAssetImageの引数invertColorsをtrueにするだけです。 画像を見てみる 白黒 […]

  • 2023年3月3日

【Flutter】FilledButtonとMaterial 3 での各ボタン

対象者 FlutterでのMaterial 3が気になる人 Material 3 で導入されたFilledButtonが気になる人 はじめに FlutterにMaterial 3 が導入されて、ボタンが丸くなり、お洒落になりました(多分、センスないんで、断言できない)。また原色を指定しても、いい感じになっています(ような気がする)。実際どうなのかと思い比較してみます。 また、Material 3に […]

  • 2023年2月26日
  • 2023年3月9日

【Flutter】precacheImageで画面描画前に画像を読み込む

対象者 FlutterのprecacheImageを知りたい人 Flutterで画面起動と同時にすべての画像を表示させたい人 Flutterで特定の処理が完了するまで、画面を表示させたくない人(上記では、特定の処理が「画像の読み込み」にあたる) Flutterで画像読み込み時に画像のサイズを知りたい人 はじめに Flutterのアプリを起動させます。画面に画像を使ってますが、すこし残念なことに、起 […]

  • 2023年2月25日
  • 2023年4月22日

【Flutter】Snackbar(スナックバー)をちょっとお洒落にする

対象者 Flutterでスナックバーを表示したい人 せっかくなので、パッケージは使わずに、ちょっとおしゃれなスナックバーにしたい人 はじめに Flutterの標準のスナックバー動作確認をしたので、方法を記載しておきます。 Figma Material X kit – Snackbar components UI designに、シンプルかつおしゃれなスナックバーがあったので、Flutt […]

  • 2023年1月5日

[Flutter] BottomSheet（ボトムシート）の表示とチップス

BottomSheetは、画面下から伸びてきて、何らかの入力を求めるWidgetです。私が実際にBottomSheetを使用してみて、疑問に思って検索して分かったことを汎用性の高い形式のソースを作成してまとめています(デザイン的には、アレですが)。 この記事で分かることは、以下の通りです。 基本的な表示方法とボトムシートのサイズ(長さ?)の指定、結果の使い方 ボトムシートは、showModelBo […]

  • 2022年12月25日
  • 2024年6月20日

【Flutter test】Dartのテスト、チートシート

Udemyにて「FlutterでのはじめてのTDD(テスト 駆動開発)」を公開してます。講座受講者の方用に作成していたFlutter Testのチートシートを公開しました

  • 2022年12月22日
  • 2022年12月20日

Flutter を main.dart 以外から起動

「Flutter Advent Calendar 2022」に参加させて頂きます！22日目です。 はじめに Flutterって、main.dart以外からも起動できるって知ってましたか?Flutterを2年以上弄ってて、初めて気がつきました。 これで、ブログ用とかのサンプルコード毎にプロジェクトを作ったりレポジトリを作ったりしなくてすむ! 方法 ターミナルのプロジェクトのルートにて。 flutte […]

  • 2022年12月20日
  • 2022年12月19日

【Flutter】Material 3 での基本的な色設定

「Flutter Advent Calendar 2022」に参加させて頂きます！20日目です。 useMaterial3をtrueに設定してしまったためか、いまいちテーマに馴染みがないためか、初期設定に迷いました。色々なホームページを見ていても、どこそこの色がどこに反映される、とかマニアックなものはいくつかありました。しかし、それ以前の基本的なテーマでの色の設定とダークモードの対応が分からなかっ […]

  • 2022年9月17日
  • 2022年9月17日

【Flutter】横丸でグラデーションのあるボタンを作った

したかったこと 現在の携わっているFlutterのプロジェクトは、もともとデザイン中心のテンプレートからアプリ開発を行っている。ボタンが横丸かつ微妙にグラデーション掛かってて、おしゃれで、デザイン的には気に入っている。ただ、内部的にはContainerをGestureDetectorでラップしているため、ボタンを無効にする、というボタン特有の行為ができない。そこで、デザインをそのままで、ボタンと機 […]