Flutterで同期的にJava, Objective-Cのネイティブコードを呼び出す(2024年5月版)｜TechRacho by BPS株式会社
2024.05.20 Flutterで同期的にJava, Objective-Cのネイティブコードを呼び出す(2024年5月版) はじめに Flutterでネイティブな機能を呼び出すためにはMethodChannelを使用することが一般的ですが、 その場合非同期での処理が前提になります。 そのため頻繁に呼び出しが発生するような場面にはあまり向かなかったり、そもそも非同期処理だと使えない場面というのもありそうです。 今回はそんな状況に対応するためのネイティブコードの同期的な呼び出しについて考えます。 【そんな状況】 ロケールに応じたソートをしたい つい先日、文字列のロケールに応じたソートが必要になりました。 記事執筆時点では 文字列のロケールに応じたソートができる標準の機能はDartから提供されていない 公開されているパッケージにも該当するものがなさそう そうなるとネイティブで提供されている
Flutterのテキスト下線位置を調節する方法｜TechRacho by BPS株式会社
はじめに yosuke2です。 最近Flutterに触れていますが、触れ始めて月日が浅いためまだまだ知らないことがたくさんあります。 そんな中タイトル通りテキスト下線の位置を調節したいということがありました。 調べてもそこまで情報が無かったのでここに書いておこうと思います。 本題 まず、2021/12/06時点でFlutterのテキスト下線の位置を調節する正規の方法はありません。 そのためこの記事では疑似的にテキスト下線の位置を調節する方法を記載します。 text-underline-offset - CSS: カスケーディングスタイルシート | MDN 一応ウェブブラウザではこのようにtext-underline-offsetというものがあるため、今後Flutterにも追加される可能性は十分あるのではないかと思います。 GitHubでissueもあり議論されています。 Space bet
Flutter: RenderObjectWidgetを使いはみ出た分が切り取られるウィジェットを作る｜TechRacho by BPS株式会社
2021.12.10 Flutter: RenderObjectWidgetを使いはみ出た分が切り取られるウィジェットを作る 今回はこういう表示が出来るようになるウィジェットを作ってみたいと思います。 (Floating Action Buttonが半分切れてるが工事中マークが出ていない事に注目、さらに言えばDEBUGの帯もちょっと欠けてる) はじめに Flutterのウィジェットとそのレイアウトシステムは基本的にウィンドウ(画面)サイズに合わせてその中身をレイアウトするようになっており、ウィンドウサイズが小さくなれば中身もその分小さくレイアウトしようとします。 例えばこのようなアプリ のウィンドウサイズを小さくすれば中身もそれに応じてレイアウトされていきますが、 Flutterアプリは中身がウィンドウサイズより大きくならざるを得ない状況になった場合にブラウザでのHTML表示のように自動的
Flutter: 最小限のChangeNotifierProviderを自作してみる｜TechRacho by BPS株式会社
本記事ではproviderの一部機能を自作してみることで、Flutterにおける「ウィジェットが子孫にデータとサービスを提供するためのメカニズム」の理解を深めてみようと思います。 本記事で言及するFlutter 公式サイトの内容、記述は執筆時点(2021年8月)のものとなります はじめに Flutterでのアプリ開発においていわゆる「アプリの状態管理」はいつもHOTな話題であり、これまで様々な手法や概念、ライブラリが現れ、シンプルなものから大規模で複雑な状況まで様々な場面に応じて使い分けられて来ています。 Flutterの公式Webサイトでも状態管理について触れられており、アプリの状態管理については「Simple app state management」という章で具体的な例と共に述べられています。 さて、その「Simple app state management」を読みはじめると冒頭か
Flutter2.0から非推奨になったボタンと新しいボタンについて｜TechRacho by BPS株式会社
BPSの福岡拠点として一緒にお仕事させていただいております、株式会社ウイングドアのミノハラです。 去年の4月に入社して、主にFlutterを使ってスマホアプリ開発を行っています。 今月の初めにFlutterはメジャーバージョンが2.0にアップデートされました。 参考: Flutter 2.0.0 release notes - Flutter いままでの開発で使っていたボタンのウィジェットが今回のアップデートによって非推奨になってしまいました。 そこでどのように変わったのかまとめていきたいと思います。 なにが非推奨になったのか RaisedButton・FlatButton・OutlineButtonの3つです。 Flutter1.22から変更はありましたが、今回のアップデートにより、非推奨となりました。 この3つのボタンが非推奨になり、以下のボタンを使ってくださいとなっています。 旧ボタ
ウイングドアに入社して初めて一から集中して案件に携わった振り返り｜TechRacho by BPS株式会社
BPSの福岡拠点として一緒にお仕事させていただいております、株式会社ウイングドアのミノハラです。 去年の4月に入社いたしました。 入社してから半年ほどは、研修や既存の案件に着手することが主だったのですが、 10月から新規の案件に携わる形になり、先日その案件が概ね完了いたしましたので、 よかったことや改善点について振り返っていきます。 よかったこと お客様とのやりとりを経験できた点 今までは直接私がお客様とのやりとりを行っていませんでしたが、今回は私自身でお客様とのやりとりを行い、いい経験になりました！ お客様とのやりとりは主にSlackを使っていたのですが、文章を考えるのが苦手なので、先輩社員に確認をいただいておりました。 敬語や文章構成などは社会人としての必須スキルなので、先輩社員の文章などを見て学んでいきます！ 初めて一から案件に取り組めた 先述したとおり、入社してから一つの案件を最初
入社して1年経ったのでウイングドアについて紹介してみる｜TechRacho by BPS株式会社
BPSの福岡拠点として一緒にお仕事させて頂いてます、株式会社ウイングドアの田上と申します。 普段はWeb Developerとして開発業務を担当させていただいております🐈 2020年の12月をもちまして、ウイングドアに入社させて頂いてから1年が経ちましたので、 自分の感想も含めつつウイングドアがどんな会社かについてご紹介させていただこうと思います。 ウイングドアという会社について 弊社では、主に受託開発をメインとして行っています。 案件の種類は様々で、Webアプリ開発からモバイルアプリ開発まで幅広く請け負っております。 お客様との距離が近く、フレンドリーにコミュニケーションを取りながらお仕事を進めていくことが特徴です。 最近ではモバイルアプリ開発にFlutterを採用するなど、新しい技術についても良いものは積極的に取り入れていこうという風土があり、開発者フレンドリーな面があります。 ウイ
【Flutter】shared_preferencesパッケージではネイティブアプリで保存した値を取得できない｜TechRacho by BPS株式会社
こんにちは。 BPSの福岡拠点として一緒にお仕事させてもらっています、ウイングドアのウメバヤシです。 Flutterでローカルに値を保存したい時はFlutter公式のshared_preferencesパッケージを使うと思いますが、実はこのパッケージではネイティブアプリをリプレイスする際に、以前のネイティブアプリバージョンで保存していたローカルデータまでは取得することができません。 ⚓ 前提 対象のshared_preferencesパッケージは現時点で最新Verの0.5.12+4です。 shared_preferences | Flutter Package - Pub.Dev ⚓ なぜネイティブアプリで保存されたデータが取得できないのか？ 結論からいうと、shared_preferencesパッケージでは読み書きの際に「flutter.」というプレフィックスをキーに付与してデータを扱っ
【Flutter】Providerのほぼ上位互換、Riverpodの基本的な使い方｜TechRacho by BPS株式会社
Providerとの違い Providerは直感的で使いやすく、かつ高機能で非常に優れたパッケージですが、以下のような不都合もありました。 この問題は僕も実際に使用していて要所要所で感じていました🤔 Providerで包んだツリー以外からアクセスしようとすると実行時にProviderNotFoundExceptionが発生する。 この問題に関しては確実に防ぐ方法がなく、コーディング中に気をつけて使うしかありませんでした。 同じ型を複数同時に使用できない ProviderはWidgetツリーを遡って最寄りの型を探してくるので、複数同じ型を使用することができませんでした。（使用できるけどWidgetツリーの中で一番近い型にしかアクセスできない） Widgetツリーが肥大化する Provideするオブジェクトが増えていくと、DevToolsなどで確認する際にWidgetツリーが肥大化して少し見
Flutter: window.devicePixelRatioを上書きしてUIを巨大化する｜TechRacho by BPS株式会社
突然ですが、通常アプリを作成するとUIはこのぐらいの大きさかと思いますが このように全体を大きくしたくなったことはありませんでしょうか。 これは1つ1つの文字やボタンの大きさを丹念に設定していったわけではなく、昨今のWebブラウザに搭載されているズーム機能 と似たような形で、Flutterの描画全体を大きくする事で実現しています。 今回はこれのやり方をご紹介致します。 注意 本記事で取り上げた内容はおそらくFlutter SDKの本来想定された使い方の範囲を超えており、実装に際して使用した手段もプロダクションコードに採用すべきものではありません。 あくまでFlutterの特性上こういうことも出来る、という一例としてお楽しみ下さい。 環境 執筆時点のstableを使います。 $ flutter --version Flutter 1.20.3 • channel stable • https
Flutter: popUntilで「Bad state: No element」となった時に確認すること｜TechRacho by BPS株式会社
2020.08.12 Flutter: popUntilで「Bad state: No element」となった時に確認すること BPSの福岡拠点として一緒にお仕事をさせていただいています、株式会社ウイングドアのウメバヤシです。 最近は主にFlutterでのアプリ開発に携わっております。 複数の画面を一気に戻りたい場合に、おもむろにpopUntilメソッドを呼び出した時でした。 Bad state: No elementとなって戻れずに、「あれ？」ってなったことがあったので、 今回はそのときの解決法を紹介しようと思います。 先に結論 結論から言うと、今回の原因はpushした時にRouteSettingsを指定していなかったことが原因でした。 参考: RouteSettings class - widgets library - Dart API ほとんどのルーティングをMaterialAp
【Flutter】アイコンにオリジナル画像を設定する方法｜TechRacho by BPS株式会社
こんにちは！ BPSの福岡拠点として一緒にお仕事をさせていただいています、株式会社ウイングドアのウメバヤシです。 iOSやAndroidのアプリで下タブ（BottomNavigationBarやUITabBar）などを実装することはよくあるかと思います。 その際、アイコンをオリジナルの画像にすることも多いと思いますが、通常は端末ごとに適正サイズの画像ファイルを何サイズか組み込みます。 ただ、Flutterではちょっと違った方法で設定した方がスマートそうだったので、今回はその方法を紹介します。 画像ファイルを設定するだけじゃダメなの？ iOSやAndroidネイティブだと端末の画素密度ごとに適正サイズの画像ファイルを設定すると思いますが、 FlutterではUIもコードで書いて作成していくので、アイコン画像をカスタムするときなども、 コード中に画像の表示サイズを数値で指定してあげないと、いい
Flutter StudioでアプリのUIをつくろう！｜TechRacho by BPS株式会社
こんにちは。ウイングドアの田上です🐈 最近弊社ではFlutter™の機運が高まっておりまして社内勉強会も行われています💪 FlutterではコードでUIを組まないといけないので、なかなかむずかしいな〜😰と思っていたところ、 Flutter Studioという便利なツールがあったのでご紹介させていただきます❗️ Flutter Studioとは Webブラウザ上でFlutterのUIを組むことができるツールです。 マウス操作でWidgetの配置を行ってレイアウトを作成することができます。 Flutter StudioのUI説明 Flutter Studio にアクセスをすると、まずこの画面が表示されます。 ①Widget一覧 Flutterで使えるWidgetが選択できます。 レイアウトを組む際は、ここからWidgetを選択して、シミュレータへとドラッグ&ドロップをします。 ②シミュレ
Flutterアニメーション、時々PWA+TWAなど｜TechRacho by BPS株式会社
BPSの福岡拠点として一緒にお仕事させて頂いてます、株式会社ウイングドアのアリタです。 だいぶ前の振り返りになるのですが、1月の終わりに福岡でFlutter勉強会があり、そこでFlutterのアニメーションについて発表させていただきました。 （実は、2月1日に開催された株式会社ウイングドアとM社の合同勉強会でも同じ資料を利用していたりします・・） Flutter を触ってみた所感 FlutterはWidgetの組み合わせで画面を構築するのですが、 https://flutter.dev/docs/development/ui/widgets にWidgetのパーツが用意されているので、シンプルなアプリであればWidgetの組み合わせだけで簡単にアプリが出来ます（便利）。 ただ、最初はdartファイル（FlutterはDart言語で開発します）やリソースの配置に悩むので BLoC（Busin
Flutter: 標準ウィジェットをコピーして改造する｜TechRacho by BPS株式会社
追記（2020/07/20） 記事投稿から1年7ヶ月、本記事で題材にしたスクロールバーの太さの変更についてカスタマイズ可能になるコミットが3日前にmasterへマージされました。 https://github.com/flutter/flutter/commit/1840b7121a6a721484afca300265c7866e82dc77 flutter.ioより 突然ですがFlutterは面白いですよ！ クロスプラットフォーム開発ファンとして最近の一押しです。 12/5 Flutter Live '18 で 1.0.0 が発表されました🎊 そこでFlutterでちょっとアドベントカレンダー記事を書いてみます。 はじめに モバイルアプリ開発においては、画面上にはボタンやツールバーなど様々なUIウィジェットを配置します。 iOS/AndroidのSDKも標準で豊富なUIウィジェットを持
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
