本サイトは docs.flutter.dev / Large screen devices のリファレンスブログです。
1.UIデザイン(大画面ギャラリー)
「UIデザイン(大画面ギャラリー)」には大画面における最適化されたUIデザインがギャラリーとして提供されています。(このURLは本来Android開発者向けサイトなのですが、docs.flutter.devでは、大画面レイアウトの部分を切り取って参考にする、という形式で紹介されています。)
1-1.ソーシャルメディア
1-2.メディア
1-3.仕事効率化
1-4.ショッピング
1-5.読書
1-6.想像力
1-7.ゲーム
2.マテリアルデザイン3
ご周知の「マテリアルデザイン3」ですが、ここでも参照先として紹介されています(・・・ので、以下、レジュメになります。)
2-1.HOME
(1)News & launches
(2)Design system updates
(3)Resources
2-2.Get started
2-3.Develop
- Flutter
- Material 3 from design to deployment
- Material 3 GitHub issue
- Build an animated responsive layout
- Opt-in with useMaterial3 flag
- Flutter.dev
- Take your Flutter app from boring to beautiful
- 5 Steps to prepare your app for large screens
- Material Motion in Flutter and Android
- Material 3 Canonical layouts
- Material Flutter widget catalog
- Sample app: Wonderous
- Web
2-4.Foundations
- Accessibility
- Content design
- Customizing Material
- Design tokens
- Interaction states
- Layout
- Material A-Z
- Banner
- Button
- Bottom app bar
- Bottom sheet
- Card
- Checkbox
- Chip
- Color: Baseline scheme
- Color: Dynamic color
- Color: Extended color
- Color: Key color
- Color: Scheme
- Color: Source color
- Color: Tonal palette
- Color: Tone
- Color: User-generated schemes
- Contrast
- Customization
- Dark theme
- Data table
- Date picker
- Design attribute
- Design guidelines
- Design specs
- Design System Package ( DSP )
- Design tokens
- Design tokens: Context
- Design tokens: Role
- Design tokens: Types
- Design tokens: Value
- Dialog
- Divider
- Element
- Extended FAB
- Floating action button ( FAB )
- HCT
- Image list
- Libraries
- List
- Material Components
- Material Design
- Material Theming
- Menu
- Mode
- Navigation bar
- Navigation drawer
- Navigation rail
- Progress indicator
- Radio button
- Role
- Side sheet
- Slider
- Snackbar
- Style
- Switch
- Tab
- Text field
- Theme
- Time pickker
- Tooltip
- Top app bar
2-5.Styles
- Color
- Color system
- Color roles
- What are color roles ?
- General concepts
- Primary
- Secondary
- Tertiary
- Error
- Surface
- Outline
- Add-on color roles
- Color schemes
- Choosing a scheme
- Static color
- Dynamic color
- Static
- Dynamic
- Choosing a scheme
- Advanced
- Color resources
- Elevation
- Icons
- Motion
- Shape
- Typography
2-6.Components
- Overview
- App bars
- Bottom app bar
- Top app bar
- Badges
- Buttons
- All buttons
- Choosing buttons
- 高強調
- Extended FAB
- FAB
- Filled button
- 中強調
- Filled tonal button
- Elevated button
- Outlined button
- 低強調
- Text button
- Segmented button
- Icon button
- 高強調
- Herarchy
- Primary action button
- Other buttons
- Placement
- Choosing buttons
- Common buttons
- Overview/Specs/Guidelines/
- Accessibility
各成分のウェイト)R(赤): 0.2126、G(緑): 0.7152、B(青): 0.0722
Luminance=0.2126×R+0.7152×G+0.0722×B
- FAB
- Extended FAB
- Icon buttons
- Segmented buttons
- All buttons
- Cards
- Overview/Specs/
- Guidelines
- mozaic grid、staggered grid
- /Accessibility
- Carousel
- Checkbox
- Chips
- Date pickers
- Dialogs
- Divider
- Lists
- Menus
- Navigation ※同じ画面上で以下を同時に使用してはいけない
- Navigation bar(コンパクトなウィンドウ サイズ)
- Navigation rail(中サイズおよび拡張ウィンドウ サイズ)
- Navigation drawer(拡張、大、特大ウィンドウ サイズ)
- Overview/Specs/Guidelines/Accessibility
1. 標準(拡大、大、特大のウィンドウ サイズ)
・常に表示時:
宛先を頻繁に切り替える場合に最適
・メニュー アイコンをタップして開閉時:
画面のコンテンツに重点を置く場合に最適
2. モーダル(中サイズおよびコンパクト サイズ)
※スクリムにより他のコンテンツをブロック可能
- Overview/Specs/Guidelines/Accessibility
- Progress indicators
確定/不確定インジケータ
円形/直線 - Radio button
- Search
- Sheets
- Bottom sheets
- Side sheets
- Sliders
- Snackbar
- Switch
- Tabs
- Text fields
- Time pickers
- Tooltips
2-7.Blog
3.本説明
上記URL(docs.flutter.dev/../large-screens)の本説明です。