Flutter:Widget一覧

FlutterにどんなWidgetが用意されているか確認しようと思い、[Widget catalog](https://flutter.dev/docs/development/ui/widgets)をチラ見してみたけど把握しづらかったので、一つ一つ確認しがてら一覧に整理してみました。

(2019/10/20 - BasicsとMaterial Componentsの画像やカテゴリの追加を反映しました)
(2019/12/25 - Interaction modelsのカテゴリ追加を反映しました)
(2020/03/11 - CupertinoとMaterial Componentsのウィジェットを追加しました)
(2020/08/17 - AnimatedAlign を追加しました([Widget Index](https://flutter.dev/docs/reference/widgets): 158個時点))

- [Basics - 最初に知っておくべきウィジェット](#basics)
- [Material Components - マテリアルデザインを実現するウィジェット](#material-components)
- [Layout - レイアウトのためのウィジェット](#layout)
- [Styling - アプリのテーマやサイズ、パディングを実現するウィジェット](#styling)
- [Scrolling - スクロール可能なウィジェット](#scrolling)
- [Text - テキストウィジェット](#text)
- [Assets, Images, and Icons - 画像やアイコン、アセット管理ウィジェット](#assets-images-and-icons)
- [Input - ユーザー入力を取得するウィジェット](#input)
- [Painting and effects - 視覚効果を実現するウィジェット](#painting-and-effects)
- [Animation and Motion - アニメーションを実現するウィジェット](#animation-and-motion)
- [Interaction Models - タッチイベントとビューのルーティングウィジェット](#interaction-models)
- [Async - 非同期処理に基づいて自身をビルドするウィジェット](#async)
- [Accessibility](#accessibility)
- [Cupertino(iOS-style widgets) - iOSデザインを実現するウィジェット](#cupertinoios-style-widgets)

## Basics

最初のFlutterアプリを作成する前に必ず知っておく必要があるウィジェット。

|Widget|画像|説明の翻訳|
|:--|:--|:--|
|[Appbar](https://api.flutter.dev/flutter/material/AppBar-class.html)|<img src=https://flutter.dev//images/widget-catalog/material-app-bar.png width=150 />|マテリアルデザインのアプリバー。<br>アプリバーには、ツールバーや、TabBarのとFlexibleSpaceBarなどの潜在的に他のウィジェット、で構成されています。<br>|
|[Column](https://api.flutter.dev/flutter/widgets/Column-class.html)| |垂直方向に子ウィジェットのリストをレイアウト。<br>|
|[Container](https://api.flutter.dev/flutter/widgets/Container-class.html)| |一般的な絵画、ポジショニング、およびサイズのウィジェットを組み合わせた便利なウィジェット。<br>|
|[FlutterLogo](https://api.flutter.dev/flutter/material/FlutterLogo-class.html)|<img src=https://flutter.dev//images/catalog-widget-placeholder.png width=150 />|ウィジェット形式のフラッタロゴ。<br>このウィジェットはIconThemeを尊重します。<br>|
|[Icon](https://api.flutter.dev/flutter/widgets/Icon-class.html)|<img src=https://flutter.github.io/assets-for-api-docs/assets/widgets/icon.png width=150 />|マテリアルデザインのアイコン。<br>|
|[Image](https://api.flutter.dev/flutter/widgets/Image-class.html)| |画像を表示するウィジェット。<br>|
|[Placeholder](https://api.flutter.dev/flutter/widgets/Placeholder-class.html)|<img src=https://flutter.dev//images/catalog-widget-placeholder.png width=150 />|他のウィジェットを表すボックスを描画するウィジェットが追加一日されます。<br>|
|[RaisedButton](https://api.flutter.dev/flutter/material/RaisedButton-class.html)|<img src=https://flutter.dev//images/widget-catalog/material-raised-button.png width=150 />|マテリアルデザインは、ボタンを提起しました。<br>隆起したボタンは、インターフェースの上に置いた材料の矩形片から成ります。<br>|
|[Row](https://api.flutter.dev/flutter/widgets/Row-class.html)| |水平方向の子ウィジェットのリストをレイアウト。<br>|
|[Scaffold](https://api.flutter.dev/flutter/material/Scaffold-class.html)|<img src=https://storage.googleapis.com/material-design/publish/material_v_11/assets/0Bx4BSt6jniD7T0hfM01sSmRyTG8/layout_structure_regions_mobile.png width=150 />|基本的な材料設計、ビジュアルレイアウト構造を実装します。<br>このクラスは、引き出し、スナックバー、およびボトムシートを表示するためのAPIを提供します。<br>|
|[Text](https://api.flutter.dev/flutter/widgets/Text-class.html)| |単一のスタイルを持つテキストラン。<br>|

## Material Components

マテリアルデザインのガイドラインを実装したビジュアルウィジェット、ビヘイビアウィジェット、そしてモーションリッチウィジェット。

### App structure and navigation

|Widget|画像|説明の翻訳|
|:--|:--|:--|
|[Appbar](https://api.flutter.dev/flutter/material/AppBar-class.html)|<img src=https://flutter.dev//images/widget-catalog/material-app-bar.png width=150 />|マテリアルデザインのアプリバー。<br>アプリバーには、ツールバーや、TabBarのとFlexibleSpaceBarなどの潜在的に他のウィジェット、で構成されています。<br>|
|[BottomNavigationBar](https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html)|<img src=https://flutter.dev//images/widget-catalog/material-bottom-navigation-bar.png width=150 />|下部のナビゲーションバーは探検し、シングルタップでトップレベルのビューを切り替えるが容易になります。<br> BottomNavigationBarウィジェットは、このコンポーネントを実装しています。<br>|
|[Drawer](https://api.flutter.dev/flutter/material/Drawer-class.html)|<img src=https://flutter.dev//images/widget-catalog/material-drawer.png width=150 />|アプリケーション内のナビゲーションリンクを表示するために足場の端から水平方向にスライドする材料設計パネル。<br>|
|[MaterialApp](https://api.flutter.dev/flutter/material/MaterialApp-class.html)|<img src=https://storage.googleapis.com/material-design/publish/material_v_11/assets/0Bx4BSt6jniD7Y1huOXVQdlFPMmM/materialdesign_introduction.png width=150 />|一般的に材料設計を実装するアプリケーションのために必要とされるウィジェットの数をラップ便利なウィジェット。<br>|
|[Scaffold](https://api.flutter.dev/flutter/material/Scaffold-class.html)|<img src=https://storage.googleapis.com/material-design/publish/material_v_11/assets/0Bx4BSt6jniD7T0hfM01sSmRyTG8/layout_structure_regions_mobile.png width=150 />|基本的な材料設計、ビジュアルレイアウト構造を実装します。<br>このクラスは、引き出し、スナックバー、およびボトムシートを表示するためのAPIを提供します。<br>|
|[SliverAppBar](https://api.flutter.dev/flutter/material/SliverAppBar-class.html)|<img src=https://flutter.dev//images/widget-catalog/material-app-bar.png width=150 />|CustomScrollViewと統合材料設計アプリバー。<br>|
|[TabBar](https://api.flutter.dev/flutter/material/TabBar-class.html)|<img src=https://flutter.dev//images/widget-catalog/material-tab-bar.png width=150 />|タブの水平方向の行を表示する材料設計ウィジェット。<br>|
|[TabBarView](https://api.flutter.dev/flutter/material/TabBarView-class.html)|<img src=https://flutter.dev//images/widget-catalog/material-tab-bar.png width=150 />|現在選択されているタブに対応したウィジェットを表示するページビュー。<br>典型的には、TabBarのと共に使用。<br>|
|[WidgetsApp](https://api.flutter.dev/flutter/widgets/WidgetsApp-class.html)|<img src=https://flutter.dev//images/widget-catalog/material-widgets-app.png width=150 />|一般に、アプリケーションのために必要とされているウィジェットの数をラップする便利なクラス。<br>|

### Buttons

|Widget|画像|説明の翻訳|
|:--|:--|:--|
|[ButtonBar](https://api.flutter.dev/flutter/material/ButtonBar-class.html)|<img src=https://flutter.dev//images/widget-catalog/material-button-bar.png width=150 />|ボタンの水平方向の配置。<br>|
|[DropdownButton](https://api.flutter.dev/flutter/material/DropdownButton-class.html)|<img src=https://storage.googleapis.com/material-design/publish/material_v_11/assets/0B7WCemMG6e0VakJ6a0F2MFJaaDQ/components_menus.png width=150 />|現在選択されている項目と別の項目を選択するためのメニューを開き、矢印を表示します。<br>|
|[FlatButton](https://api.flutter.dev/flutter/material/FlatButton-class.html)|<img src=https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VNDg3V3ZjU2hsNGc/components_buttons_usage3.png width=150 />|フラットボタンは、構成品目に印刷された部分は色で充填することにより、タッチに反応することをウィジェットです。<br>|
|[FloatingActionButton](https://api.flutter.dev/flutter/material/FloatingActionButton-class.html)|<img src=https://flutter.dev//images/widget-catalog/material-floating-action-button.png width=150 />|フローティングアクションボタンは、コンテンツの上に置いたアプリケーションの主作用を促進することが円形のアイコンボタンです。<br>フローティングアクションボタンは、最も一般的にScaffold.floatingActionButton分野で使用されています。<br>|
|[IconButton](https://api.flutter.dev/flutter/material/IconButton-class.html)|<img src=https://storage.googleapis.com/material-design/publish/material_v_11/assets/0B_udO5B8pzrzdXVuTlBoOTBjcU0/components_buttons_other1.png width=150 />|アイコンボタンは、材料上に印刷された画像がカラー（インク）を用いて充填することにより、タッチに反応することをウィジェットです。<br>|
|[OutlineButton](https://api.flutter.dev/flutter/material/OutlineButton-class.html)|<img src=https://flutter.dev//images/widget-catalog/material-outline-button.png width=150 />|重要ですが、アプリの主なアクションはありません二次アクションの中エンファシスボタン。<br>|
|[PopupMenuButton](https://api.flutter.dev/flutter/material/PopupMenuButton-class.html)|<img src=https://flutter.dev//images/widget-catalog/material-popup-menu-button.png width=150 />|表示メニュー時に押すとメニューが却下されたときにアイテムが選択されたため、呼び出しがonSelected。<br>|
|[RaisedButton](https://api.flutter.dev/flutter/material/RaisedButton-class.html)|<img src=https://flutter.dev//images/widget-catalog/material-raised-button.png width=150 />|Aマテリアルデザインは、ボタンを提起しました。<br>隆起したボタンは、インターフェース上その材料ホバーの矩形片から成ります。<br>|

### Input and selections

|Widget|画像|説明の翻訳|
|:--|:--|:--|
|[Checkbox](https://api.flutter.dev/flutter/material/Checkbox-class.html)|<img src=https://flutter.dev//images/widget-catalog/material-checkbox.png width=150 />|チェックボックスは、ユーザがセットから複数のオプションを選択することができます。<br>チェックボックスウィジェットは、このコンポーネントを実装しています。<br>|
|[Date & Time Pickers](https://api.flutter.dev/flutter/material/showDatePicker.html)|<img src=https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VY2h4WElGdEhPb2c/components_pickers.png width=150 />|日付ピッカーは、モバイル上の単一の日付を選択するダイアログウィンドウを使用します。<br>モバイルで：時間ピッカーは（分フォーマット時間）、単一の時間を選択するダイアログを使用します。<br>|
|[Radio](https://api.flutter.dev/flutter/material/Radio-class.html)|<img src=https://flutter.dev//images/widget-catalog/material-radio.png width=150 />|ラジオボタンは、ユーザがセットから一つの選択肢を選択することができます。<br>ユーザーがすべての利用可能なオプションのサイド・バイ・サイドを見る必要があると思われる場合の排他的な選択のためのラジオボタンを使用します。<br>|
|[Slider](https://api.flutter.dev/flutter/material/Slider-class.html)|<img src=https://flutter.dev//images/widget-catalog/material-slider.png width=150 />|スライダーは、ユーザーがスライダーサムを移動することで値の範囲から選択できます。<br>|
|[Switch](https://api.flutter.dev/flutter/material/Switch-class.html)|<img src=https://flutter.dev//images/widget-catalog/material-switch.png width=150 />|オン/オフスイッチは、単一の設定オプションの状態を切り替えます。<br>スイッチのウィジェットは、このコンポーネントを実装しています。<br>|
|[TextField](https://api.flutter.dev/flutter/material/TextField-class.html)|<img src=https://flutter.dev//images/widget-catalog/material-text-field.png width=150 />|テキストフィールドをタッチすると、カーソルを置き、キーボードを表示します。<br> TextFieldウィジェットは、このコンポーネントを実装しています。<br>|

### Dialogs, alerts, and panels

|Widget|画像|説明の翻訳|
|:--|:--|:--|
|[AlertDialog](https://api.flutter.dev/flutter/material/AlertDialog-class.html)|<img src=https://flutter.dev//images/widget-catalog/material-alert-dialog.png width=150 />|アラートは状況についてユーザーに通知承認を必要とする緊急中断されています。<br> AlertDialogウィジェットは、このコンポーネントを実装しています。<br>|
|[BottomSheet](https://api.flutter.dev/flutter/material/BottomSheet-class.html)|<img src=https://flutter.dev//images/widget-catalog/material-bottom-sheets.png width=150 />|ボトムシートは、より多くのコンテンツを明らかにし、画面の下から上にスライドさせます。<br>あなたはモーダルボトムシートを実装するために持続的なボトムシートまたはshowModalBottomSheet（）を実装するためにshowBottomSheet（）を呼び出すことができます。<br>|
|[ExpansionPanel](https://api.flutter.dev/flutter/material/ExpansionPanel-class.html)|<img src=https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VOXF3eEJ3azZMSjg/components_expansion_panels.png width=150 />|拡張パネルが作成フローを含み、要素の軽量編集を可能にします。<br> ExpansionPanelウィジェットは、このコンポーネントを実装しています。<br>|
|[SimpleDialog](https://api.flutter.dev/flutter/material/SimpleDialog-class.html)|<img src=https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VVGNnN3NvMGdoQTg/components_dialogs.png width=150 />|シンプルなダイアログがリスト項目についての詳細やアクションを提供することができます。<br>例えば、それらは、言外の意味か（アカウントの追加など）、直交アクションを明確にアバターのアイコンを表示することができます。<br>|
|[SnackBar](https://api.flutter.dev/flutter/material/SnackBar-class.html)|<img src=https://flutter.dev//images/widget-catalog/material-snack-bar.png width=150 />|簡単に画面の下部に表示されるオプションの作用を有する軽量メッセージ。<br>|

### Information displays

|Widget|画像|説明の翻訳|
|:--|:--|:--|
|[Card](https://api.flutter.dev/flutter/material/Card-class.html)|<img src=https://flutter.dev//images/widget-catalog/material-card.png width=150 />|マテリアルデザインのカード。<br>カードが少し丸みを帯びたコーナーと影を持っています。<br>|
|[Chip](https://api.flutter.dev/flutter/material/Chip-class.html)|<img src=https://flutter.dev//images/widget-catalog/material-chip.png width=150 />|材料設計のチップ。<br>チップは、そのような接触のような小さなブロックで、複雑なエンティティを表します。<br>|
|[CircularProgressIndicator](https://api.flutter.dev/flutter/material/CircularProgressIndicator-class.html)|<img src=https://flutter.dev//images/widget-catalog/material-circular-progress-indicator.png width=150 />|スピン材料設計円形の進捗インジケータは、アプリケーションがビジーであることを示します。<br>|
|[DataTable](https://api.flutter.dev/flutter/material/DataTable-class.html)|<img src=https://flutter.dev//images/widget-catalog/material-data-table.png width=150 />|データ・テーブルには、生データのセットを表示します。<br>彼らは通常のデスクトップ・エンタープライズ製品に表示されます。<br> DataTableのウィジェットは、このコンポーネントを実装しています。<br>|
|[GridView](https://api.flutter.dev/flutter/widgets/GridView-class.html)|<img src=https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VandQYXpNMG9aQUk/components_grid_lists.png width=150 />|グリッドリストは、垂直方向と水平方向のレイアウトに配列されたセルの繰り返しパターンで構成されています。<br> GridViewのウィジェットは、このコンポーネントを実装しています。<br>|
|[Icon](https://api.flutter.dev/flutter/widgets/Icon-class.html)|<img src=https://flutter.github.io/assets-for-api-docs/assets/widgets/icon.png width=150 />|マテリアルデザインのアイコン。<br>|
|[Image](https://api.flutter.dev/flutter/widgets/Image-class.html)| |画像を表示するウィジェット。<br>|
|[LinearProgressIndicator](https://api.flutter.dev/flutter/material/LinearProgressIndicator-class.html)|<img src=https://flutter.dev//images/widget-catalog/material-linear-progress-indicator.png width=150 />|また、プログレスバーとして知られている材料設計リニア進捗インジケータ、。<br>|
|[Tooltip](https://api.flutter.dev/flutter/material/Tooltip-class.html)|<img src=https://flutter.dev//images/widget-catalog/material-tooltip.png width=150 />|ツールチップは、ボタンや他のユーザー・インターフェース・アクションの機能を説明するのに役立つテキストラベルを提供します。<br>ウィジェットが長押したときにラベルを表示するツールチップウィジェットのボタンをラップ（または、ユーザーが他のいくつかの適切な措置をとるとき）。<br>|

### Layout

|Widget|画像|説明の翻訳|
|:--|:--|:--|
|[Divider](https://api.flutter.dev/flutter/material/Divider-class.html)|<img src=https://flutter.dev//images/widget-catalog/material-divider.png width=150 />|両側にパディングを持つ一つの論理画素太い水平線、。<br>|
|[ListTile](https://api.flutter.dev/flutter/material/ListTile-class.html)|<img src=https://flutter.dev//images/widget-catalog/material-list-tile.png width=150 />|典型的には、いくつかのテキストと同様に先頭または末尾のアイコンを含む単一の固定高さ行。<br>|
|[Stepper](https://api.flutter.dev/flutter/material/Stepper-class.html)|<img src=https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VTndyUnNCR2tQREE/components_steppers.png width=150 />|一連のステップを通じて進捗状況を表示する材料設計ステッパーウィジェット。<br>|

## Layout

他のウィジェットの列、行、グリッド、および他の多くのレイアウトを配置します。

### Single-child layout widgets

|Widget|画像|説明の翻訳|
|:--|:--|:--|
|[Container](https://api.flutter.dev/flutter/widgets/Container-class.html)|<img src=https://flutter.github.io/assets-for-api-docs/assets/widgets/container_b.png alt=Container width=200 />|一般的なペイント、配置、およびサイズ変更ウィジェットを組み合わせた便利なウィジェット。<br>|
|[Padding](https://api.flutter.dev/flutter/widgets/Padding-class.html)| |与えられたパディングによって子をインセットするウィジェット。<br>|
|[Center](https://api.flutter.dev/flutter/widgets/Center-class.html)| |自分自身の中にその子を中心に置くウィジェット。<br>|
|[Align](https://api.flutter.dev/flutter/widgets/Align-class.html)| |子をそれ自身の中に配置し、オプションで、子のサイズに基づいて自分自身のサイズを変更するウィジェット。<br>|
|[FittedBox](https://api.flutter.dev/flutter/widgets/FittedBox-class.html)| |フィットに従って、子をそれ自身の中に拡大縮小して配置します。<br>|
|[AspectRatio](https://api.flutter.dev/flutter/widgets/AspectRatio-class.html)| |特定の縦横比に合わせて子のサイズを変更しようとするウィジェットです。<br>|
|[ConstrainedBox](https://api.flutter.dev/flutter/widgets/ConstrainedBox-class.html)| |その子に追加の制約を課すウィジェット。<br>|
|[Baseline](https://api.flutter.dev/flutter/widgets/Baseline-class.html)| |子のベースラインに従って子を配置するウィジェット。<br>|
|[FractionallySizedBox](https://api.flutter.dev/flutter/widgets/FractionallySizedBox-class.html)| |利用可能な総スペースの何分の一かにその子をサイズ変更するウィジェット。<br>レイアウトアルゴリズムの詳細については、RenderFractionallySizedOverflowBoxを参照してください。<br>|
|[IntrinsicHeight](https://api.flutter.dev/flutter/widgets/IntrinsicHeight-class.html)| |子供の大きさを子供の固有の高さに合わせるウィジェット。<br>|
|[IntrinsicWidth](https://api.flutter.dev/flutter/widgets/IntrinsicWidth-class.html)| |子のサイズを子の本来の幅に合わせるウィジェット。<br>|
|[LimitedBox](https://api.flutter.dev/flutter/widgets/LimitedBox-class.html)| |サイズが制限されていない場合にのみサイズを制限するボックス。<br>|
|[Offstage](https://api.flutter.dev/flutter/widgets/Offstage-class.html)| |それが木の中にあるかのように、しかし何もペイントせずに、ヒットテストのために子供を利用可能にしないで、そして親の部屋をとらずに、子供をレイアウトするウィジェット。<br>|
|[OverflowBox](https://api.flutter.dev/flutter/widgets/OverflowBox-class.html)| |親から取得するよりも子に異なる制約を課すウィジェット。<br>子が親をオーバーフローする可能性があります。<br>|
|[SizedBox](https://api.flutter.dev/flutter/widgets/SizedBox-class.html)| |指定されたサイズの箱子が与えられると、このウィジェットはその子に特定の幅や高さを持たせることを強制します（値がこのウィジェットの親によって許可されると仮定して）。<br>幅または高さのいずれかがnullの場合、このウィジェットは、その次元の子供のサイズに合わせて自分自身のサイズを変更します。<br>|
|[SizedOverflowBox](https://api.flutter.dev/flutter/widgets/SizedOverflowBox-class.html)| |特定のサイズですが、元の制約をその子に渡すウィジェットで、おそらくオーバーフローします。<br>|
|[Transform](https://api.flutter.dev/flutter/widgets/Transform-class.html)| |子をペイントする前に変換を適用するウィジェット。<br>|
|[CustomSingleChildLayout](https://api.flutter.dev/flutter/widgets/CustomSingleChildLayout-class.html)| |独身の子供のレイアウトをデリゲートに任せるウィジェット。<br>|

### Multi-child layout widgets

|Widget|画像|説明の翻訳|
|:--|:--|:--|
|[Row](https://api.flutter.dev/flutter/widgets/Row-class.html)| |子ウィジェットのリストを水平方向にレイアウトします。<br>|
|[Column](https://api.flutter.dev/flutter/widgets/Column-class.html)| |子ウィジェットのリストを垂直方向にレイアウトします。<br>|
|[Stack](https://api.flutter.dev/flutter/widgets/Stack-class.html)| |このクラスは、グラデーションとボタンを下に重ねてテキストと画像を重ねるなど、簡単な方法で複数の子を重ねたい場合に便利です。<br>|
|[IndexedStack](https://api.flutter.dev/flutter/widgets/IndexedStack-class.html)| |子供のリストから一人の子供を見せるStack。<br>|
|[GridView](https://api.flutter.dev/flutter/widgets/GridView-class.html)|<img src=https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VandQYXpNMG9aQUk/components_grid_lists.png alt=GridView width=200 />|グリッドリストは、縦と横のレイアウトで配列されたセルの繰り返しパターンで構成されています。<br>GridViewウィジェットはこのコンポーネントを実装しています。<br>|
|[Flow](https://api.flutter.dev/flutter/widgets/Flow-class.html)| |フローレイアウトアルゴリズムを実装するウィジェット。<br>|
|[Table](https://api.flutter.dev/flutter/widgets/Table-class.html)| |子にテーブルレイアウトアルゴリズムを使用するウィジェット。<br>|
|[Wrap](https://api.flutter.dev/flutter/widgets/Wrap-class.html)| |複数の水平方向または垂直方向の実行で子を表示するウィジェット。<br>|
|[ListBody](https://api.flutter.dev/flutter/widgets/ListBody-class.html)| |子を指定された軸に沿って順番に配置し、それらを他の軸の親のディメンションに強制するウィジェット。<br>|
|[CustomMultiChildLayout](https://api.flutter.dev/flutter/widgets/CustomMultiChildLayout-class.html)| |デリゲートを使用して複数の子のサイズと位置を決めるウィジェット。<br>|
|[LayoutBuilder](https://api.flutter.dev/flutter/widgets/LayoutBuilder-class.html)| |親ウィジェットのサイズに依存する可能性があるウィジェットツリーを構築します。<br>|
|[ListView](https://api.flutter.dev/flutter/widgets/ListView-class.html)| |スクロール可能な線形ウィジェットのリスト。<br>ListViewは最も一般的に使用されるスクロールウィジェットです。<br>その子をスクロール方向に次々に表示します。<br>横軸では、子はListViewを埋める必要があります。<br>|
|[Expanded](https://api.flutter.dev/flutter/widgets/Expanded-class.html)| |Row、Column、またはFlexの子を拡張するウィジェット。<br>|

## Styling

アプリのテーマを管理したり、アプリを画面サイズに反応させたり、パディングを追加したりします。

|Widget|画像|説明の翻訳|
|:--|:--|:--|
|[Padding](https://api.flutter.dev/flutter/widgets/Padding-class.html)| |与えられたパディングによって子をインセットするウィジェット。<br>|
|[Theme](https://api.flutter.dev/flutter/material/Theme-class.html)| |子孫ウィジェットにテーマを適用します。<br>テーマは、アプリケーションの色と文字体裁の選択について説明します。<br>|
|[MediaQuery](https://api.flutter.dev/flutter/widgets/MediaQuery-class.html)| |メディアクエリが特定のデータに対して解決するサブツリーを確立します。<br>|

## Scrolling

親の子として複数のウィジェットをスクロールします。

|Widget|画像|説明の翻訳|
|:--|:--|:--|
|[GridView](https://api.flutter.dev/flutter/widgets/GridView-class.html)|<img src=https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VandQYXpNMG9aQUk/components_grid_lists.png alt=GridView width=200 />|グリッドリストは、縦と横のレイアウトで配列されたセルの繰り返しパターンで構成されています。<br>GridViewウィジェットはこのコンポーネントを実装しています。<br>|
|[ListView](https://api.flutter.dev/flutter/widgets/ListView-class.html)| |スクロール可能な線形ウィジェットのリスト。<br>ListViewは最も一般的に使用されるスクロールウィジェットです。<br>その子をスクロール方向に次々に表示します。<br>横軸では、子はListViewを埋める必要があります。<br>|
|[NestedScrollView](https://api.flutter.dev/flutter/widgets/NestedScrollView-class.html)| |内部のスクロールビューは、他のスクロールビューと入れ子にすることができ、そのスクロール位置は本質的にリンクされています。<br>|
|[SingleChildScrollView](https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html)| |単一のウィジェットをスクロールできるボックスです。<br>このウィジェットは、通常は完全に表示されるボックスが1つある場合（タイムピッカーの時計の文字盤など）に便利ですが、コンテナが1軸（スクロール方向）に小さくなりすぎるとスクロールできるようにする必要があります。<br> ）|
|[Scrollable](https://api.flutter.dev/flutter/widgets/Scrollable-class.html)| |スクロール可能は、ジェスチャ認識を含むスクロール可能なウィジェットのインタラクションモデルを実装していますが、実際に子を表示するビューポートの作成方法については意見がありません。<br>|
|[Scrollbar](https://api.flutter.dev/flutter/material/Scrollbar-class.html)| |材料設計スクロールバー。<br>スクロールバーは、スクロール可能なウィジェットのどの部分が実際に表示されているかを示します。<br>|
|[CustomScrollView](https://api.flutter.dev/flutter/widgets/CustomScrollView-class.html)| |スライバーを使用してカスタムスクロール効果を作成するScrollView。<br>|
|[NotificationListener](https://api.flutter.dev/flutter/widgets/NotificationListener-class.html)| |ツリーを膨らませる通知を待機するウィジェット。<br>|
|[ScrollConfiguration](https://api.flutter.dev/flutter/widgets/ScrollConfiguration-class.html)| |サブツリーでのスクロール可能ウィジェットの動作を制御します。<br>|
|[RefreshIndicator](https://api.flutter.dev/flutter/material/RefreshIndicator-class.html)|<img src=https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B7WCemMG6e0VS2kzSmZwNnNKQVk/patterns-swipe-to-refresh.png alt=RefreshIndicator width=200 />|スクロール可能なマテリアルデザインのpull-to-refreshラッパー。<br>|
|[PageView](https://api.flutter.dev/flutter/widgets/PageView-class.html)| |ページごとに機能するスクロール可能なリスト。<br>|

## Text

テキストの表示とスタイル

|Widget|画像|説明の翻訳|
|:--|:--|:--|
|[Text](https://api.flutter.dev/flutter/widgets/Text-class.html)| |単一のスタイルを持つ一連のテキスト。<br>|
|[RichText](https://api.flutter.dev/flutter/widgets/RichText-class.html)| |RichTextウィジェットは、複数の異なるスタイルを使用するテキストを表示します。<br>表示するテキストは、TextSpanオブジェクトのツリーを使用して記述されます。<br>各オブジェクトには、そのサブツリーに使用されるスタイルが関連付けられています。<br>レイアウト制約によっては、テキストが複数の行にまたがって表示されたり、すべて同じ行に表示されることがあります。<br>|
|[DefaultTextStyle](https://api.flutter.dev/flutter/widgets/DefaultTextStyle-class.html)| |明示的なスタイルなしで子孫のTextウィジェットに適用するテキストスタイル。<br>|

## Assets, Images, and Icons

アセットの管理、画像の表示、およびアイコンの表示

|Widget|画像|説明の翻訳|
|:--|:--|:--|
|[Image](https://api.flutter.dev/flutter/widgets/Image-class.html)| |画像を表示するウィジェット。<br>|
|[Icon](https://api.flutter.dev/flutter/widgets/Icon-class.html)| |材料設計のアイコン。<br>|
|[RawImage](https://api.flutter.dev/flutter/widgets/RawImage-class.html)| |dart：ui.Imageを直接表示するウィジェット。<br>|
|[AssetBundle](https://api.flutter.dev/flutter/services/AssetBundle-class.html)| |アセットバンドルには、アプリケーションで使用できる画像や文字列などのリソースが含まれています。<br>これらのリソースへのアクセスは非同期であるため、アプリケーションのユーザインターフェースをブロックすることなく、ネットワークを介して（例えば、NetworkAssetBundleから）またはローカルファイルシステムから透過的にロードすることができる。<br>|

## Input

Material ComponentsおよびCupertinoの入力ウィジェットに加えて、ユーザ入力を取ります。

|Widget|画像|説明の翻訳|
|:--|:--|:--|
|[Form](https://api.flutter.dev/flutter/widgets/Form-class.html)| |複数のフォームフィールドウィジェット（例：TextFieldウィジェット）をグループ化するためのオプションのコンテナ。<br>|
|[FormField](https://api.flutter.dev/flutter/widgets/FormField-class.html)| |単一のフォームフィールドこのウィジェットはフォームフィールドの現在の状態を維持するので、更新および検証エラーはUIに視覚的に反映されます。<br>|
|[RawKeyboardListener](https://api.flutter.dev/flutter/widgets/RawKeyboardListener-class.html)| |ユーザーがキーボードのキーを押したり離したりするたびにコールバックを呼び出すウィジェット。<br>|

## Painting and effects

これらのウィジェットは、レイアウト、サイズ、位置を変更せずに、視覚効果を子供に適用します。

|Widget|画像|説明の翻訳|
|:--|:--|:--|
|[BackdropFilter](https://api.flutter.dev/flutter/widgets/BackdropFilter-class.html)|<img src=https://flutter.dev//images/catalog-widget-placeholder.png width=150 />|その後、既存の塗装コンテンツにフィルタを適用し、ウィジェットが子をペイントします。<br>この効果は、フィルタは、ぼかしなど、非ローカルである場合は特に、比較的高価です。<br>|
|[ClipOval](https://api.flutter.dev/flutter/widgets/ClipOval-class.html)| |クリップその子は楕円形を使用していることをウィジェット。<br>|
|[ClipPath](https://api.flutter.dev/flutter/widgets/ClipPath-class.html)|<img src=https://flutter.dev//images/catalog-widget-placeholder.png width=150 />|クリップその子がパスを使用していることをウィジェット。<br>|
|[ClipRect](https://api.flutter.dev/flutter/widgets/ClipRect-class.html)| |クリップその子が長方形を使用していることをウィジェット。<br>|
|[CustomPaint](https://api.flutter.dev/flutter/widgets/CustomPaint-class.html)| |塗料の段階で描画するにキャンバスを提供してウィジェット。<br>|
|[DecoratedBox](https://api.flutter.dev/flutter/widgets/DecoratedBox-class.html)| |その子塗料の前または後に装飾をペイントウィジェット。<br>|
|[FractionalTranslation](https://api.flutter.dev/flutter/widgets/FractionalTranslation-class.html)|<img src=https://flutter.dev//images/catalog-widget-placeholder.png width=150 />|その子を塗る前に、箱の大きさの一部として表さ翻訳を適用するウィジェット。<br>|
|[Opacity](https://api.flutter.dev/flutter/widgets/Opacity-class.html)| |その子は、部分的に透明になりウィジェット。<br>|
|[RotatedBox](https://api.flutter.dev/flutter/widgets/RotatedBox-class.html)|<img src=https://flutter.dev//images/catalog-widget-placeholder.png width=150 />|四半期のターンの整数でその子を回転させるウィジェット。<br>|
|[Transform](https://api.flutter.dev/flutter/widgets/Transform-class.html)| |その子を塗装する前に変換を適用するウィジェット。<br>|

## Animation and Motion

あなたのアプリにアニメーションを持ってきてください。

|Widget|画像|説明の翻訳|
|:--|:--|:--|
|[AnimatedAlign](https://api.flutter.dev/flutter/widgets/AnimatedAlign-class.html)||アニメーションバージョンのAlign。指定された配置が変更されるたびに、指定された期間にわたって自動的に子の位置を移行します。|
|[AnimatedContainer](https://api.flutter.dev/flutter/widgets/AnimatedContainer-class.html)| |一定期間にわたって徐々に値を変更するコンテナ。<br>|
|[AnimatedCrossFade](https://api.flutter.dev/flutter/widgets/AnimatedCrossFade-class.html)| |与えられた2人の子供の間でクロスフェードし、それらのサイズの間で自分自身をアニメ化するウィジェット。<br>|
|[Hero](https://api.flutter.dev/flutter/widgets/Hero-class.html)|<img src=https://flutter.github.io/assets-for-api-docs/assets/interaction/heroes.png alt=Hero width=200 />|子供をヒーローアニメーションの候補としてマークするウィジェット。<br>|
|[AnimatedBuilder](https://api.flutter.dev/flutter/widgets/AnimatedBuilder-class.html)| |アニメーションを構築するための汎用ウィジェット。<br> AnimatedBuilderは、より大きなビルド関数の一部としてアニメーションを含めたい、より複雑なウィジェットに役立ちます。<br> AnimatedBuilderを使用するには、ウィジェットを構築してそれにビルダー関数を渡すだけです。<br>|
|[DecoratedBoxTransition](https://api.flutter.dev/flutter/widgets/DecoratedBoxTransition-class.html)| |そのDecorationのさまざまなプロパティをアニメーション化するDecoratedBoxのアニメーションバージョン。<br>|
|[FadeTransition](https://api.flutter.dev/flutter/widgets/FadeTransition-class.html)| |ウィジェットの不透明度をアニメートします。<br>|
|[PositionedTransition](https://api.flutter.dev/flutter/widgets/PositionedTransition-class.html)| |アニメーションの存続期間にわたって、子の位置を開始位置から終了位置に遷移させるために特定のAnimationを使用するPositionedのアニメーションバージョン。<br>|
|[RotationTransition](https://api.flutter.dev/flutter/widgets/RotationTransition-class.html)| |ウィジェットの回転をアニメーション化します。<br>|
|[ScaleTransition](https://api.flutter.dev/flutter/widgets/ScaleTransition-class.html)| |変換されたウィジェットの縮尺をアニメートします。<br>|
|[SizeTransition](https://api.flutter.dev/flutter/widgets/SizeTransition-class.html)| |それ自身のサイズとクリップをアニメートして、そして子供を整列させます。<br>|
|[SlideTransition](https://api.flutter.dev/flutter/widgets/SlideTransition-class.html)| |通常の位置に対するウィジェットの位置をアニメートします。<br>|
|[AnimatedDefaultTextStyle](https://api.flutter.dev/flutter/widgets/AnimatedDefaultTextStyle-class.html)| |指定されたスタイルが変更されるたびに、指定された期間にわたってデフォルトのテキストスタイル（明示的なスタイルなしで子孫のテキストウィジェットに適用されるテキストスタイル）を自動的に移行するDefaultTextStyleのアニメーションバージョン。<br>|
|[AnimatedListState](https://api.flutter.dev/flutter/widgets/AnimatedListState-class.html)| |項目が挿入または削除されたときに項目をアニメーション化するスクロールコンテナの状態。<br>|
|[AnimatedModalBarrier](https://api.flutter.dev/flutter/widgets/AnimatedModalBarrier-class.html)| |ユーザーが自分の背後にあるウィジェットと対話するのを防ぐウィジェット。<br>|
|[AnimatedOpacity](https://api.flutter.dev/flutter/widgets/AnimatedOpacity-class.html)| |指定された不透明度が変わるたびに、指定された期間にわたって子供の不透明度を自動的に移行させる、不透明度のアニメーションバージョン。<br>|
|[AnimatedPhysicalModel](https://api.flutter.dev/flutter/widgets/AnimatedPhysicalModel-class.html)| |PhysicalModelのアニメーション版。<br>|
|[AnimatedPositioned](https://api.flutter.dev/flutter/widgets/AnimatedPositioned-class.html)| |指定された位置が変わるたびに、指定された期間にわたって子の位置を自動的に移行させる、アニメーション版のPositioned。<br>|
|[AnimatedSize](https://api.flutter.dev/flutter/widgets/AnimatedSize-class.html)| |指定された子供のサイズが変わるたびに、指定された期間にわたってサイズを自動的に変更するアニメーションウィジェット|
|[AnimatedWidget](https://api.flutter.dev/flutter/widgets/AnimatedWidget-class.html)| |指定されたListenableが値を変更したときに再構築するウィジェット。<br>|
|[AnimatedWidgetBaseState](https://api.flutter.dev/flutter/widgets/AnimatedWidgetBaseState-class.html)| |暗黙のアニメーションを持つウィジェットの基本クラス。<br>|

## Interaction Models

タッチイベントに対応し、ユーザーをさまざまなビューにルーティングします。

### Touch interactions

|Widget|画像|説明の翻訳|
|:--|:--|:--|
|[AbsorbPointer](https://api.flutter.dev/flutter/widgets/AbsorbPointer-class.html)| |ヒットテストの際にポインタを吸収ウィジェット。<br>吸収が真である場合、このウィジェットは、それ自体でヒットテストを終了するポインタイベントを受け取るから、そのサブツリーを防止します。<br>それはまだレイアウト中にスペースを消費し、いつものようにその子をペイントします。<br>それはRenderBox.hitTestからtrueを返すので、それはちょうど、位置イベントのターゲットであることから、その子を防ぎます。<br>|
|[Dismissible](https://api.flutter.dev/flutter/widgets/Dismissible-class.html)| |指示された方向にドラッグして却下することができるウィジェット。<br> DismissDirectionにこのウィジェットをドラッグするか、投げつけことは子供がビューの外にスライドさせます。<br> resizeDurationが非ヌルである場合にスライドアニメーション以下、DismissibleウィジェットはresizeDuration上ゼロに（閉じ方向に直交する方又は幅）の高さをアニメーション化。<br>|
|[DragTarget](https://api.flutter.dev/flutter/widgets/DragTarget-class.html)| |ドラッグ可能なウィジェットがドロップされたときにデータを受信ウィジェット。<br>ドラッグはドラッグターゲットの上にドラッグすると、ドラッグターゲットは、それがドラッグ可能に運んでいるデータを受け入れるかどうかを尋ねています。<br>ユーザーが（それがドラッグ可能のデータを受け入れることが示されており、ドラッグターゲット）、ドラッグターゲットの上にドラッグドロップしない場合は、ドラッグターゲットは、ドラッグのデータを受け入れるように求めています。<br>|
|[Draggable](https://api.flutter.dev/flutter/widgets/Draggable-class.html)| |DragTargetからドラッグすることができるウィジェット。<br>ドラッグ可能なウィジェットがドラッグジェスチャの開始を認識すると、画面全体にユーザの指を追跡し、フィードバックウィジェットを表示します。<br>ユーザーが自分の指を離す場合DragTargetの上に、そのターゲットは、ドラッグによって運ばれたデータを受け入れるための機会を与えられています。<br>|
|[GestureDetector](https://api.flutter.dev/flutter/widgets/GestureDetector-class.html)| |ジェスチャーを検知するウィジェット。<br>その非ヌルコールバックに対応するジェスチャーを認識しようとします。<br>このウィジェットは、子を持つ場合、それはそのサイジング動作のためにその子に延期します。<br>それは子供を持っていない場合は、代わりに親に合わせて成長します。<br>|
|[IgnorePointer](https://api.flutter.dev/flutter/widgets/IgnorePointer-class.html)| |ヒットテストの間に見えないウィジェット。<br>無視がtrueの場合、このウィジェット（およびそのサブツリー）がヒットテストには見えません。<br>それはまだレイアウト中にスペースを消費し、いつものようにその子をペイントします。<br>それはRenderBox.hitTestからfalseを返すので、それはちょうど、位置イベントのターゲットにすることはできません。<br>|
|[LongPressDraggable](https://api.flutter.dev/flutter/widgets/LongPressDraggable-class.html)| |長押しから始まるその子ドラッグ可能にします。<br>|
|[Scrollable](https://api.flutter.dev/flutter/widgets/Scrollable-class.html)| |スクロール可能ではジェスチャー認識などのスクロール可能なウィジェットの相互作用モデルを、実装していますが、実際に子供を表示するビューポートは、どのように構築されるかについての意見を持っていません。<br>|

### Routing

|Widget|画像|説明の翻訳|
|:--|:--|:--|
|[Hero](https://api.flutter.dev/flutter/widgets/Hero-class.html)|<img src=https://flutter.github.io/assets-for-api-docs/assets/interaction/heroes.png alt=Hero width=200 />|ウィジェットヒーローアニメーションのための候補であるとしてマークがその子という。<br>|
|[Navigator](https://api.flutter.dev/flutter/widgets/Navigator-class.html)| |スタック規律と子ウィジェットのセットを管理ウィジェット。<br>多くのアプリケーションは、視覚的に古いページの一番上に最近訪問したページとオーバーレイを使用して、その論理履歴を表示するために、自分のウィジェット階層の最上部付近ナビゲーターを持っています。<br>このパターンを使用すると、ナビゲーターは、視覚的にオーバーレイで周りのウィジェットを移動することによって、あるページから別のページに遷移することができます。<br>同様に、ナビゲータは、現在のページ上のダイアログウィジェットを配置することによってダイアログを表示するために使用することができます。<br>|

## Async

Flutterアプリケーションへの非同期パターン

|Widget|画像|説明の翻訳|
|:--|:--|:--|
|[FutureBuilder](https://api.flutter.dev/flutter/widgets/FutureBuilder-class.html)| |未来との相互作用の最新のスナップショットに基づいて自分自身を構築するウィジェット。<br>|
|[StreamBuilder](https://api.flutter.dev/flutter/widgets/StreamBuilder-class.html)| |Streamとの対話の最新のスナップショットに基づいて自分自身を構築するウィジェット。<br>|

## Accessibility

アプリをアクセス可能にします。

|Widget|画像|説明の翻訳|
|:--|:--|:--|
|[Semantics](https://api.flutter.dev/flutter/widgets/Semantics-class.html)| |ウィジェットの意味の説明でウィジェットツリーに注釈を付けるウィジェット。<br>アプリケーションの意味を判断するために、ユーザー補助ツール、検索エンジン、およびその他の意味解析ソフトウェアによって使用されます。<br>|
|[MergeSemantics](https://api.flutter.dev/flutter/widgets/MergeSemantics-class.html)| |その子孫のセマンティクスをマージするウィジェット。<br>|
|[ExcludeSemantics](https://api.flutter.dev/flutter/widgets/ExcludeSemantics-class.html)| |その子孫のすべてのセマンティクスを削除するウィジェット。<br>これは、そうでなければ報告されているが混乱を招くだけのサブウィジェットを隠すために使用できます。<br>たとえば、Material Components Chipウィジェットはチップラベルと重複するため、アバターを非表示にします。<br>|

## Cupertino(iOS-style widgets)

現在のiOSデザイン言語用の美しく忠実度の高いウィジェット。

|Widget|画像|説明の翻訳|
|:--|:--|:--|
|[CupertinoActionSheet](https://api.flutter.dev/flutter/cupertino/CupertinoActionSheet-class.html)|<img src=https://flutter.dev//images/widget-catalog/cupertino-action-sheet.png width=150 />|多くの間でオプションを選択するためのiOS風のモーダル下アクションシート。<br>|
|[CupertinoActivityIndicator](https://api.flutter.dev/flutter/cupertino/CupertinoActivityIndicator-class.html)|<img src=https://flutter.dev//images/widget-catalog/cupertino-activity-indicator.png width=150 />|アンiOSのスタイル活動の指標。<br>円形「スピナー」を表示します。<br>|
|[CupertinoAlertDialog](https://api.flutter.dev/flutter/cupertino/CupertinoAlertDialog-class.html)|<img src=https://flutter.dev//images/widget-catalog/cupertino-alert-dialog.png width=150 />|iOSのスタイルの警告ダイアログ。<br>|
|[CupertinoButton](https://api.flutter.dev/flutter/cupertino/CupertinoButton-class.html)|<img src=https://flutter.dev//images/widget-catalog/cupertino-button.png width=150 />|iOSのスタイルのボタン。<br>|
|[CupertinoContextMenu](https://api.flutter.dev/flutter/cupertino/CupertinoContextMenu-class.html)|<img src=https://flutter.dev//images/widget-catalog/cupertino-context-menu.png width=150 />|子供が長押しされたときに開くのiOSスタイルのフルスクリーンモーダルルート。<br>あなたのコンテンツに関連するアクションを表示するために使用します。<br>|
|[CupertinoDatePicker](https://api.flutter.dev/flutter/cupertino/CupertinoDatePicker-class.html)|<img src=https://flutter.dev//images/widget-catalog/cupertino-date-picker.png width=150 />|アンのiOSスタイルの日付または日付と時刻のピッカー。<br>|
|[CupertinoDialog](https://api.flutter.dev/flutter/cupertino/CupertinoDialog-class.html)|<img src=https://flutter.dev//images/widget-catalog/cupertino-dialog.png width=150 />|iOSのスタイルのダイアログ。<br>|
|[CupertinoDialogAction](https://api.flutter.dev/flutter/cupertino/CupertinoDialogAction-class.html)|<img src=https://flutter.dev//images/widget-catalog/cupertino-dialog-action.png width=150 />|一般的にCupertinoAlertDialogに使用されるボタン。<br>|
|[CupertinoFullscreenDialogTransition](https://api.flutter.dev/flutter/cupertino/CupertinoFullscreenDialogTransition-class.html)|<img src=https://flutter.dev//images/widget-catalog/cupertino-fullscreen-dialog-transition.png width=150 />|アンのiOSスタイルの変化は、フルスクリーンダイアログを召喚するために使用します。<br>|
|[CupertinoNavigationBar](https://api.flutter.dev/flutter/cupertino/CupertinoNavigationBar-class.html)|<img src=https://flutter.dev//images/widget-catalog/cupertino-nav-bar.png width=150 />|iOSのスタイルトップナビゲーションバー。<br>典型的CupertinoPageScaffoldと共に使用。<br>|
|[CupertinoPageScaffold](https://api.flutter.dev/flutter/cupertino/CupertinoPageScaffold-class.html)|<img src=https://flutter.dev//images/widget-catalog/cupertino-page-scaffold.png width=150 />|基本的なiOSのスタイルのページのレイアウト構造。<br>背景にナビゲーションバーとコンテンツを配置します。<br>|
|[CupertinoPageTransition](https://api.flutter.dev/flutter/cupertino/CupertinoPageTransition-class.html)|<img src=https://flutter.dev//images/widget-catalog/cupertino-page-transition.png width=150 />|iOSのスタイルページ遷移アニメーションを提供します。<br>|
|[CupertinoPicker](https://api.flutter.dev/flutter/cupertino/CupertinoPicker-class.html)|<img src=https://flutter.dev//images/widget-catalog/cupertino-picker.png width=150 />|iOSのスタイルピッカーコントロール。<br>短いリスト内の項目を選択するために使用します。<br>|
|[CupertinoPopupSurface](https://api.flutter.dev/flutter/cupertino/CupertinoPopupSurface-class.html)|<img src=https://flutter.dev//images/catalog-widget-placeholder.png width=150 />|角の丸い四角形の表面などの警告ダイアログやアクションシートなどのiOSポップアップ表面のように見える、という。<br>|
|[CupertinoScrollbar](https://api.flutter.dev/flutter/cupertino/CupertinoScrollbar-class.html)|<img src=https://flutter.dev//images/widget-catalog/cupertino-scrollbar.png width=150 />|スクロール可能なウィジェットのどの部分を指すのiOSスタイルのスクロールバーは、現在表示されています。<br>|
|[CupertinoSegmentedControl](https://api.flutter.dev/flutter/cupertino/CupertinoSegmentedControl-class.html)|<img src=https://flutter.dev//images/widget-catalog/cupertino-segmented-control.png width=150 />|iOSのスタイルは、コントロールをセグメント化。<br>水平リスト内で相互に排他的なオプションを選択するために使用します。<br>|
|[CupertinoSlider](https://api.flutter.dev/flutter/cupertino/CupertinoSlider-class.html)|<img src=https://flutter.dev//images/widget-catalog/cupertino-slider.png width=150 />|値の範囲から選択するために使用します。<br>|
|[CupertinoSlidingSegmentedControl](https://api.flutter.dev/flutter/cupertino/CupertinoSlidingSegmentedControl-class.html)|<img src=https://flutter.dev//images/widget-catalog/cupertino-sliding-segmented-control.png width=150 />|iOSの-13-styleがコントロールをセグメント化。<br>水平リスト内で相互に排他的なオプションを選択するために使用します。<br>|
|[CupertinoSwitch](https://api.flutter.dev/flutter/cupertino/CupertinoSwitch-class.html)|<img src=https://flutter.dev//images/widget-catalog/cupertino-switch.png width=150 />|iOSのスタイルのスイッチ。<br> 1つの設定のオン/オフを切り替えるために使用。<br>|
|[CupertinoTabBar](https://api.flutter.dev/flutter/cupertino/CupertinoTabBar-class.html)|<img src=https://flutter.dev//images/widget-catalog/cupertino-tab-bar.png width=150 />|iOSのスタイル下のタブバー。<br>典型的CupertinoTabScaffoldと共に使用。<br>|
|[CupertinoTabScaffold](https://api.flutter.dev/flutter/cupertino/CupertinoTabScaffold-class.html)|<img src=https://flutter.dev//images/widget-catalog/cupertino-tab-scaffold.png width=150 />|タブiOSアプリの構造。<br>コンテンツのタブの上部のタブバーを配置します。<br>|
|[CupertinoTabView](https://api.flutter.dev/flutter/cupertino/CupertinoTabView-class.html)|<img src=https://flutter.dev//images/widget-catalog/cupertino-tab-view.png width=150 />|タブ間の平行ナビゲーションをサポートしているタブのルートコンテンツ。<br>典型的CupertinoTabScaffoldと共に使用。<br>|
|[CupertinoTextField](https://api.flutter.dev/flutter/cupertino/CupertinoTextField-class.html)|<img src=https://flutter.dev//images/widget-catalog/cupertino-textfield.png width=150 />|iOSのスタイルのテキストフィールド。<br>|
|[CupertinoTimerPicker](https://api.flutter.dev/flutter/cupertino/CupertinoTimerPicker-class.html)|<img src=https://flutter.dev//images/widget-catalog/cupertino-timer-picker.png width=150 />|iOSのスタイルカウントダウンタイマーピッカー。<br>|