気をつけたい！Desktop対応で陥りやすい罠とその対策

気をつけたい！Desktop対応で陥りやすい罠とその対策後藤孝輔

自己紹介 - 後藤孝輔 (@Gotchi0001) - 2023年新卒でスタディプラス株式会社に入社 - クライアントグループでFlutterアプリの開発 2

はじめに 3

Studyplusについて MISSON - 学ぶ喜びをすべての人へ SERVICE - 学習管理型SNS - 受験生の2人に1人が利用 -
iOS/Android/Webで展開 4

StudyplusアプリのFlutterリプレイス 5 2022 プロジェクト開始

Mobileである程度開発したアプリをWebに対応 6 2023/12 2024/11 2022 プロジェクト開始 Studyplus Webリプレイス完了 Studyplus Androidリプレイス完了

このセッションについて - MobileのFlutterアプリをWeb対応した際の事例を元に実際に直面した課題とその解決策をお話しします - ※Desktop対応はWebも含む広義の意味で使用しています - 基本はDesktop全般に関わる話、マルチデバイス対応時に役立つポイントも含みます 7

目次 • 入力方法について ◦ 文字数制限をオーバーしても入力できてしまう ◦ 横スクロールができない • 画面レイアウトについて ◦
BottomNavigationBarだと見栄えが悪い ◦ 左右の余白が足りずコンテンツが見づらい ◦ Gridのアイテムが大きく表示されてしまう • Web特有の課題 ◦ iOS/Safariブラウザでの問題 ▪ autofocusでキーボードが表示されない ▪ スワイプバック時に余分なページが表示される ◦ パッケージ周りの対応 ▪ GoogleSignIn ▪ FirebaseCrashlytics ▪ Drift ◦ 絵文字がうまく表示されない • その他 ◦ Widgetのデフォルト表示が違う • まとめ 9

目次 - 入力方法について - 文字数制限をオーバーしても入力できてしまう - 横スクロールができない - 画面レイアウトについて -
BottomNavigationBarだと見栄えが悪い - 左右の余白が足りずコンテンツが見づらい - Gridのアイテムが大きく表示されてしまう - Web特有の課題 - iOS/Safariブラウザでの問題 - autofocusでキーボードが表示されない - スワイプバック時に余分なページが表示される - パッケージ周りの対応 - GoogleSignIn - FirebaseCrashlytics - Drift - 絵文字やフォントがうまく表示されない - その他 - Widgetのデフォルト表示が違う - まとめ 10

Mobileプラットフォームの入力方法操作 - タッチスクリーン文字入力 - ソフトウェアキーボード 11 入力方法の違い

Desktopプラットフォームの入力方法操作 - マウス - トラックパッド - タッチスクリーン文字入力 -
ハードウェアキーボード 12 入力方法の違い

文字数制限のあるTextField 14 文字数制限をオーバーしても入力できてしまう問題 TextField( …, maxLength: 4, keyboardType: TextInputType.number, inputFormatters:
[FilteringTextInputFormatter.digitsOnly], ),

Desktopプラットフォームで確認すると... 15 文字数制限をオーバーしても入力できてしまう問題

入力言語を切り替えた際に発生...なぜ？ 16 文字数制限をオーバーしても入力できてしまう問題

問題の要因 17 文字数制限をオーバーしても入力できてしまう問題これが関係してそう？ https://api.flutter.dev/flutter/material/TextField-class.html

maxLengthEnforcement maxLengthをどのように適用するかを指定するプロパティ MaxLengthEnforcement 18 文字数制限をオーバーしても入力できてしまう問題 https://api.flutter.dev/flutter/services/MaxLengthEnforcement.html

この辺が関係してそう 19 https://github.com/flutter/flutter/blob/728cedc62a795efa6eadd45a3a5d194fcd76023e/packages/flutter/lib/src/services/text_formatter.dart#L525 文字数制限をオーバーしても入力できてしまう問題

