FlutterとMaterial3

Transcript

1. FlutterとMaterial3 どすこい
2. 自己紹介 • どすこい(@dosukoi_android) • 技術統括部プロダクト開発部モバイル グループ所属
3. 今日話すこと • Material3とは ◦ カラーパレット ◦ タイポグラフィー • FlutterにおけるMaterial3の使い方 ◦ App Bar ◦ Button ◦ Card ◦ Dialog
4. Material3とは Googleが提唱するデザインシステムの最新バージョン 従来のデザインよりも、モダンでダイナミックなデザインが特徴
5. カラーパレット より多様な色のバリエーションを提供するために、カラーパレットが大きく増えた ライトモードやダークモードに対応したカラーパレットも用意されている
6. タイポグラフィー • H1~6 • Subtitle1~2 • Body1~2 • Button • Caption • Overline • Display • Headline • Title • Label • Body それぞれがLarge, Medium, Smallの3種類を持 つ 従来のMaterial Design Material3
7. FlutterにおけるMaterial3の使い方 • useMaterial3をtrueに設定する • (デフォルトだと)primarySwatchが設定され ているので、それを消して colorShcemeSeedやcolorSchemeを指定 する
8. どれくらい変わるの？
9. App Bar elevation = 0 elevation = 4
10. Floating Action Button
11. Card
12. Dialog
13. でも常にデフォルトカラーを 使うわけではないよね？
14. カラースキーマの設定 大体4通り • ColorScheme() • ColorScheme.light() or ColorScheme.dark() • ColorScheme.fromSwatch • ColorScheme.fromSeed
15. ColorScheme() • primary ◦ アプリで最も使われる色 • onPrimary ◦ primaryの上のコンポーネントの色 ◦ Textの色とか • secondary ◦ アクセントに使われる色 • onSecondary ◦ secondaryの上のコンポーネントの色 • error ◦ エラー時に使う色 • onError ◦ errorの上のコンポーネントの色 • background ◦ 背景色 • onBackground ◦ backgroundの上のコンポーネントの色 • surface ◦ Cardとかの背景色 • onSurface ◦ surfaceの上のコンポーネントの色 最低限必要なのはこの10個
16. ColorScheme.light() or ColorScheme.dark() ほぼColorSchemeのprimary constructorと一緒 ただし、デフォルト値が設定されてるのでちゃんと設定しないと一部だけ変な色になって しまうので注意
17. そもそもSwatchって何？ A color that has a small table of related colors called a "swatch". 同じような色合いを50, 100~900の10段階に分けたもの 数字が大きくなるほど濃くなっていく ColorScheme.fromSwatch
18. ColorScheme.fromSwatch
19. デフォルト値だとこうなるので、 ちゃんと値を設定してあげないといけない ColorScheme.fromSwatch
20. seedColorからいい感じのカラーパレットが生成される 右の画像はFF0000(red)をseedColorに与えたもの ColorScheme.fromSeed
21. Theme.of(context).colorScheme.primary これだけでOK ただ実際にprimaryやonPrimaryなどにどんな色が当てられてるのかがわかりにくいの で、カタログアプリを作るとわかりやすい 設定したカラースキーマをどう使うの？
22. 設定したカラースキーマをどう使うの？
23. 愉快なMaterial3ライフを！