Material designのWindow size classについて potatotips #82 2023/6/20 oyuk

自己紹介 oyuk(@oydku) プログラマ 株式会社RelicでFlutterやってます。

Window size classとは？ 画面サイズ毎に分割した区分の事 [1] https://m3.material.io/foundations/layout/applying-layout/window-size-classes#6e960b82-eff3-4f1b-92d3- 5edb5e338f49

Window size classとは？ [2] https://m3.material.io/foundations/layout/applying-layout/window-size-classes

Window size classの用途 Window classに応じてコンポーネントの配置、表示状態を変更する事でより良いユーザー体 験を提供できる。 [3] https://m3.material.io/foundations/layout/applying-layout/window-size-classes#6e960b82-eff3-4f1b-92d3- 5edb5e338f49

Window size classの用途 Window class毎のデザイン作成方法 1. まず一つWindow classのデザインを作成する。 2. 次の5つの質問に回答していき、次のWindow class sizeを作っていく。 i. 何が表示されるべきか？ ii. 画面をどのように分割するか？ iii. 何のサイズを変える必要があるか？ iv. 何の位置を変える必要があるか？ v. 何を交換する必要があるか？

Window size classの用途 1 何が表示されるべきか？ 小さい画面では表示されていないコンポーネントが大きい画面では表示したほうが良い場合 がある。 画像ではpaneが表示状態がcompact、expandedで違っている。 [4] https://m3.material.io/foundations/layout/applying-layout/window-size-classes

Window size classの用途 2 画面をどのように分割するか？ 一つのpaneはcompact,medium、二つのpaneはexpandedで使用すると良い。 [5] https://m3.material.io/foundations/layout/applying-layout/window-size-classes#64506ae2-f4c1-4810-8ee9- d2434ab8616c

Window size classの用途 3 何のサイズを変える必要があるか？ compactでのコンポーネントのサイズはmedium,expandedでは大きくする事が可能である。 [6] https://m3.material.io/foundations/layout/applying-layout/window-size-classes#69b87bd8-6ed7-4df5-a91d- 04247c47ebe1

Window size classの用途 4 何の位置を変える必要があるか？ Window classが大きくなればよりスペースが大きくなる。これに合わせてコンポーネントの 位置を変える事を検討する。 例 Cardの位置を変更する コンテンツに二つ目のカラムを追加する

Window size classの用途 5 何を交換する必要があるか？ Window classが変わると同様の機能を持つコンポーネントを交換する事ができる場合があ る。図はnavigation barをnavigation railに置き換えた例。 [7] https://m3.material.io/foundations/layout/applying-layout/window-size-classes#9a45abd4-d1cf-4001-a63b- dd5c4e823bd5

実装方法 AdaptiveScaffoldとAdaptiveLayoutというAPIが提供されている。 AdaptiveLayoutの方がカスタマイズ性が高い。 https://github.com/flutter/packages/tree/main/packages/flutter_adaptive_scaffold

実装方法 これらのコンポーネントが画面サイズに応じて何を表示するかを指定する。 [8] https://github.com/flutter/packages/tree/main/packages/flutter_adaptive_scaffold#adaptivelayout

実装方法 bodyを指定する場合 AdaptiveLayout( body: SlotLayout( config: { Breakpoints.small: SlotLayout.from( key: const Key('Body Small'), builder: (_) => ListView.builder( itemCount: children.length, itemBuilder: (BuildContext context, int index) => children[index], ), ), Breakpoints.medium: SlotLayout.from( key: const Key('Body Medium'), builder: (_) => GridView.count(crossAxisCount: 2, children: children), ) }, ),

実装方法 topNavigation等も設定可能。 const AdaptiveLayout({ super.key, this.topNavigation, this.primaryNavigation, this.secondaryNavigation, this.bottomNavigation, this.body, this.secondaryBody, this.bodyRatio, this.internalAnimations = true, this.bodyOrientation = Axis.horizontal, });

実装方法 画面サイズに応じてコンポーネントの出し分けができている。 small medium

実装方法 large