Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Material designのWindow size classについて

oyuk
June 20, 2023

Material designのWindow size classについて

oyuk

June 20, 2023
Tweet

More Decks by oyuk

Other Decks in Programming

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