maxLengthEnforcementにenforcedを設定 TextField( …, maxLength: 4, keyboardType: TextInputType.number, inputFormatters: [FilteringTextInputFormatter.digitsOnly] maxLengthEnforcement:
MaxLengthEnforcement.enforced, ), 20 文字数制限をオーバーしても入力できてしまう問題

対応後 21 文字数制限をオーバーしても入力できてしまう問題

横スクロール 24 横スクロールができない問題

マウスでスクロールできる手段がない 25 横スクロールができない問題 - マウスホイールでのスクロール❌ - ドラッグによるスクロール❌

対応 - マウスホイールによる横スクロールを可能にする →難しかったため断念 - マウスでドラッグによるスクロールを可能にする 26 横スクロールができない問題

ドラッグによるスクロール - Flutter2.5からデフォルトでドラッグスクロール可能なデバイスに変更が入っていた https://docs.flutter.dev/release/breaking-changes/default-scroll-behavior-drag#summary 27 横スクロールができない問題

マウスによるドラッグスクロールを有効化 MaterialApp( …, scrollBehavior: const MaterialScrollBehavior().copyWith( dragDevices: { PointerDeviceKind.mouse, PointerDeviceKind.touch,
}, ), ), 28 横スクロールができない問題

対応後 29 横スクロールができない問題

画面レイアウトについて 30

BottomNavigationBar 複数の主要な画面や機能を持つアプリ ↓ 機能間を直感的でわかりやすく、素早く移動したい ↓ BottomNavigationBarを採用 33 BottomNavigationBarだと見栄えが悪い問題

そのままDesktopで使うと... 34 BottomNavigationBarだと見栄えが悪い問題

使い勝手が悪くなる 35 BottomNavigationBarだと見栄えが悪い問題

NavigationRail https://www.youtube.com/watch?v=y9xchtVTtqQ https://api.flutter.dev/flutter/material/NavigationRail-class.html 36 BottomNavigationBarだと見栄えが悪い問題

NavigationRailを導入 38 BottomNavigationBarだと見栄えが悪い問題

Mobileプラットフォームでの表示 39 BottomNavigationBarだと見栄えが悪い問題

画面サイズに応じてNavigationを切り替える - M3のWindow class(width)を基準に分岐 - NavigationBarと NavigationRailを出し分け - NavigationRailのextendedと
labelTypeの変更 40 Scaffold( body: Row( children: [ if (screenSize != ScreenSize.compact) NavigationRail( extended: screenSize == ScreenSize.expanded labelType: (screenSize == ScreenSize.medium) ? NavigationRailLabelType.none : null, ), Expanded( child: child, ), ], ), bottomNavigationBar: screenSize == ScreenSize.compact ? NavigationBar(...) : null, ), https://m3.material.io/foundations/layout/applying-layout/window-size-classes#4ee6b7bb-864a-440c-9903-f738cc94fd58 BottomNavigationBarだと見栄えが悪い問題

アダプティブなNavigation 41 BottomNavigationBarだと見栄えが悪い問題

BottomNavigationBarだと見栄えが悪い - 左右の余白が足りずコンテンツが見づらい - Gridのアイテムが大きく表示されてしまう - Web特有の課題 - iOS/Safariブラウザでの問題 - autofocusでキーボードが表示されない - スワイプバック時に余分なページが表示される - パッケージ周りの対応 - GoogleSignIn - FirebaseCrashlytics - Drift - 絵文字やフォントがうまく表示されない - その他 - Widgetのデフォルト表示が違う - まとめ 42 →　デザイン要件周りの問題 - NavigationRail最下部への要素配置 - サイドメニューの実装

デザイナーさんの要望 44 NavigationRail最下部への要素配置問題

デザイナーさんの要望 45 NavigationRail最下部への要素配置問題

