- 
- 
+ 
+ 
-
+
+
-
+
+
{:.text-center}
+
+ほとんどは想定通りに見えると思いますが、ピンク色で表示されているContainerについては疑問に思うかもしれません。[Container]は子ウィジェットをカスタマイズできるウィジェットクラスです。パディング、マージン、ボーダー、背景色を追加したいときなど、その機能の一部を名前付けするためにContainerを使用します。
+
+この例では、各 [Text]ウィジェットはマージンを追加するために Container内に配置されています。全体の [Row]も同様に、行の周囲にパディングを追加するためにContainer内に配置されています。
+
+この例のUIの残りの部分はプロパティによって制御されています。[Icon][]の色はその`color`プロパティを使用して設定します。フォント、その色、重さなどを設定するために`Text.style`プロパティを使用します。
+
+## ウィジェットのレイアウト
+Flutterでは、ウィジェットをどのようにレイアウトするのでしょうか？このセクションでは、シンプルなウィジェットの作成と表示方法を説明します。また、シンプルなHello Worldアプリケーションのコードも示します。
+
+Flutterでは、少しのステップだけでテキスト、アイコン、画像のレイアウトができます。
+
+### 1. レイアウトウィジェットの選択
+表示するウィジェットの整列、制約の種類によって、さまざまな[layout widgets][]から選択します。レイアウトウィジェットの特性は、子ウィジェットに適用されます。
+この例では、子ウィジェットを水平、垂直方向に中央に配置する[`Center`][]ウィジェットを使っています。
+
+
+### 2. 表示するウィジェットの作成
+例として、[`Text`][]ウィジェットを作成します：
```dart
Text('Hello World'),
```
+
+[`Image`][]ウィジェットを作成します:
```dart
@@ -110,7 +158,10 @@ Image.asset(
),
```
+
+[`Icon`][] ウィジェットを作成します:
```dart
@@ -120,18 +171,33 @@ Icon(
),
```
+
+### 3. 表示するウィジェットをレイアウトウィジェットに追加します
+
+すべてのレイアウトウィジェットは、次のような特徴を持っています:
+
+* `child` プロパティ:一つの子要素を持つ場合—例)
+ `Center`、`Container`ウィジェット
+* `children` プロパティ: リストとして複数の子要素を保つ場合—例)
+ `Row`, `Column`, `ListView`, `Stack`ウィジェット
+
+`Text`ウィジェットを`Center`ウィジェットに追加します:
```dart
@@ -140,12 +206,18 @@ const Center(
),
```
+
+### 4. ページにレイアウトウィジェットを追加する
+
+Flutterのアプリ自体がウィジェットであり、ほとんどのウィジェットには[`build()`][]メソッドがあります。アプリの`build()`メソッドでウィジェットを生成して返すと、そのウィジェットが表示されます。
+
+#### Material apps
+
+`Material`appsの場合、[`Scaffold`][]ウィジェットを使用することができます。デフォルトのバナー、背景色を提供し、ドロワー、スナックバー、ボトムシートを追加するためのAPIがあります。そして、ホームページの`body`プロパティに直接`Center`ウィジェットを追加することができます。
@@ -177,6 +253,7 @@ class MyApp extends StatelessWidget {
}
```
+
+{{site.alert.note}}
+[Material library][]は、[Material Design][]の原則に従ったウィジェットを実装しています。UIをデザインする際には、標準の[widget library][]からのウィジェットだけを使用することも、Materialライブラリからのウィジェットを使用することもできます。両方のライブラリからウィジェットを混ぜて使用したり、既存のウィジェットをカスタマイズすることや、自分自身のカスタムウィジェットを作成することもできます。
+{{site.alert.end}}
+
+#### 非Material apps
+
+非Material appsの場合、`Center`ウィジェットをアプリの`build()`メソッドに追加できます：
@@ -216,16 +302,22 @@ class MyApp extends StatelessWidget {
}
```
+
+非Material appsにはデフォルトでは`AppBar`、タイトル、背景色が含まれません。非Material appsでこれらの機能を使用したい場合は、自分で作成する必要があります。このアプリでは、背景色を白に、テキストをダークグレーに変更して、Materialアプリを模倣しています。
+
+左側の列のウィジェットツリーでは、行(Row)と列(Column)がネストされています。
+
+[行(Row)と列(Column)のネスト](#nesting-rows-and-columns)で、Pavlova（ババロアショップアプリ）のレイアウトコードの一部を実装します。
{{site.alert.note}}
- `Row` and `Column` are basic primitive widgets for horizontal
- and vertical layouts—these low-level widgets allow for maximum
- customization. Flutter also offers specialized, higher level widgets
- that might be sufficient for your needs. For example,
- instead of `Row` you might prefer [`ListTile`][],
- an easy-to-use widget with properties for leading and trailing icons,
- and up to 3 lines of text. Instead of Column, you might prefer
- [`ListView`][], a column-like layout that automatically scrolls
- if its content is too long to fit the available space.
- For more information, see [Common layout widgets][].
-{{site.alert.end}}
-
+
+`Row`と`Column`は、水平と垂直のレイアウトのための基本的なウィジェットであり、最大限のカスタマイズが可能です。Flutterには、用途に特化したウィジェットも提供しており、これらが要件を満たすために十分な場合もあります。例えば、`Row`の代わりに[`ListTile`][]の方が適切かもしれません。`ListTile`は、先頭、末尾のアイコンと最大3行のテキストを持つ使いやすいウィジェットです。`Column`の代わりに[`ListView`][]が適しているかもしれません。`ListView`は、コンテンツがスペースに収まらない場合に自動的にスクロールする、Columnに似たレイアウトを実現します。詳細は、[Common layout widgets][]を参照して下さい。{{site.alert.end}}
+
+
+### ウィジェットの整列
+
+`mainAxisAlignment`と`crossAxisAlignment`のプロパティを使用して、行(Row)や列(Column)が、子ウィジェットをどのように整列させるかを制御できます。行(Row)の場合、主軸（main axis）は水平方向に、交差軸（cross axis）は垂直方向になります。列(Column)の場合、主軸（main axis）は垂直方向に、交差軸(cross axis)は水平方向に走ります。
{:.text-center}
+
+[`Expanded`][] ウィジェットを使用すると、ウィジェットを行または列に合わせてサイズ調整することができます。前の例の、画像の行がレンダリング領域に対して広すぎる問題を解決するためには、各画像を `Expanded` ウィジェットでラップします。
{:.text-center}
+
+枠線で囲まれた部分は2つの行(Row)として実装されています。評価の行(Row)には5つの星とレビューの数が含まれています。アイコンの行(Row)には、アイコンとテキストの3つの列(Row)が含まれています。
+
+評価の行(Row)に対するウィジェットツリー：
+
{:.text-center}
+
+
+ratings変数は、5つの星アイコンの小さな行(Row)とテキストを含む行(Row)を生成します：
```dart
@@ -543,20 +713,30 @@ final [!ratings!] = Container(
);
```
+
+{{site.alert.tip}}
+ 非常に深くネストされたレイアウトコードでは、読みやすくするためにUIの一部を変数や関数で実装します。
+{{site.alert.end}}
+
+評価行の下のアイコン行(Row)は3つの列(Column)を含んでいます。それぞれの列(Column)にはアイコンと2行のテキストが含まれています。そのウィジェットツリーは次の通りです：
{:.text-center}
+
+`iconList`変数はアイコンの行に該当します:
```dart
@@ -605,8 +785,11 @@ final [!iconList!] = DefaultTextStyle.merge(
);
```
+
+`leftColumn`変数には、評価とアイコンの行に加えて、ババロアについて説明するタイトルとテキストも含まれています：
```dart
@@ -623,6 +806,7 @@ final [!leftColumn!] = Container(
);
```
+
+
+左側の列は、幅の制約をつけるためにSizedBoxに配置されています。最終的に、UIはCardの中にある全体の行（左の列と画像を含む）で構築されます。
+
+ババロアの画像[Pavlova image][]は[Pixabay][]のものを使用しています。
+Image.network()を使用してネットワーク経由で画像を読み込むことができますが、
+この例では、画像はプロジェクトのimagesディレクトリに保存され、[pubspec file][]に追加され、Images.asset()を使用してアクセスしています。詳細は[Adding assets and images][]をご覧ください。
```dart
@@ -655,6 +846,7 @@ body: Center(
),
```
+
+{{site.alert.tip}}
+ ババロアの例は、タブレットなどの広いデバイスで横向きにした時に最適に動作します。 iOSシミュレータでこの例を実行している場合は、**Hardware > Device**メニューを使用してデバイスを選択できます。この例では、iPad Proを推奨します。**Hardware > Rotate**を使用して、その向きをランドスケープモードに変更できます。また、**Window > Scale**を使用して、シミュレータウィンドウのサイズを変更することができます（論理ピクセルの数は変わりません）。
+{{site.alert.end}}
**App source:** [pavlova]({{examples}}/layout/pavlova)
@@ -673,8 +869,12 @@ body: Center(
{:.text-center}
-
- Uses `GridView.extent` to create a grid with tiles a maximum
- 150 pixels wide.
-
+
+最大150ピクセル幅のタイルで構成されるグリッドを作成するために、`GridView.extent`を使用します。
**App source:** [grid_and_list]({{examples}}/layout/grid_and_list)
{:.text-center}
- Uses `Stack` to overlay a `Container`
- (that displays its `Text` on a translucent
- black background) on top of a `CircleAvatar`.
- The `Stack` offsets the text using the `alignment` property and
- `Alignment`s.
-
+
+`Stack`を使用して`CircleAvatar`の上に`Container`（透明な黒い背景に`Text`を表示）を重ねます。 `Stack`は`alignment`プロパティと`Alignment`を使用してテキストの位置を補正します。
+
+
**App source:** [card_and_stack]({{examples}}/layout/card_and_stack)
{:.text-center}
- Uses `Stack` to overlay an icon on top of an image.
+
+画像の上にアイコンを重ね合わせるために`Stack`を使用します。
+
**Dart code:** [bottom_navigation_demo.dart]({{demo}}/material/bottom_navigation_demo.dart)
from the [Flutter Gallery][repo]
{:.text-center}
+
+`SizedBox`で囲んでサイズを設定した`Card`です。この`Card`には3つの`ListTile`が含まれています。`Divider`で最初と2番目の`ListTile`を分けています。
+
**App source:** [card_and_stack]({{examples}}/layout/card_and_stack)