Flutter

【Flutter】dioのInterceptorでAPI通信の共通処理を実装する

こんにちは。エキサイト株式会社 モバイルアプリエンジニアの克です。 今回は、FlutterにおけるdioのInterceptorを利用したAPI通信時の共通処理の実装についてお話しします。 各種バージョン Flutter: 3.22.2 dio: 5.4.3+1 Interceptor dioはFlutterでHTTP通…

【Flutter】UIのイベントをデバウンスする

こんにちは。エキサイト株式会社 モバイルアプリエンジニアの克です。 今回は、FlutterにおいてUIのイベントをデバウンスする手法についてです。 デバウンスについて デバウンスとは、短時間に複数回のイベントが発生することを防ぐための手法です。 例えば…

Excite × iXIT TechCon 2024 にてネイティブ実装アプリの Flutter 化事例について発表しました!

エキサイト株式会社の@mthiroshiです。 エキサイトHD主催の社内テックカンファレンス「Excite × iXIT TechCon 2024」にて、登壇発表をしました。 「Excite × iXIT TechCon 2024」の詳細については、下記記事をご参照ください。 tech.excite.co.jp iOS / Andr…

【Flutter】wakelock_plus パッケージを使って画面スリープを無効にする

エキサイト株式会社の@mthiroshiです。 エキサイトホールディングス Advent Calendar 2023の13日目を担当します。 Flutter で画面スリープを無効にする(画面を常時点灯にする)wakelock_plus パッケージについて紹介します。 wakelock_plus とは wakelock_p…

iOS / Android ネイティブアプリから Flutter に移行するときに Pigeon を使ってデータマイグレーションする

エキサイト株式会社の@mthiroshiです。 エキサイトホールディングス Advent Calendar 2023の8日目を担当します。 エキサイトでは、 iOS / Android ネイティブアプリの Flutter によるリビルドを行ってきました。 ローカル DB でデータを管理するアプリの場合…

FlutterKaigi 2023 参加レポート

エキサイト株式会社の@mthiroshiです。 FlutterKaigi 2023に参加してきましたので、その内容をレポートします。 FlutterKaigi 2023の概要 聴講したセッション 基調講演「Flutter's 8 years journey」 「Flutter アプリにおけるテスト戦略の見直しと自動テス…

FlutterKaigi 2023 - Flutterで構築する漫画ビューア 補足

こんにちは。エキサイト株式会社 モバイルアプリエンジニアの克です。 このたび、FlutterKaigi 2023に登壇しました。 fortee.jp speakerdeck.com 今回は、当日お話しできなかった内容をいくつか補足したいと思います。 画像の保存場所 発表では画像の保存場…

【Flutter】Androidの課金APIを操作する前に利用可能判定を行う【in_app_purchase】

エキサイト株式会社の@mthiroshiです。 Flutterのアプリ内課金の実装には、 in_app_purchase パッケージを使います。 Androidで実装する際に、少し躓いた問題があったのでご紹介します。 動作環境は、下記のpubspec.ymlの内容です。 dependencies: in_app_pu…

FlutterKaigi 2023に登壇します

こんにちは。エキサイト株式会社 Androidエンジニアの克です。 この度はFlutterKaigi 2023に登壇させていただくことになりました。 登壇内容 2023年11月10日 (金) 16:30 ~ 17:10(40分) fortee.jp 内容は漫画ビューアのモバイルアプリをFlutterで開発する方…

【Flutter】RawAutocomplete 実装の検索フォームにおける候補ワードを取得する際の状態管理

エキサイト株式会社の@mthiroshiです。 FlutterでRawAutocompleteを使って、テキストの入力に応じて検索候補のワードを表示する、検索フォームを実装してみました。検索候補ワードは、APIから取得します。 下記が公式ドキュメントです。公式ドキュメントには…

【Flutter】Widgetのフェードイン・アウトのアニメーションUIを作る

エキサイトの武藤です。 FlutterにおけるWidgetのフェードイン・アウトアニメーションUIについて簡単に紹介します。 Visibilityの表示・非表示の場合 AnimatedSwitcherを使ったフェードイン・アウトのアニメーションUI FadeTransitionを使ったフェードイン・…

【Flutter】TextPainterでText Widgetのサイズを取得し、AnimatedContainerでアニメーションをつけたUIを実装する

エキサイト株式会社の武藤です。 FlutterでViewを構築するときに、Text Widgetのサイズが欲しいときがあります。今回は、Text WidgetのWidth、Heightの取得について紹介します。 また、求めたサイズを使ってアニメーションをつけたUIのサンプルを紹介します…

[Flutter] l10nの操作をRiverpodのProviderで行う

エキサイトの武藤です。 Flutterで多言語対応をする際、基本的にはWidget内でBuildContextからAppLocalizationsを呼び出して利用します。 しかし、複雑なロジックが必要な表示テキストの場合、Viewでそのロジックを書いてしまうとViewのコードが肥大化してし…

【Flutter】Rippleエフェクトを試す

エキサイトの武藤です。 FlutterのRippleエフェクトの挙動について紹介します。 Rippleの種類 ListViewのRipple表示 ListTile, 独自レイアウトの場合 Imageの上にTextを重ねたレイアウト まとめ 採用情報 参考記事 Rippleの種類 Button Widgetを例にRippleを…

【Flutter】freezed, json_annotation の基本的な使い方とTIPS

