Closed5
[Google I/O 2022メモ]Take your Flutter app from boring to beautiful codelab
m.kosukeTypography
セリフとサンセリフ
- セリフは装飾があり、フォーマルっぽく見える
- サンセリフはシンプルでカジュアルに見える
All caps cont
見出しに使うには良いが、使い過ぎるとうるさい
タイトルケースとセンテンスケース
- タイトルケール：すべての単語の先頭を大文字
- 例）This Is a Title Case Title
- フォーマルな印象になる
- センテンスケース：文の最初の単語の先頭と固有名詞のみ大文字
- 例）This is a sentence case title
- カジュアルな印象
カーニング、行の長さ（画面に対するテキスト全体の幅）、行の高さ（各行の文字の高さ）
「多すぎず少なすぎず」に気をつける。長文では適切な段落をつける。
m.kosukeTheme
Material Theme Builderを使うとThemeを便利に作れる。CoreColorのprimary, Secondary, Tertiary, Neutralを選ぶと、自動で生成してくれる
- Light/DarkTheme両方が生成され、プレビューも表示されるので便利。
- DynamicColorBuilderでDynamicColorにも対応可能
- ただし、一部のAndroid端末でしか対応できないため、通常のThemeにfallbackするように設定しておく必要がある
過去にMaterial3について書いた記事。カラーについても記載しています
m.kosukeAdaptive Design
特にWebやDesktop、タブレット、Foldableを対応する場合には必要になります。
ここでは LayoutBuilder を使って、画面サイズに応じてBottomNavigationとNavigationRailを使い分ける方法が紹介されています。
White Space
関連のあるオブジェクトごとにまとまりができるように、関連がないオブジェクト間にスペースができるようにSizedBoxなどを埋め込む作業です。 35 という奇数を指定しているのですが、4の倍数にこだわる必要はないみたいですね。（プロジェクト内で統一取れていれば良いとは思います）
m.kosukeMotion & Animation
モバイルではページ遷移アニメーションがあると自然な動きになりますが、DesktopやWebなどの場合、ユーザーはマウスやトラックパッドのクリックからすでにフィードバックを受け取っているため、ページ遷移アニメーションは不要になります。そのため、Themeで NoAnimationPageTransitionsBuilderを指定することでアニメーションをOFFにしておきます。
Hover
ページ遷移アニメーションがない分、デスクトップ、Webでは重要な要素になります。
このスクラップは2022/05/12にクローズされました