Flutterの記事を整理し本にしました 本稿の記事を含む様々な記事を体系的に整理し本にまとめました 今後はこちらを最新化するため、最新情報はこちらをご確認ください 10万文字を超える超大作になっています(笑) はじめに Flutterの状態遷移を整理しました。 initStateとかbuildとか漠然とイメージしていたのですが、しっかり理解していなかったことが理解できましたｗ まとめ StatefulWidgeのライフサイクルとは StatefulWidgetにはライフサイクルがあり、生成されてから破棄されるまでが細かく管理され、その状態に応じてメソッドが呼ばれます。 これらの状態を理解しておくことで、より高度な制御が可能です。 普段何気なく使っているbuildやinitStateはまさにこのライフサイクルに関連するメソッドです。 buildやinitStateは画面が表示されるときに呼

Riverpod API の重要な部分は、provider を単独でテストする能力です。 適切なテストスイートを作成するためには、いくつかの課題を克服する必要があります: テストは state を共有すべきではありません。 これは、新しいテストが前のテストの影響を受けないことを意味します.テストは特定の機能をモックできる能力を提供し、望んだ state を実現します。テスト環境は可能な限り実際の環境に近いものであるべきです。幸いなことに、Riverpod はこれらの目標を達成することを容易にします。 テストの設定​Riverpod でテストを定義するとき、大きく 2 つのシナリオがあります: ユニットテスト、通常は Flutter 依存関係がないテスト。 これは provider の動作を単独でテストするときに便利です。ウィジェットテスト、通常は Flutter 依存関係があるテスト。 p

それぞれの特徴 Unit Test class単体/関数単体をテストします。 一番簡単に書けるテストですので、1st stepにはもってこいのテストです。 外部に依存しないビジネスロジックをテストするのに向いています。 対象の関数が期待通り/仕様通りに動作するかを確認します。 対象の関数内で使っている別の関数の動作に依存しないようにmockを利用したりします。 Widget Test その名の通り、Widgetをテストします。 Widgetを単体で起動し、Widgetをタップ等の操作をして期待通りの表示になっているか等を確認します。 flutter createで作成されるテストがこちらです。 mockを使えば依存関係を切ることができ、単体テストとして使うことができます。 条件によって表示される/されないをテストするのに向いています。 また、Widget Testの中に Golden Te

WidgetsBindingObserverでイベントを監視Flutterでアプリケーションがフォアグラウンドかバックグラウンドに移行するイベントを監視する場合、WidgetsBindingObserverを使うことが一般的です。WidgetsBindingObserverを利用すると、アプリケーションのライフサイクル変更に関連するコールバックを受信できます。 didChangeAppLifecycleState(AppLifecycleState state)このメソッドはアプリケーションのライフサイクルが変更されたときに呼び出されます。stateパラメータは、アプリケーションの状態を示す列挙型です。例えば、AppLifecycleState.pausedはアプリケーションがバックグラウンドに移行したときを示します。 使用ステップウィジェットクラスでWidgetsBindingObser

Flutterのダイアログを2重で表示しないようにする 多重実行防止についてコメントで頂いた内容の方がフラグ管理せずに簡潔に同じことが表現できるので、そちらを追記に記載しました！(AsyncCacheを使用) 結論としてはクラス変数、もしくはプロバイダーにフラグを持たせて表示中なのかそうでないのかを判定しているだけです。 準備 まずはflutter create -e testで適当な新規PJを作成します。 main.dartを下記のように書き換えてください。 MainAppクラスのbuildメソッド内からScaffoldをHomeScreenに切り出し HomeScreenクラスのCenterの子供にColumnを指定してボタンを追加 main.dart import 'package:flutter/material.dart'; import 'package:test/dialog

Flutter Desktopを使ってデスクトップ環境向けのアプリを書いていると、ウィンドウのサイズを変えたり制限したりしたくなる。特に、ウィンドウが小さくなりすぎると描画が崩れて困るので何とかしたい。 そんなときは、Google公式のwindow_sizeを使って、色々と設定できる。 window_sizeの概要 Googleがデスクトップ環境向けに提供しているプラグインの1つ。 リポジトリのREADMEを超訳すると、こんな感じ。 このプラグインは、Flutterのコンテンツを含むウィンドウのサイズや位置を変更したり、画面情報を取得したりできるよ。 まだプロトタイプで、長期的にはFlutterのフレームワーク自体の機能に取って代わられるかも。あとAPIが大きく変わることもあるよ。 将来的にはウィンドウの最大化や最小化みたいなこともできるようになるかも。そんなプルリクエストを募集中！ ma