trailingプロパティを使ってみる NavigationRail( selectedIndex: selectedIndex, destinations: [...], onDestinationSelected: (value) {...}, trailing:
// これを使ってみる ); 46 理想 NavigationRail最下部への要素配置問題

イメージ：Material DesignのWebサイト 47 https://m3.material.io/

思ってたのと違う 48 理想現実 NavigationRail( selectedIndex: selectedIndex, destinations: [...], onDestinationSelected:
(value) {...}, trailing: Row( children: [ IconButton( onPressed: () {}, icon: const Icon(Icons.account_circle), ), const SizedBox( width: 8, ), const Text('プロフィール '), ], ), ); NavigationRail最下部への要素配置問題

思ってたのと違う 49 理想現実 NavigationRail( selectedIndex: selectedIndex, destinations: [...], onDestinationSelected:
(value) {...}, trailing: Row( children: [ IconButton( onPressed: () {}, icon: const Icon(Icons.account_circle), ), const SizedBox( width: 8, ), const Text('プロフィール '), ], ), ); NavigationRail最下部への要素配置問題

最下部に配置するには... 50 NavigationRail最下部への要素配置問題 NavigationRail ( selectedIndex: selectedIndex , destinations: [...],
onDestinationSelected: (value) {...}, trailing: Expanded( child: Container( color: Colors.orangeAccent, alignment: Alignment.bottomCenter, width: 256 - 16 * 2, child: Row( crossAxisAlignment: CrossAxisAlignment.center, children: [ IconButton( onPressed: () {}, icon: const Icon(Icons.account_circle), ), const SizedBox( width: 16, ), const Text('プロフィール'), ], ), ), ), ); ←Expandedで伸ばして ←幅を広げて

最下部に配置するには... 51 NavigationRail最下部への要素配置問題 NavigationRail ( selectedIndex: selectedIndex , destinations: [...],
onDestinationSelected: (value) {...}, trailing: Expanded( child: Container( color: Colors.orangeAccent, alignment: Alignment.bottomCenter, width: 256 - 16 * 2, child: Row( crossAxisAlignment: CrossAxisAlignment.center, children: [ IconButton( onPressed: () {}, icon: const Icon(Icons.account_circle), ), const SizedBox( width: 16, ), const Text('プロフィール'), ], ), ), ), ); ←ここも可変にする必要がある

最下部に配置する場合 - そのほかの方法についてもコードが複雑化してしまう - FlutterのNavigationRailにおいてはその位置に配置することが想定されていない 52 NavigationRail最下部への要素配置問題

最終的に... デザイナーさんに相談 →一番上に配置するデザインに変更 53 最下部への要素配置がうまくいかない問題

デザイナーさんの要望 55 サイドメニューの実装問題

デザイナーさんの要望 56 サイドメニューの実装問題

どう実現する？ 57 サイドメニューの実装問題

ここからDrawerを出せればいけそう？ 58 サイドメニューの実装問題

Drawerを表示させてみる 59 サイドメニューの実装問題

NavigationRailに重なる形で出入りしてしまう 60 サイドメニューの実装問題

問題となった点 - Drawerが出入りする際にNavigationRailに重なってしまう - Drawerのアニメーション 61 サイドメニューの実装問題

Drawerが出入りする際にNavigationRailに重なってしまう - Stackを使って無理やり解決できなくは無いが、コードが複雑化してしまう 62 サイドメニューの実装問題 Stack( children: [ Row(
children: [ switch (screenSize) { ScreenSize.compact => const SizedBox.shrink(), ScreenSize.medium => const SizedBox( width: 80, ), ScreenSize.expanded => const SizedBox( width: 256, ), }, Expanded( child: Scaffold( key: homeScaffoldKey, drawer: const HomeDrawer(), drawerEdgeDragWidth: 0, body: child, bottomNavigationBar: screenSize == ScreenSize.compact ? HomeNavigationBar( currentPage: currentPage, ) : null, ), ), ], ), if (screenSize != ScreenSize.compact) Row( children: [ HomeNavigationRail( currentPage: currentPage, ), const Spacer(), ], ), ], ) ←NavigationRailの幅分スペースを開ける必要

Drawerのアニメーション - 無くしたりカスタムしたりするのが厳しそう - https://github.com/flutter/flutter/issues/47316 63 サイドメニューの実装問題

最終的に... デザイナーさんに相談 →PopupMenuで表示する形に落ち着いた 64 サイドメニューの実装問題

Desktopに対応したNavigation 65 BottomNavigationBarだと見栄えが悪い問題

左右の余白 67 左右の余白が足りずコンテンツが見づらい問題

左右の余白 68 左右の余白が足りずコンテンツが見づらい問題

左右の余白 69 左右の余白が足りずコンテンツが見づらい問題 class CreateStudyRecordScreen extends StatelessWidget { const CreateStudyRecordScreen({super.key});
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(...), body: Padding( padding: EdgeInsets.symmetric( horizontal: 16.0, ), child: ..., ), ); } }

