Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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. Window size classの用途 Window class毎のデザイン作成方法 1. まず一つWindow classのデザインを作成する。 2. 次の5つの質問に回答していき、次のWindow

    class sizeを作っていく。 i. 何が表示されるべきか? ii. 画面をどのように分割するか? iii. 何のサイズを変える必要があるか? iv. 何の位置を変える必要があるか? v. 何を交換する必要があるか?
  2. 実装方法 bodyを指定する場合 AdaptiveLayout( body: SlotLayout( config: <Breakpoint, SlotLayoutConfig>{ 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), ) }, ),