TAG

Flutter

  • 2023年3月4日

FlutterFireのメモ

対象者 FlutterでのFirestoreへの設定方法をだいたい知っていて、コマンドだけ知りたい人 さくしんの「【Flutter】Firestore 実践ガイド」の講座を受けている人 はじめに 何度かFlutterでのFirestoreの設定をしておます。そのため、メモを残しておきます。 npmをインストール Macでは不要 https://nodejs.org/en/ firebase-too […]

  • 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年3月1日
  • 2023年3月1日

【Flutter】Row内に上寄せと下寄せにしたいWidgetが両方ある

対象者 FlutterでRow内で、上寄せと下寄せにしたい項目がある場合 はじめに LINEのメッセージが表示されている画面をFlutterでも再現しようとした。しかし、同じRowの中で上揃えと下揃えになっている項目があったため、どのようにするのか分からなかった。 ListViewの中にRowがあるため、Expanded(child:Container())を使ってTextを寄せようとすると、エラ […]

  • 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年2月23日
  • 2023年2月23日

【Flutter】connectivity_plus でネットワーク状況を監視

対象者 Flutterでネットワークが繋がっているかリアルタイムで監視したい人 はじめに インターネットに繋がっていることが前提のアプリを作成しています。そこで、ネットワークに繋がっていない場合は警告のダイアログを出そうと思います。そのため、ネットワークの接続状況をStreamで監視します。 「connectivity_plus」を使って、ネットワークの状況に応じてメッセージがリアルタイムで変わる […]

  • 2023年2月21日
  • 2023年2月21日

【Flutter】pubspec.yamlのversionを自動で?上げる

対象者 Flutterのpubspec.yamlのバージョンを上げるのが面倒くさい人 はじめに Flutterで完成したアプリをストアに転送しますが、pubspec.yamlの「version: 0.1.4+37」を更新し忘れて、怒られることありませんか。私はよくあります。 そのため、自動でバージョンを上げてくれるパッケージはないかと探しました。そして見つけました。コマンドラインで実装している方も […]

  • 2023年2月20日
  • 2023年2月20日

【Flutter】Markdown(マークダウン)を表示

対象者 Flutterでマークダウンを使用したい人 はじめに この記事では、Flutterでマークダウン形式のファイルの内容を表示する方法を解説してます。パッケージはメジャーなものと多機能なモノの2種類試しました。 もともとは、Flutterのアプリでプライバシーポリシーを表示したい。マークダウンのファイルを書いて、それをいい感じにWidgetにしてくれないかと思いました。 パッケージ flutt […]

  • 2023年2月18日
  • 2023年2月18日

【Flutter】Timerで一定間隔で処理を行う

対象者 Flutterで一定の間隔で処理を実施したい人 はじめに Timerを使って、一定間隔でなにかを実施する方法を説明します。 アイコンをアニメーションさせようと思いました。しかし、それほど気合いを入れる気もなかったので、1秒間隔で変数を変えて、アイコンの傾きを変えることで対応しました。 Timer(Duration(seconds: 1),(_){})だと1秒後に実施されて、Future.d […]