FlutterとMaterial3

Transcript

1. FlutterとMaterial3
   どすこい
   

   View Slide

2. 自己紹介
   ● どすこい(@dosukoi_android)
   ● 技術統括部プロダクト開発部モバイル
   グループ所属
   

   View Slide

3. 今日話すこと
   ● Material3とは
   ○ カラーパレット
   ○ タイポグラフィー
   ● FlutterにおけるMaterial3の使い方
   ○ App Bar
   ○ Button
   ○ Card
   ○ Dialog
   

   View Slide

4. Material3とは
   Googleが提唱するデザインシステムの最新バージョン
   従来のデザインよりも、モダンでダイナミックなデザインが特徴
   

   View Slide

5. カラーパレット
   より多様な色のバリエーションを提供するために、カラーパレットが大きく増えた
   ライトモードやダークモードに対応したカラーパレットも用意されている
   

   View Slide

6. タイポグラフィー
   ● H1~6
   ● Subtitle1~2
   ● Body1~2
   ● Button
   ● Caption
   ● Overline
   ● Display
   ● Headline
   ● Title
   ● Label
   ● Body
   それぞれがLarge, Medium, Smallの3種類を持
   つ
   従来のMaterial Design Material3
   

   View Slide

7. FlutterにおけるMaterial3の使い方
   ● useMaterial3をtrueに設定する
   ● (デフォルトだと)primarySwatchが設定され
   ているので、それを消して
   colorShcemeSeedやcolorSchemeを指定
   する
   

   View Slide

8. どれくらい変わるの？
   

   View Slide

9. App Bar
   elevation = 0 elevation = 4
   

   View Slide

10. Floating Action Button
    

    View Slide

11. Card
    

    View Slide

12. Dialog
    

    View Slide

13. でも常にデフォルトカラーを
    使うわけではないよね？
    

    View Slide

14. カラースキーマの設定
    大体4通り
    ● ColorScheme()
    ● ColorScheme.light() or ColorScheme.dark()
    ● ColorScheme.fromSwatch
    ● ColorScheme.fromSeed
    

    View Slide

15. ColorScheme()
    ● primary
    ○ アプリで最も使われる色
    ● onPrimary
    ○ primaryの上のコンポーネントの色
    ○ Textの色とか
    ● secondary
    ○ アクセントに使われる色
    ● onSecondary
    ○ secondaryの上のコンポーネントの色
    ● error
    ○ エラー時に使う色
    ● onError
    ○ errorの上のコンポーネントの色
    ● background
    ○ 背景色
    ● onBackground
    ○ backgroundの上のコンポーネントの色
    ● surface
    ○ Cardとかの背景色
    ● onSurface
    ○ surfaceの上のコンポーネントの色
    最低限必要なのはこの10個
    

    View Slide

16. ColorScheme.light() or ColorScheme.dark()
    ほぼColorSchemeのprimary constructorと一緒
    ただし、デフォルト値が設定されてるのでちゃんと設定しないと一部だけ変な色になって
    しまうので注意
    

    View Slide

17. そもそもSwatchって何？
    A color that has a small table of related colors called a "swatch".
    同じような色合いを50, 100~900の10段階に分けたもの
    数字が大きくなるほど濃くなっていく
    ColorScheme.fromSwatch
    

    View Slide

18. ColorScheme.fromSwatch
    

    View Slide

19. デフォルト値だとこうなるので、
    ちゃんと値を設定してあげないといけない
    ColorScheme.fromSwatch
    

    View Slide

20. seedColorからいい感じのカラーパレットが生成される
    右の画像はFF0000(red)をseedColorに与えたもの
    ColorScheme.fromSeed
    

    View Slide

21. Theme.of(context).colorScheme.primary
    これだけでOK
    ただ実際にprimaryやonPrimaryなどにどんな色が当てられてるのかがわかりにくいの
    で、カタログアプリを作るとわかりやすい
    設定したカラースキーマをどう使うの？
    

    View Slide

22. 設定したカラースキーマをどう使うの？
    

    View Slide

23. 愉快なMaterial3ライフを！
    

    View Slide