左右の余白 70 左右の余白が足りずコンテンツが見づらい問題 class CreateStudyRecordScreen extends StatelessWidget { const CreateStudyRecordScreen({
super.key}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(...), body: Padding( padding: EdgeInsets.symmetric( horizontal: 16.0, ), child: ..., ), ); } }

そのままDesktopプラットフォームに持ってくると... 71 左右の余白が足りずコンテンツが見づらい問題

コンテンツが見づらくなってしまう 72 左右の余白が足りずコンテンツが見づらい問題

breakpoints_mqを導入 https://pub.dev/packages/breakpoints_mq 73 左右の余白が足りずコンテンツが見づらい問題

Material Designのbreakpointを元に値を分岐 74 左右の余白が足りずコンテンツが見づらい問題 enum BreakpointScreenSize { /// 0~599 extraSmall,
/// 600~904 smallScaleBody , /// 905~1239 smallFixBody , /// 1240~1439 medium, /// 1440~ large, } static double margin(double width) { final size = screenSize(width); switch (size) { case BreakpointScreenSize. extraSmall: return 16; case BreakpointScreenSize. smallScaleBody : return 32; case BreakpointScreenSize. smallFixBody : return (width - 840) / 2; case BreakpointScreenSize. medium: return 200; case BreakpointScreenSize. large: return (width - 1040) / 2; } } https://github.com/koji-1009/breakpoints_mq/blob/2.1.2/lib/src/ext/breakpoints_enum_ext.dart ※弊社ではMaterial Design2のバージョンを利用

breakpointMarginの設定 75 左右の余白が足りずコンテンツが見づらい問題 class CreateStudyRecordScreen extends StatelessWidget { const CreateStudyRecordScreen({
super.key}); @override Widget build(BuildContext context) { final margin = MediaQuery.of(context).breakpointMargin; return Scaffold( appBar: AppBar(...), body: Padding( padding: EdgeInsets.symmetric( horizontal: margin, ), child: ..., ), ); } }

before 76 左右の余白が足りずコンテンツが見づらい問題

after 77 左右の余白が足りずコンテンツが見づらい問題

導入後 78 左右の余白が足りずコンテンツが見づらい問題

アイテムがグリッド状に並ぶ場合 80 Gridのアイテムが大きく表示されてしまう問題

アイテムがグリッド状に並ぶ場合 81 Gridのアイテムが大きく表示されてしまう問題

アイテムがグリッド状に並ぶ場合 82 GridView.builder( gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 4, ), itemCount:
bookshelfMaterials.length, itemBuilder: (context, index) { return BookshelfItem(...); } ) Gridのアイテムが大きく表示されてしまう問題

そのままDesktopプラットフォームに持ってくると... 83 Gridのアイテムが大きく表示されてしまう問題

一つ一つが必要以上に大きく表示されてしまう 84 Gridのアイテムが大きく表示されてしまう問題

