[Flutter]フォアグラウンドorバックグラウンドの監視について｜みきふく【スキでモチベUP!!】
WidgetsBindingObserverでイベントを監視Flutterでアプリケーションがフォアグラウンドかバックグラウンドに移行するイベントを監視する場合、WidgetsBindingObserverを使うことが一般的です。WidgetsBindingObserverを利用すると、アプリケーションのライフサイクル変更に関連するコールバックを受信できます。 didChangeAppLifecycleState(AppLifecycleState state)このメソッドはアプリケーションのライフサイクルが変更されたときに呼び出されます。stateパラメータは、アプリケーションの状態を示す列挙型です。例えば、AppLifecycleState.pausedはアプリケーションがバックグラウンドに移行したときを示します。 使用ステップウィジェットクラスでWidgetsBindingObser
![[Flutter]フォアグラウンドorバックグラウンドの監視について｜みきふく【スキでモチベUP!!】](https://cdn-ak-scissors.b.st-hatena.com/image/square/61a72579e4bed3023db0ea6840a6aa32aa032230/height=288;version=1;width=512/https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F123612687%2Frectangle_large_type_2_e37a9757e22031e2f4a7d2f3d0eddd75.png%3Ffit%3Dbounds%26quality%3D85%26width%3D1280)
Flutterのダイアログを切り出して2回表示を避けよう！
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のBoxFitとAlignmentの組み合わせによる挙動
はじめに Flutterの画像には与えられた領域にどう表示するかを決めるパラメータとして fit alignment があります。この設定をいじるとレイアウトが変更されるのですが、挙動に少し迷う部分があるのでここにまとめます。 使う画像は正方形です。これを SizedBox によるいろんな形の入れ物に入れます。 ちなみに BoxFit にはいくつか種類がありますがこの記事では BoxFit.fitWidth しか扱いません。この記事のテーマの「縦方向か横方向の配置の自由度が生じたときにどう処理されるか」という点は BoxFit.fitWidth のひとつだけで説明が付くという判断をしました。 使うコードはこちら home: Scaffold( body: Center( child: Container( decoration: const BoxDecoration( color: Co
url_launcherのLinkウィジェットを使ってFlutter Webで実際のリンクを表示する
はじめに 最近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
Flutterで画像をバックグラウンドに表示する
環境 macOS Big Sur Version 11.3.1 Flutter 2.2.0 Dart 2.13.0 画像をバックグラウンドに表示する 画像を置くフォルダを用意 まず、利用したい画像を用意してプロジェクト内のフォルダに入れます。 ※ネット上にある画像を使うパターンもできますが、今回はあらかじめ用意した画像を読み込む形にします。 単純にこちらのサンプルのほうが少ないなーという主観的観測結果によるものです😎 プロジェクト直下にimagesフォルダをつくります。（フォルダの名前は任意です。） androidでエラーになってますが気にしないでいただければ・・・w 次に作成したフォルダにぱくたそ様から拾ってきたいい感じフリー画像を置きます。 ファイル名はbackground-sample.jpgとしました。 pubspec.yamlに設定を追加する Flutterでプロジェクト内に用
[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, ), ), ); }
![[Flutter]画像をアイコンとして表示するには？](https://cdn-ak-scissors.b.st-hatena.com/image/square/f1be97a68e53f6ccf4bcd7aca760ed42a06dfd5c/height=288;version=1;width=512/https%3A%2F%2Fwww.choge-blog.com%2Fwp-content%2Fuploads%2F2021%2F11%2FSwift-2021-11-03T092640.730.jpg)
「class._()」でprivate constructorを定義する
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度だけインスタンスされる特殊なコンストラクタです。 インスタンスを多量に生成するとパフォーマンス低下の原
iOSでflutter_secure_storageに保存したものはアンインストールしても消えない
タイトルの通り。 調べてみると情報は出てくるのだが、思いあたる節がないと気づかない。 Androidと挙動が異なる点も注意が必要。 書いていること Androidの挙動に近づける方法。 iOS側に合わせる方法は今のところない認識。 flutter_secure_storageとは Infoには「セキュアなストレージにデータを保存するFluterプラグイン」と書かれており、 良しなに暗号化もしてくれるパッケージ。 すごく便利なパッケージなのだが、今回落とし穴に引っかかった。 （念の為バージョンも記載すると、「6.0.0」ときに直面） iOSでflutter_secure_storageに保存したものはアンインストールしても消えない 消えない。 検索してみるとツイッターなど出てくる。 なぜ消えないのかというと、 iOSにおいては内部でKeychainを使っているので消えないという話らしい。 「
【Flutter】Keychainアクセスのオプションと、iOSネイティブ連携してる場合のハマりポイント
flutter_secure_storage 前提として、Flutter側はflutter_secure_storageを使用しています。 FlutterにおけるiOSのKeychainアクセスにはこのパッケージが有名だと思います。 パッケージの実装の概要としては、MethodChannel[1]でプラットフォーム側のセキュア情報にアクセスします。 iOSのKeychainアクセスにおけるオプション flutter_secure_storageではKeychainAccessibilityというオプションが用意されており、端末のアンロック状態やパスコード設定有無によってアクセス制限の堅さ分けがされています。 属性 概要 デバイス制約
Flutter でWidgetから画像を生成してロゴ画像を追加する - Qiita
概要 LINEの友達登録のQRコードや、○○payの送金先などアプリ内で作成したプロフィールや画像、ゲームのスコア、QRコードなどを共有したい場面が出てくると思います。 そういった場面で使用できる方法を紹介したいと思います。 Widgetから画像を生成するだけなら簡単で、「Widgetから画像を生成する」を見るとほぼほぼ実装できると思います。 実装 ここからFlutter での実装を説明していきます。 1. Widgetから画像を生成する ウィジェットから画像を生成するには、画像として書き出したいウィジェットをRepaintBoundaryで囲み、RepaintBoundaryのKeyからRenderObjectを取得することで、画像を生成することができます。 final _globalKey = GlobalKey(); Widget build(BuildContext context
[Flutter] CustomPaintという選択肢 | RE:ENGINES
はじめに Flutterで用意されているWidgetや、パッケージを探してみても望む表現ができない場合は、 CustomPaintという選択肢が出てきます。iOSやAndroidなどでもグラフや複雑な図形を描画するのにCanvasをなどを用いて低レベルなAPIを使ったグラフィック操作を使用しますが、今回はFlutterでやってみます。 CustomPaintを用いて、できることは以下になります。 drawLine(線を描画) drawRect(四角形を描画) drawCircle(円を描画) drawArc(アーチを描画) drawPath(パスを用いて図形を描画) drawImage(ビットマップ画像を描画) drawParagraph(テキストを描画) 今回の記事では、drawLine、drawRect、drawCircle、drawPathを使ってみたいと思います。 drawLine
![[Flutter] CustomPaintという選択肢 | RE:ENGINES](https://cdn-ak-scissors.b.st-hatena.com/image/square/7448999e297603632b0528e505ab3a75dcce2dc7/height=288;version=1;width=512/https%3A%2F%2Fre-engines.com%2Fwp-content%2Fuploads%2F2020%2F12%2Flogo_flutter_1080px_clr.png)
image_pickerで取ってきた画像をCustomPaintで表示する - Qiita
import 'dart:ui' as ui; import 'package:flutter/material.dart'; import 'package:image_picker/image_picker.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: 'Flut
Flutter開発のためのDart入門（７）クラス② | スマホアプリ制作・開発会社を東京都内でお探しなら【株式会社イーディーエー】
前回の投稿に続き、今回もDartについて解説していきます。 引き続きクラスについて解説します。 抽象クラス 抽象クラスとは継承されることを前提として、処理内容を記述しないメソッド（抽象メソッド）を含むクラスです。 抽象クラス単体ではインスタンス化することはできません。 反対にインスタンス化できるクラスは具象クラスと呼びます。 抽象クラスを定義する際はabstractキーワードを指定します。 abstract class 抽象クラス名 { } 抽象メソッド 抽象クラスには抽象メソッドを定義できます。 抽象メソッドには処理内容を記述できません。 メソッド名()の後ろの{処理内容}の代わりにセミコロン;を記述します。 abstract class Shape { double getArea(); // 抽象メソッド } 継承 既存のクラスを元に新たなクラスを定義することを継承と呼びます。 また
DartでWebスクレイピング
name: "scraping" environment: sdk: '>=2.12.0 <3.0.0' dependencies: http: ^0.13.1 html: ^0.15.0 import 'package:http/http.dart' as http; import 'package:html/parser.dart' show parse; // main関数。非同期処理(await)を使用するのでasync。 void main() async { // 取得先のURLを元にして、Uriオブジェクトを生成する。 final url = 'https://zenn.dev/'; final target = Uri.parse(url); // 取得する。 final response = await http.get(target); // 下の行のコメントを外すこと
Flutter実践入門
📕書籍化お知らせ📕 本書が翔泳社様から「動かして学ぶ!Flutter開発入門」として出版されることになりました!! https://www.shoeisha.co.jp/book/detail/9784798177731 書籍化できましたのは、読者の皆様のご高評のおかげです。いつもご利用本当にありがとうございます！ 書籍の内容は、2023年4月15日の内容と概ね同じになっています。 ただし、書籍の方は、イラスト/手順の項番/キャプションなどが非常にわかりやすくなっており、プロジェクト形式でのサンプルソースコードも提供されます。 🚨有料化のお知らせ🚨 書籍化に伴う諸般の都合により、出版された部分の削除や非公開などはしないのですが、出版日に有料化をさせて頂く予定です。 今まで2年以上無料で公開をさせて頂いた状況もあり心苦しいのですが、ご理解頂けますと幸いです ⚠️⚠️⚠️翔泳社様の書籍
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flutter ローカルの画像を表示させサイズを指定 - Qiita
【Flutter】カスタマイズ描画（CustomPaint）のCanvas - Qiita
10 Flutter Hive Best Practices
Social Network for Programmers and Developers
mysql_utils example | Dart package