Material designのWindow size classについて

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

8. 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
   

   View Slide

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

   View Slide

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

    View Slide

11. 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
    

    View Slide

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

    View Slide

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

    View Slide

14. 実装方法
    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),
    )
    },
    ),
    

    View Slide

15. 実装方法
    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,
    });
    

    View Slide

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

    View Slide

17. 実装方法
    large
    

    View Slide