列数を画面幅に応じて可変に 85 const materialWidth = 150; extension BoxConstraintsExt on BoxConstraints
{ int get crossAxisCount { return maxWidth ~/ materialWidth; } } ... LayoutBuilder( builder: (context, constraints) { return GridView.builder( gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: constraints.crossAxisCount, ), itemCount: bookshelfMaterials.length, itemBuilder: (context, index) { return BookshelfItem(...); } } Gridのアイテムが大きく表示されてしまう問題

before 86 Gridのアイテムが大きく表示されてしまう問題

after 87 Gridのアイテムが大きく表示されてしまう問題

画面レイアウトデモ 88

Adaptive and responsive design 89 https://docs.flutter.dev/ui/adaptive-responsive

Web特有の問題 90

質問 91

FlutterでWebアプリを作ったことがある方🙋 92

BottomNavigationBarだと見栄えが悪い - 左右の余白が足りずコンテンツが見づらい - Gridのアイテムが大きく表示されてしまう - Web特有の課題 - iOS/Safariブラウザでの問題 - autofocusでキーボードが表示されない - スワイプバック時に余分なページが表示される - パッケージ周りの対応 - GoogleSignIn - FirebaseCrashlytics - Drift - 絵文字がうまく表示されない - その他 - Widgetのデフォルト表示が違う - まとめ 93

WebアプリをMobileのブラウザで表示 95 iOS/Safariブラウザでの問題

キーボードが表示されない - autofocusを設定しても自動でキーボードが表示されない →カーソルをタップしないとキーボードが開かない 96 iOS/Safariブラウザでの問題>autofocus時にキーボードが表示されない問題

issueを探しに行く🏃 97 https://github.com/flutter/flutter/issues iOS/Safariブラウザでの問題>autofocus時にキーボードが表示されない問題

issueを発見 https://github.com/JedWatson/react-select/issues/3501 98 iOS/Safariブラウザでの問題>autofocus時にキーボードが表示されない問題

issueによると... - なぜキーボードが出ないのか - Appleが望んでいないらしい 🍎 - https://bugs.webkit.org/show_bug.cgi?id=195884#c4 99 iOS/Safariブラウザでの問題>autofocus時にキーボードが表示されない問題

WebかつiOSの場合のみautofocusをfalseに設定する final autoFocus = !(kIsWeb && defaultTargetPlatform == TargetPlatform.iOS); …
TextField( …, autofocus: autoFocus, ), 100 autofocus時にキーボードが表示されない問題

対応後 101 autofocus時にキーボードが表示されない問題

余分なページが表示される - 画面左端から右側へスワイプする動作を行った時に発生 - 本来表示されるはずのない余分なページが表示される 102 iOS/Safariブラウザでの問題>スワイプバック時に余分なページが表示される問題

issueを探しに行く🏃 103 https://github.com/flutter/flutter/issues iOS/Safariブラウザでの問題>スワイプバック時に余分なページが表示される問題

issueを発見 104 https://github.com/flutter/flutter/issues/114324 iOS/Safariブラウザでの問題>スワイプバック時に余分なページが表示される問題

暫定対応 - 不要なスワイプを防止する JavaScriptファイルを index.htmlに追加 105 https://github.com/flutter/flutter/issues/114324#issuecomment-1725887254 iOS/Safariブラウザでの問題>スワイプバック時に余分なページが表示される問題

対応後 106 iOS/Safariブラウザでの問題>スワイプバック時に余分なページが表示される問題

GoogleSignIn(Mobile) 108 パッケージ周りの対応 >GoogleSignIn

GoogleSignInボタン(Mobile) ボタンのUI - flutter_signin_buttonのSignInButton - https://pub.dev/packages/flutter_signin_button 109 パッケージ周りの対応 >GoogleSignIn SignInButton(
Buttons.Google, text: text, onPressed: () async { final googleSignIn = GoogleSignIn( scopes: [ 'email', ], clientId: googleClientId , ); if (await googleSignIn.isSignedIn()) { await googleSignIn.signOut(); } final user = await googleSignIn.signIn(); if (user == null) { return; } final googleAuthentication = await user.authentication ; final idToken = googleAuthentication. idToken; ..., } )