エキサイトの武藤です。 Flutter 開発を通して、freezed でのJSONの扱いに慣れてきました。 今回は freezed, json_annotation パッケージの基本的な使い方やTIPSをまとめていきます。 @JsonKey アノテーション name プロパティー defalutValue プロパティー …

FlutterおけるGoRouterで画面遷移時に値を渡す方法

エキサイト株式会社でモバイルアプリ開発に携わっている奥田です。 今回はGoRouterを使用する際に画面遷移時に値を渡す実装方法について記述します。 GoRouterの紹介 Navigator 2.0におけるFlutterのRoutingライブラリです。 pub.dev 画面定義 class App ext…

Flutter3.0.5を指定するとGithubActionsでiOSがビルドできない問題について

エキサイト株式会社でモバイルアプリ開発に携わっている奥田です。 今回はFlutter3.0.5へのアップデート作業の際にGithubActionsでiOSがビルドできない問題が発生しました。 その問題の解決策について記述していきます。 問題点 Flutter3.0.5へのアップデー…

Flutter2.10.0でAndroidアプリが次々とクラッシュしてしまうお話

エキサイト株式会社でモバイルアプリ開発に携わっている奥田です。 とあるAndroidアプリのFlutterへのリプレイス作業が終了し、リリースした際にクラッシュ報告が相次ぎました。今回はクラッシュの原因、対応した方法について記事にしていきます。 問題点 弊…

Flutterにおけるin_app_purchaseを使用した課金実装においてiOSが購入アイテムが0件の場合にハンドリングできない問題について

エキサイト株式会社の奥田です。 今回は下記に掲載しているライブラリin_app_purchaseを使用した際に購入アイテムが0件の場合にハンドリングができなかった問題の解消方法について記載していきます。 pub.dev 問題点 in_app_purchaseを使用している際に購入…

エキサイトメディア事業部で採用しているRiverpodの使用法

はじめに 現状まだまだネイティブからFlutterへの移行の途中であり、最初期の構成としてはViewModelを定義してViewModelをStateNotifierProviderで状態管理している変数をView側に通知するようにしていたり、View側のタップ処理を受け付けるようにしていまし…

Dart2.17でアップデートされたEnumについて

2.17以前のEnum enum Fruit { apple, orange, grape, } このようにメンバーを定義するだけで、Javaのように中に定数を入れるようにするためにはExtensionを定義してあげないといけませんでした extension FruitExt on Fruit { String get name { switch (thi…

Rxdartを使用して値の変化を他タブなど別画面に通知する方法

これは エキサイトホールディングス Advent Calendar 2021 21日目の記事です。 エキサイト株式会社の高野です。今回はFlutterにおける別画面への値渡しや通知をする方法についてです。 実装 まずはじめに通知を受ける変数として以下を定義します。 final hog…

iOSでネイティブ広告を出す際にIBOutletを繋げられない時の対処法

これは エキサイトホールディングス Advent Calendar 2021 18日目の記事です。 エキサイト株式会社の高野です。今回はFlutterにおけるネイティブ広告の話です。 はじめに 今回の記事はgoogle_mobile_ads(1.0.0)の話ですので他のライブラリを使っていたり、バ…

WebViewの高さをローディング時に動的に変える方法

はじめに 2021年度アドベントカレンダーの2日目の担当の高野です。メディア事業部のアプリではWebViewを使うことが多く、その備忘録として残します。 動作バージョン Flutter 2.5.1 Dart 2.14.0 webview_flutter 2.1.1 実装 今回はwebview_flutterを使用して…

state_notifierとfreezedのプロジェクトでMockitoを用いたunit test

エキサイト株式会社の高野です。 弊社では最近Flutterでテストを書き始めました。state_notifierとfreezedを用いたプロジェクトをどうやってテストしようか考えていた所Mockitoを見つけ、よさそうでしたので書いてみたコードの流れの紹介になります。 各バー…

TabBarの選択ボタンを中央寄せにするアニメーション付き無限スクロール化するTips2

エキサイト株式会社の高野です。 前回 TabBarの選択ボタンを中央寄せにするアニメーション付き無限スクロール化するTips を書いたのですが、また別の方法で実装しましたのでその方法を紹介します。 (前回と同様にTabBarをListViewで実装する際の一例です。) …

statusBarの表示非表示ハンドリング

エキサイト株式会社の高野です。 今回はFlutterを書いていく中でiOSでstatusBarが表示されない(消えてる)問題の解決に当たっていたのでその辺りについて書いていこうと思います。 環境 iOS: 14.5 Flutter: 2.0.6 Android Studio: 4.1.3 解決方法 先にXcodeの…

TabBarの選択ボタンを中央寄せにするアニメーション付き無限スクロール化するTips

こんにちは。 エキサイト株式会社の高野です。 今回はTabBarをListviewで実装することを前提にお話ししていくことを前提としていきます。 FlutterでTabBarを無限スクロール化する方法はいくつかあり、ライブラリでいうと infinite_listview や indexed_list_…

【Flutter】コピペで使える!ダイアログのデザイン集

はじめまして! エキサイト株式会社で長期インターンをしている井関です。 まだまだ、Flutterを勉強中ですが、アウトプットや繰り返し使えるためにどんどん書いていきます👍 目次 Widgetを作成する ①まるばつクイズ風(横に均等に並べる) <解説> ②3択クイズ…