はじめに Flutterの画像には与えられた領域にどう表示するかを決めるパラメータとして fit alignment があります。この設定をいじるとレイアウトが変更されるのですが、挙動に少し迷う部分があるのでここにまとめます。 使う画像は正方形です。これを SizedBox によるいろんな形の入れ物に入れます。 ちなみに BoxFit にはいくつか種類がありますがこの記事では BoxFit.fitWidth しか扱いません。この記事のテーマの「縦方向か横方向の配置の自由度が生じたときにどう処理されるか」という点は BoxFit.fitWidth のひとつだけで説明が付くという判断をしました。 使うコードはこちら home: Scaffold( body: Center( child: Container( decoration: const BoxDecoration( color: Co

ローカルに画像を用意 Flutter プロジェクトの中に、assetsフォルダを作りその中にimagesフォルダを作ります。 assets/images/unnamed.pngというパスになります。 この画像を表示させます。 pubspec.yamlに画像の置き場所を設定する デフォルトでは下記のようにコメントアウトされているかと思います。 flutter: ...(省略)... # To add assets to your application, add an assets section, like this: # assets: # - images/a_dot_burr.jpeg # - images/a_dot_ham.jpeg

無性にリロードがしたい。人間にはそういう時期だってある。 FutureBuilderは完了するまで別のウィジェットを表示できる api.flutter.dev FutureBuilderは、HTTPリクエストの結果を表示する時に、リクエストが完了するまでインジケーターを表示したいケースに使える。 基本的な使い方は以下の通り。 FutureBuilder<String>( future: _futureObj, builder: (BuildContext context, AsyncSnapshot<String> snapshot) { if(snapshot.hasData) { return Text(snapshot.data); } else if (snapshot.hasError) { return Text("Something wrong"); } else { ret

StateのFutureをreloadする(失敗例) build内でFutureBuilderを使い、そこで使用するデータとしてFuture<List<String>>みたいな物をStatefulWidgetのStateとして保持していました。 内容は変えていますが、以下のようなソースコードです。 この状況で、FloatingActionButtonボタンを押すと、55行目で以下のエラーが発生します。 FlutterError (setState() callback argument returned a Future. The setState() method on _ListViewWidgetState#3ce67 was called with a closure or method that returned a Future. Maybe it is marked as “

この記事は、【 可茂IT塾 Advent Calendar 2021 】の6日目の記事です。 FultterでSVG画像を表示した際に黒潰れになってしまうことがあります。 原因と対処法を紹介します。 VersionFlutter 2.5.2 Dart 2.14.3 flutter_svg: ^1.0.0原因使用したSVGにstyleタグが含まれているから。flutter_svgパッケージはstyleタグに対応していないらしいです。 twitter_logo_blue.svg<?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 24.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" id="Logo"

はじめに今回は、Flutterの拡張関数(extension)のについて説明していきたいと思います。 拡張関数を使いこなすことができれば、コードの書き方の幅がかなり広がりますよ！ 拡張関数extensionとは拡張関数とは・・・あるクラスにメソッドを追加できるものです。 メソッドを追加できるということは、プロジェクト内でよく使うメソッドなどをあらかじめextensionで作っておくことで、あらゆる処理を書くのが楽になります。 以下で、実際に僕がよく使っているextensionの具体例を紹介したいと思います。 extensionを使ってcontextにメソッドを追加するcontextを使って、〇〇する。というケースはかなり多いと思います。 例えば以下のような、 Theme.of(context)... MediaQuery.of(context)... などです。 contextから情報を引

はじめに 最近url_launcherにLinkというウィジェットがあることを知ったので、その共有記事です。 結論からいうとFlutter Webを使う場合はこれを使うと良さそうです。 実践 ウィジェットの説明 A widget that renders a real link on the web, and uses WebViews in native platforms to open links. 「ウェブ上の実際のリンクをレンダリングし、ネイティブプラットフォームでWebViewsを使用してリンクを開くウィジェット。」とのことです👀 使い方 FlutterでURLを開くときはボタンを用意して、onPressedでlaunchURLを呼ぶことが多いと思います。今回はIconButtonでURLを開くケースをLinkウィジェットを使って書き換えてみます。 Linkウィジェットのur

環境 macOS Big Sur Version 11.3.1 Flutter 2.2.0 Dart 2.13.0 画像をバックグラウンドに表示する 画像を置くフォルダを用意 まず、利用したい画像を用意してプロジェクト内のフォルダに入れます。 ※ネット上にある画像を使うパターンもできますが、今回はあらかじめ用意した画像を読み込む形にします。 単純にこちらのサンプルのほうが少ないなーという主観的観測結果によるものです😎 プロジェクト直下にimagesフォルダをつくります。（フォルダの名前は任意です。） androidでエラーになってますが気にしないでいただければ・・・w 次に作成したフォルダにぱくたそ様から拾ってきたいい感じフリー画像を置きます。 ファイル名はbackground-sample.jpgとしました。 pubspec.yamlに設定を追加する Flutterでプロジェクト内に用

方法 画像をアイコンとして表示するには、ImageIconウェジェットを使います。 具体的には、ImageIconを配置し、引数にAssetImageやNetworkImageなどを指定します。 ImageIcon( AssetImage('/*Your Image*/'), ) これで画像をアイコンとして表示することが出来ます。 以下は、使用例です。 @override Widget build(BuildContext context) { return Scaffold( body: Center( child: ImageIcon( AssetImage('asset/images/risu.png'), color: Colors.blue, size: 200, ), ), ); }

class Init { Init._(); static final instance = Init._(); Future initialize() async { await Future.delayed(const Duration(seconds: 3)); } } 結論 Init._()はprivate constructor 。 解説 Dartにアクセス修飾子(public/protected/private)はありません。そのため、他言語のようにデフォルトコンストラクタにprivate修飾子を施す処理は実装できないため、_ (通称private & 名前必須だけど、処理に関係ない)を名前付きコンストラクタの名前にしている。 private constructorとは？ 1度だけインスタンスされる特殊なコンストラクタです。 インスタンスを多量に生成するとパフォーマンス低下の原

本記事では、mockitoパッケージを使用したユニットテストについて記載する。 モックを使用しない基本的なユニットテストについては、下記記事に記載しております。 基本的なユニットテストについて確認したい方は、こちらぜひご参照ください。 公式のチュートリアル mockitoを使ったユニットテストについて、上記の公式チュートリアルを基に確認していく。 上記のチュートリアルでは、以下のサンプルコードで、mockitoを使用したユニットテストの挙動が確認できる。 チュートリアルのサンプルコード（コメント詳細に追加 Ver） import 'dart:async'; import 'dart:convert'; import 'package:flutter/material.dart'; import 'package:http/http.dart' as http; // アルバムデータを取得す