GoogleSignInボタン(Mobile) 110 パッケージ周りの対応 >GoogleSignIn SignInButton( Buttons.Google, text: text, onPressed: ()
async { final googleSignIn = GoogleSignIn( scopes: [ 'email', ], clientId: googleClientId , ); if (await googleSignIn.isSignedIn()) { await googleSignIn.signOut(); } final user = await googleSignIn.signIn(); if (user == null) { return; } final googleAuthentication = await user.authentication ; final idToken = googleAuthentication. idToken; ..., } ) サインインフローの開始 - google_sign_inのsignIn()メソッド - https://pub.dev/packages/google_sign_in

Webで動作させると... →signIn()メソッドはWebでdeprecatedなので代わりの方法にしてね https://pub.dev/packages/google_sign_in_web#migrating-to-v011-and-v012-google-identity-services 111 うまくいかず、コンソールに以下が表示される

google_sign_in_web - ユーザー独自のSign Inボタンを作成する機能や、Sign Inのフローを開始するAPI を提供しなくなった https://github.com/flutter/packages/tree/main/packages/google_sign_in/google_sign_in_web#what-happened-to-the-signin-method-on-the-web 112 パッケージ周りの対応 >GoogleSignIn

代わりにrenderButton()を使う 113 パッケージ周りの対応 >GoogleSignIn class SignInWithGoogleButton extends HookConsumerWidget { const
SignInWithGoogleButton({ super.key, ..., }); ... @override Widget build(BuildContext context, WidgetRef ref) { ... return (GoogleSignInPlatform.instance as GoogleSignInPlugin).renderButton(); } } renderButton(): https://github.com/flutter/packages/blob/main/packages/google_sign_in/google_sign_in_web/lib/google_sign_in_web.dart#L188

サインインフロー完了後のユーザー情報取得 signIn()メソッドの場合 →戻り値として取得 114 final user = await googleSignIn.signIn(); if
(user == null) { return; } final googleAuthentication = await user.authentication; final idToken = googleAuthentication.idToken; ..., パッケージ周りの対応 >GoogleSignIn

