Take your Flutter app from boring to beautiful codelab のメモ

https://youtu.be/eBVMfS7MayI

コードラボになっていて、それを動画で解説してくれている

Typography

https://fonts.google.com/?category=Sans+Serif

https://pub.dev/packages/google_fonts

セリフとサンセリフ

• セリフは装飾があり、フォーマルっぽく見える
• サンセリフはシンプルでカジュアルに見える

All caps cont

見出しに使うには良いが、使い過ぎるとうるさい

タイトルケースとセンテンスケース

• タイトルケール：すべての単語の先頭を大文字
  • 例）This Is a Title Case Title
  • フォーマルな印象になる
• センテンスケース：文の最初の単語の先頭と固有名詞のみ大文字
  • 例）This is a sentence case title
  • カジュアルな印象

カーニング、行の長さ（画面に対するテキスト全体の幅）、行の高さ（各行の文字の高さ）

「多すぎず少なすぎず」に気をつける。長文では適切な段落をつける。

Theme

Material Theme Builderを使うとThemeを便利に作れる。CoreColorのprimary, Secondary, Tertiary, Neutralを選ぶと、自動で生成してくれる

• Light/DarkTheme両方が生成され、プレビューも表示されるので便利。
• DynamicColorBuilderでDynamicColorにも対応可能
  • ただし、一部のAndroid端末でしか対応できないため、通常のThemeにfallbackするように設定しておく必要がある

過去にMaterial3について書いた記事。カラーについても記載しています
https://qiita.com/mkosuke/items/314242951766e413b4ab#color-ruleの変更

Adaptive Design

特にWebやDesktop、タブレット、Foldableを対応する場合には必要になります。
ここでは LayoutBuilder を使って、画面サイズに応じてBottomNavigationとNavigationRailを使い分ける方法が紹介されています。

White Space

関連のあるオブジェクトごとにまとまりができるように、関連がないオブジェクト間にスペースができるようにSizedBoxなどを埋め込む作業です。 35 という奇数を指定しているのですが、4の倍数にこだわる必要はないみたいですね。（プロジェクト内で統一取れていれば良いとは思います）

Motion & Animation

モバイルではページ遷移アニメーションがあると自然な動きになりますが、DesktopやWebなどの場合、ユーザーはマウスやトラックパッドのクリックからすでにフィードバックを受け取っているため、ページ遷移アニメーションは不要になります。そのため、Themeで NoAnimationPageTransitionsBuilderを指定することでアニメーションをOFFにしておきます。

Hover

ページ遷移アニメーションがない分、デスクトップ、Webでは重要な要素になります。