サインインフロー完了後のユーザー情報取得 renderButton()の場合 →GoogleSignIn.onCurrentUserChangedのStreamを監視 115 ref .watch(googleSignInProvider(googleClientId: googleClientId)) .onCurrentUserChanged .listen( (GoogleSignInAccount?
user) async { if (user == null) { return; } final googleAuthentication = await user.authentication; final idToken = googleAuthentication.idToken; ..., } パッケージ周りの対応 >GoogleSignIn ※googleSignInProviderはGoogleSingInクラスのインスタンスを公開

対応後 116 パッケージ周りの対応 >GoogleSignIn

Firebase Crashlytics - クラッシュログの取得に利用 117 パッケージ周りの対応 >FirebaseCrashlytics https://pub.dev/packages/firebase_crashlytics

Webは対象プラットフォームに含まれていない 118 パッケージ周りの対応 >FirebaseCrashlytics https://pub.dev/packages/firebase_crashlytics

issueはあるが、対応目処は立っていない 119 https://github.com/firebase/flutterfire/issues/1693

Sentryを導入 120 パッケージ周りの対応 >FirebaseCrashlytics https://sentry.io/welcome/

Sentryを導入 - Flutter側のissue内で代替として名前が上がっていた - https://github.com/firebase/firebase-js-sdk/issues/710 - sentry_flutter - https://pub.dev/packages/sentry_flutter -
docs - https://docs.sentry.io/platforms/flutter/ 121 パッケージ周りの対応 >FirebaseCrashlytics

Drift - Flutter、Dart向けのデータ永続化ライブラリ - https://pub.dev/packages/drift →弊社では教材情報などの永続化に利用 122 パッケージ周りの対応 >Drift

Drift - Flutter、Dart向けのデータ永続化ライブラリ - https://pub.dev/packages/drift →v2.9.0から正式にWebサポート 123 パッケージ周りの対応 >Drift https://drift.simonbinder.eu/platforms/web/

DriftのWeb対応 - ローカル環境では問題なく動作した - 本番環境にデプロイすると、期待通りに動作しない →解決に至らず見送る判断に 124 パッケージ周りの対応 >Drift

絵文字を含んだ文章 126 絵文字がうまく表示されない問題

白黒で表示されてしまう 127 絵文字がうまく表示されない問題

絵文字のフォント表示が失敗してそう？ 128 絵文字がうまく表示されない問題

fallbackFontsを設定 - 表示に失敗した場合のフォントを定義 - TextStyleのfontFamilyFallbackに設定 final _fallbackFonts =
[ GoogleFonts.notoColorEmoji().fontFamily ?? '', ]; ... // themeは任意のTextTheme theme.copyWith( displayLarge: theme.displayLarge?.copyWith( fontFamilyFallback: _fallbackFonts, ), displayMedium: theme.displayMedium?.copyWith( fontFamilyFallback: _fallbackFonts, ), ..., ); 129 絵文字がうまく表示されない問題

対応後 130 絵文字やフォントがうまく表示されない問題

その他 131

並び替え可能なリスト 133 Widgetのデフォルト表示が違う問題

Desktopプラットフォームで表示すると... 134 Widgetのデフォルト表示が違う問題

アイコンが二つ表示されている？ 135 Widgetのデフォルト表示が違う問題

該当箇所の実装 136 Widgetのデフォルト表示が違う問題 ReorderableListView .builder( itemBuilder: (context, index) { final
category = categories. value[index]; return Column( key: Key(category.userCategoryId .toString()), children: [ ListTile( ..., title: Text(category.categoryName), trailing: const Icon( Icons.drag_handle, ), onTap: () {...} ), const Divider(), ], ); } ) drag_handle一個しか無いよなぁ...

ReorderableListViewの実装を見ると https://github.com/flutter/flutter/blob/main/packages/flutter/lib/src/material/reorderable_list.dart#L157 137 Widgetのデフォルト表示が違う問題これか...？でもMobileでは上手く表示されてたよな

ReorderableListViewの実装を見ると 138 Widgetのデフォルト表示が違う問題 Desktopだけ分岐入ってた！ ← drag_handleいた https://github.com/flutter/flutter/blob/main/packages/flutter/lib/src/material/reorderable_list.dart#L333

buildDefaultDragHandlesをfalseに設定 - ListTileのtrailingにIconを設定 ReorderableListView.builder( buildDefaultDragHandles: false, itemBuilder: (context, index) {
return ListTile( ..., trailing: ReorderableDragStartListener( index: index, child: const Icon( Icons.drag_handle, ), ), ); } ) 139 Widgetのデフォルト表示が違う問題

対応後 140 Widgetのデフォルト表示が違う問題

Widgetのプラットフォームごとの差分 - 該当のWidgetの実装を確認 - TargetPlatformによる分岐で観測 →実装をいちいち見ていくしかないのか？ 141 Widgetのデフォルト表示が違う問題

小ネタ：仕様差分の探し方 142 Widgetのデフォルト表示が違う問題 https://api.flutter.dev/flutter/flutter_test/TargetPlatformVariant-class.html

小ネタ：仕様差分の探し方 143 Widgetのデフォルト表示が違う問題

まとめ 146

まとめ - Desktop対応時に起きた問題とその解決策を紹介しました - 入力方法、画面レイアウト、Web特有の問題などがあった - その対応は特別なことではない - Flutterリポジトリのissueを探しに行く -
Widgetの各プロパティや実装について詳しくみる - デザイン面で難しければ相談する - 公式のドキュメントや MigrationGuideを読んでその通りに実装する 147

ご清聴ありがとうございました 148 資料は後ほどこのアカウントから #FlutterKaigiを付けて公開します

気をつけたい！Desktop対応で陥りやすい罠とその対策

気をつけたい！Desktop対応で陥りやすい罠とその対策

Other Decks in Programming

Featured

Transcript