Flutter のレイアウト

Flutter のレイアウトメカニズムの中核はウィジェットです。 Flutter では、ほぼすべてがウィジェットです。レイアウトモデルさえもウィジェットです。 Flutter アプリで表示される画像、アイコン、テキストはすべてウィジェットです。ただし、行、列、表示されるウィジェットを配置、制限、整列させるグリッド。

ウィジェットを合成してレイアウトを作成し、より複雑なウィジェットを構築します。たとえば、以下の最初のスクリーンショットには、ラベルが付いた 3 つのアイコンが表示されています。それぞれの下に:

2 番目のスクリーンショットには、次の行が表示された視覚的なレイアウトが表示されます。 3 つの列。各列にはアイコンとラベルが含まれます。

この UI のウィジェットツリーの図は次のとおりです。

Node tree

このほとんどは予想どおりに見えるはずですが、疑問に思うかもしれません。コンテナー (ピンク色で表示) について説明します。Containerウィジェットクラスですこれにより、子ウィジェットをカスタマイズできるようになります。使うContainerいつパディング、マージン、境界線、または背景色を追加したい場合は、その機能のいくつかを挙げます。

この例では、それぞれTextウィジェットはContainer余白を追加します。全体Rowにも置かれていますContainer行の周囲にパディングを追加します。

この例の残りの UI はプロパティによって制御されます。を設定しますIconの色を使用してcolor財産。使用Text.styleプロパティを使用して、フォント、その色、太さなどを設定します。列と行には、その行をどのように配置するかを指定できるプロパティがあります。子は垂直または水平に整列され、どのくらいのスペースが確保されますか子供たちが占有すべきです。

Flutter で 1 つのウィジェットをレイアウトするにはどうすればよいでしょうか?このセクションでは、簡単なウィジェットを作成して表示する方法を示します。単純な Hello World アプリのコード全体も示しています。

Flutter では、テキスト、アイコン、または画面上の画像。

さまざまな種類からお選びくださいレイアウトウィジェットベースの表示されるウィジェットをどのように配置または制限するかについて、これらの特性は通常、含まれるウィジェット。

この例では、Centerコンテンツを中心に置く水平方向と垂直方向。

たとえば、Textウィジェット:

Text('Hello World'),

を作成しますImageウィジェット:

Image.asset(
  'images/lake.jpg',
  fit: BoxFit.cover,
),

を作成しますIconウィジェット:

Icon(
  Icons.star,
  color: Colors.red[500],
),

すべてのレイアウトウィジェットには次のいずれかが含まれます。

あchildたとえば、子供が 1 人いる場合は、プロパティCenterまたContainer
あchildrenウィジェットのリストを受け取る場合はプロパティを使用します。たとえば、Row、Column、ListView、またStack。

を追加します。TextウィジェットへのCenterウィジェット:

const Center(
  child: Text('Hello World'),
),

Flutter アプリ自体はウィジェットであり、ほとんどのウィジェットにはbuild()方法。アプリのウィジェットをインスタンス化して返すbuild()方法ウィジェットを表示します。

素材アプリ

のためにMaterialアプリを使用できますScaffoldウィジェット; デフォルトのバナー、背景色、引き出し、スナックバー、ボトムシートを追加するための API を備えています。次に、Centerウィジェットを直接bodyホームページのプロパティ。

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter layout demo',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter layout demo'),
        ),
        body: const Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

非マテリアルアプリ

マテリアル以外のアプリの場合は、Centerアプリのウィジェットbuild()方法：

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(color: Colors.white),
      child: const Center(
        child: Text(
          'Hello World',
          textDirection: TextDirection.ltr,
          style: TextStyle(
            fontSize: 32,
            color: Colors.black87,
          ),
        ),
      ),
    );
  }
}

デフォルトでは、マテリアル以外のアプリにはAppBar、タイトル、または背景色。マテリアル以外のアプリでこれらの機能が必要な場合は、自分で構築する必要があります。このアプリは背景を変更しますマテリアルアプリを模倣するには、色を白、テキストを濃いグレーにします。

それでおしまい！アプリを実行すると、次のように表示されます。こんにちは世界。

アプリのソースコード:

素材アプリ
非マテリアルアプリ

複数のウィジェットを縦横に配置する

最も一般的なレイアウトパターンの 1 つは、ウィジェットを垂直方向または水平方向に配置します。を使用できますRowウィジェットを水平に配置するにはウィジェット、そしてColumnウィジェットを使用してウィジェットを垂直に配置します。

Flutter で行または列を作成するには、子のリストを追加します。ウィジェットをRowまたColumnウィジェット。順番に、それぞれの子自体が行または列などになる可能性があります。次の例は、行をネストしたり、行または列の内側の列。

このレイアウトは次のように構成されていますRow。行には 2 つの子が含まれています。左側に列、右側に画像:

Screenshot with callouts showing the row containing two children

左側の列のウィジェットツリーは行と列をネストします。

Diagram showing a left column broken down to its sub-rows and sub-columns

Pavlova のレイアウトコードの一部を次のように実装します。行と列のネスト。

ノート： RowとColumn水平方向の基本的なプリミティブウィジェットですおよび垂直レイアウト - これらの低レベルのウィジェットにより、最大限のカスタマイズ。 Flutter は、専門化された高レベルのウィジェットも提供しますあなたのニーズにはそれで十分かもしれません。例えば、それ以外のRowあなたが好むかもしれませんListTile、先頭および末尾のアイコンのプロパティを備えた使いやすいウィジェット最大 3 行のテキスト。列の代わりに、ListView、自動的にスクロールする列のようなレイアウトコンテンツが長すぎて利用可能なスペースに収まらない場合。詳細については、を参照してください。一般的なレイアウトウィジェット。

ウィジェットの整列

行または列がその子をどのように配置するかを制御します。mainAxisAlignmentとcrossAxisAlignmentプロパティ。行の場合、主軸は水平に走り、横軸は走ります。垂直に。柱の場合、主軸は垂直に走り、十字は軸は水平に走ります。

Diagram showing the main axis and cross axis for a row

Diagram showing the main axis and cross axis for a column

のMainAxisAlignmentとCrossAxisAlignmentenum は、アライメントを制御するためのさまざまな定数を提供します。

次の例では、3 つの画像はそれぞれ幅 100 ピクセルです。レンダーボックス(この場合は画面全体) 幅が 300 ピクセルを超えているため、主軸を設定しますへの位置合わせspaceEvenly自由な水平方向を分割します各画像の間、前後に均等なスペースを確保します。

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Image.asset('images/pic1.jpg'),
    Image.asset('images/pic2.jpg'),
    Image.asset('images/pic3.jpg'),
  ],
);

Row with 3 evenly spaced images

アプリのソース: 行_列

列は行と同じように機能します。次の例は列を示しています 3 つの画像で構成され、それぞれの高さは 100 ピクセルです。レンダーボックスの高さ (この場合、画面全体) は 300 ピクセルを超えるため、主軸の位置合わせをに設定spaceEvenly自由な垂直方向を分割します各画像の間、上、下のスペースを均等にします。

Column(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Image.asset('images/pic1.jpg'),
    Image.asset('images/pic2.jpg'),
    Image.asset('images/pic3.jpg'),
  ],
);

アプリのソース: 行_列

ウィジェットのサイズ変更

レイアウトが大きすぎてデバイスに収まらない場合は、黄色の影響を受けた端に沿って黒い縞模様が現れます。ここにあります例幅が広すぎる行:

Overly-wide row

ウィジェットは、行または列内に収まるようにサイズを変更できます。Expandedウィジェット。前の例を修正するには、画像の行がレンダーボックスに対して幅が広すぎます。各画像をExpandedウィジェット。

Row(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Expanded(
      child: Image.asset('images/pic1.jpg'),
    ),
    Expanded(
      child: Image.asset('images/pic2.jpg'),
    ),
    Expanded(
      child: Image.asset('images/pic3.jpg'),
    ),
  ],
);

Row of 3 images that are too wide, but each is constrained to take only 1/3 of the space

アプリのソース: サイズ調整

おそらく、ウィジェットがそのウィジェットの 2 倍のスペースを占める必要があるかもしれません。兄弟。このためには、Expandedウィジェットflex財産、ウィジェットのフレックス係数を決定する整数。デフォルトのフレックス係数は 1 です。次のコードセット中央の画像のフレックス係数を 2 にします。

Row(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Expanded(
      child: Image.asset('images/pic1.jpg'),
    ),
    Expanded(
      flex: 2,
      child: Image.asset('images/pic2.jpg'),
    ),
    Expanded(
      child: Image.asset('images/pic3.jpg'),
    ),
  ],
);

Row of 3 images with the middle image twice as wide as the others

アプリのソース: サイズ調整

ウィジェットのパッキング

デフォルトでは、行または列は主軸に沿って同じだけのスペースを占めます。できるだけ密に詰め込みたい場合は、それを設定するmainAxisSizeにMainAxisSize.min。次の例は、このプロパティを使用して、星のアイコンをまとめます。

Row(
  mainAxisSize: MainAxisSize.min,
  children: [
    Icon(Icons.star, color: Colors.green[500]),
    Icon(Icons.star, color: Colors.green[500]),
    Icon(Icons.star, color: Colors.green[500]),
    const Icon(Icons.star, color: Colors.black),
    const Icon(Icons.star, color: Colors.black),
  ],
)

Row of 5 stars, packed together in the middle of the row

アプリのソース: パブロワ

行と列のネスト

レイアウトフレームワークを使用すると、行と列をネストできます。行と列の内側を必要なだけ深くします。概要を示したコードを見てみましょう次のレイアウトのセクション:

Screenshot of the pavlova app, with the ratings and icon rows outlined in red

アウトラインのセクションは 2 行として実装されます。評価行には次の内容が含まれます星5つとレビューの数。アイコン行には 3 つのアイコンが含まれていますアイコンとテキストの列。

評価行のウィジェットツリー:

のratings変数は、より小さな行を含む行を作成します 5 つ星のアイコンとテキスト:

var stars = Row(
  mainAxisSize: MainAxisSize.min,
  children: [
    Icon(Icons.star, color: Colors.green[500]),
    Icon(Icons.star, color: Colors.green[500]),
    Icon(Icons.star, color: Colors.green[500]),
    const Icon(Icons.star, color: Colors.black),
    const Icon(Icons.star, color: Colors.black),
  ],
);

final ratings = Container(
  padding: const EdgeInsets.all(20),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: [
      stars,
      const Text(
        '170 Reviews',
        style: TextStyle(
          color: Colors.black,
          fontWeight: FontWeight.w800,
          fontFamily: 'Roboto',
          letterSpacing: 0.5,
          fontSize: 20,
        ),
      ),
    ],
  ),
);

評価行の下のアイコン行には 3 つの列が含まれています。各列にはアイコンと 2 行のテキストが含まれます。ウィジェットツリーでわかるように:

のiconList変数はアイコン行を定義します。

const descTextStyle = TextStyle(
  color: Colors.black,
  fontWeight: FontWeight.w800,
  fontFamily: 'Roboto',
  letterSpacing: 0.5,
  fontSize: 18,
  height: 2,
);

// DefaultTextStyle.merge() allows you to create a default text
// style that is inherited by its child and all subsequent children.
final iconList = DefaultTextStyle.merge(
  style: descTextStyle,
  child: Container(
    padding: const EdgeInsets.all(20),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        Column(
          children: [
            Icon(Icons.kitchen, color: Colors.green[500]),
            const Text('PREP:'),
            const Text('25 min'),
          ],
        ),
        Column(
          children: [
            Icon(Icons.timer, color: Colors.green[500]),
            const Text('COOK:'),
            const Text('1 hr'),
          ],
        ),
        Column(
          children: [
            Icon(Icons.restaurant, color: Colors.green[500]),
            const Text('FEEDS:'),
            const Text('4-6'),
          ],
        ),
      ],
    ),
  ),
);

のleftColumn変数には評価とアイコンの行が含まれます。パブロワを説明するタイトルとテキスト:

final leftColumn = Container(
  padding: const EdgeInsets.fromLTRB(20, 30, 20, 20),
  child: Column(
    children: [
      titleText,
      subTitle,
      ratings,
      iconList,
    ],
  ),
);

左側の列は、SizedBox幅を制限します。最後に、UI は行全体 ( 左の列と画像) 内Card。

のパブロワの画像からピクサベイ。を使用してネットから画像を埋め込むことができますImage.network()しかし、この例では、画像はプロジェクト内の画像ディレクトリに保存されます。に追加されましたパブスペックファイルを使用してアクセスします。Images.asset()。詳細については、を参照してください。アセットと画像の追加。

body: Center(
  child: Container(
    margin: const EdgeInsets.fromLTRB(0, 40, 0, 30),
    height: 600,
    child: Card(
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SizedBox(
            width: 440,
            child: leftColumn,
          ),
          mainImage,
        ],
      ),
    ),
  ),
),

アプリのソース: パブロワ

一般的なレイアウトウィジェット

Flutter には、レイアウトウィジェットの豊富なライブラリがあります。最も一般的に使用されるもののいくつかを次に示します。目的は、できるだけ早く立ち上げて実行できるようにすることです。完全なリストに圧倒されるよりも。その他の利用可能なウィジェットについては、を参照してくださいウィジェットカタログ、または、APIリファレンスドキュメント。また、API ドキュメントのウィジェットページでは、多くの場合、提案が行われます。ニーズに合った同様のウィジェットについて説明します。

次のウィジェットは 2 つのカテゴリに分類されます: 標準ウィジェットからウィジェットライブラリ、およびからの特殊なウィジェットマテリアルライブラリ。どのアプリでもウィジェットライブラリを使用できますが、マテリアルコンポーネントライブラリを使用できるのはマテリアルアプリのみです。

標準ウィジェット

Container: パディング、マージン、ボーダーを追加します。ウィジェットの背景色やその他の装飾。
GridView: ウィジェットをスクロール可能なグリッドとして配置します。
ListView: ウィジェットをスクロール可能なリストとして配置します。
Stack: ウィジェットを別のウィジェットの上に重ねます。

マテリアルウィジェット

Card: 関連情報をボックスに整理します。丸い角とドロップシャドウ。
ListTile: 最大 3 行のテキストを整理します。オプションで先頭と末尾のアイコンを 1 行に配置します。

容器

多くのレイアウトでは、Container別れるパディングを使用してウィジェットを使用したり、境界線やマージンを追加したりできます。デバイスの背景を変更するには、レイアウト全体を 1 つにまとめるContainerそしてその背景を変える色とかイメージとか。

概要（コンテナ）

パディング、マージン、境界線を追加する
背景色や画像を変更する
単一の子ウィジェットが含まれますが、その子は行、列、またはウィジェットツリーのルート

Diagram showing: margin, border, padding, and content

例（コンテナ）

このレイアウトは 2 つの行を含む 1 つの列で構成され、各行には次の内容が含まれます。画像2枚。あContainer背景色を変更するために使用されます列の色を明るい灰色にします。

Widget _buildImageColumn() {
  return Container(
    decoration: const BoxDecoration(
      color: Colors.black26,
    ),
    child: Column(
      children: [
        _buildImageRow(1),
        _buildImageRow(3),
      ],
    ),
  );
}

Screenshot showing 2 rows, each containing 2 images

あContainer丸い境界線と余白を追加するためにも使用されます各画像に:

Widget _buildDecoratedImage(int imageIndex) => Expanded(
      child: Container(
        decoration: BoxDecoration(
          border: Border.all(width: 10, color: Colors.black38),
          borderRadius: const BorderRadius.all(Radius.circular(8)),
        ),
        margin: const EdgeInsets.all(4),
        child: Image.asset('images/pic$imageIndex.jpg'),
      ),
    );

Widget _buildImageRow(int imageIndex) => Row(
      children: [
        _buildDecoratedImage(imageIndex),
        _buildDecoratedImage(imageIndex + 1),
      ],
    );

さらに見つけることができますContainerの例チュートリアルそして flutterギャラリー（実行中のアプリ、リポジトリ）。

アプリのソース: 容器

グリッドビュー

使用GridViewウィジェットを 2 次元として配置するにはリスト。GridView2 つの事前作成されたリストが提供されます。または、独自のカスタムグリッドを構築することもできます。ときGridViewコンテンツが長すぎてレンダーボックスに収まらないことを検出します。自動的にスクロールします。

概要 (GridView)

ウィジェットをグリッドに配置します
列の内容がレンダーボックスを超えることを検出します自動的にスクロールを提供します
独自のカスタムグリッドを構築するか、提供されているグリッドの 1 つを使用します。
- GridView.count列の数を指定できます
- GridView.extent最大ピクセルを指定できますタイルの幅

例 (グリッドビュー)

A 3-column grid of photos

用途GridView.extentタイルを最大限に使用してグリッドを作成するには幅150ピクセル。

アプリのソース: グリッドとリスト

A 2 column grid with footers

用途GridView.count2 つのタイルからなるグリッドを作成するにはポートレートモードでは幅が 3 タイル、ランドスケープモードでは 3 タイル幅になります。タイトルは、footerのプロパティ各GridTile。

ダーツコード: グリッドリスト_デモ.dartから flutterギャラリー

Widget _buildGrid() => GridView.extent(
    maxCrossAxisExtent: 150,
    padding: const EdgeInsets.all(4),
    mainAxisSpacing: 4,
    crossAxisSpacing: 4,
    children: _buildGridTileList(30));

// The images are saved with names pic0.jpg, pic1.jpg...pic29.jpg.
// The List.generate() constructor allows an easy way to create
// a list when objects have a predictable naming pattern.
List<Container> _buildGridTileList(int count) => List.generate(
    count, (i) => Container(child: Image.asset('images/pic$i.jpg')));

リストビュー

ListView、列のようなウィジェット、自動的にコンテンツが長すぎる場合にスクロールを提供します。そのレンダーボックス。

概要 (リストビュー)

専門的なColumnボックスのリストを整理するため
水平にも垂直にもレイアウト可能
コンテンツが収まらないことを検出し、スクロールを提供します
よりも設定可能性が低いColumn、しかし使いやすく、スクロールをサポートします

例 (リストビュー)

ListView containing movie theaters and restaurants

用途ListViewを使用してビジネスのリストを表示するにはListTiles.あDivider劇場を～から分離するそのレストラン。

アプリのソース: グリッドとリスト

ListView containing shades of blue

用途ListViewを表示するにはColorsからのマテリアルデザインパレット特定のカラーファミリー用。

ダーツコード: color_demo.dartから flutterギャラリー

Widget _buildList() {
  return ListView(
    children: [
      _tile('CineArts at the Empire', '85 W Portal Ave', Icons.theaters),
      _tile('The Castro Theater', '429 Castro St', Icons.theaters),
      _tile('Alamo Drafthouse Cinema', '2550 Mission St', Icons.theaters),
      _tile('Roxie Theater', '3117 16th St', Icons.theaters),
      _tile('United Artists Stonestown Twin', '501 Buckingham Way',
          Icons.theaters),
      _tile('AMC Metreon 16', '135 4th St #3000', Icons.theaters),
      const Divider(),
      _tile('K\'s Kitchen', '757 Monterey Blvd', Icons.restaurant),
      _tile('Emmy\'s Restaurant', '1923 Ocean Ave', Icons.restaurant),
      _tile(
          'Chaiya Thai Restaurant', '272 Claremont Blvd', Icons.restaurant),
      _tile('La Ciccia', '291 30th St', Icons.restaurant),
    ],
  );
}

ListTile _tile(String title, String subtitle, IconData icon) {
  return ListTile(
    title: Text(title,
        style: const TextStyle(
          fontWeight: FontWeight.w500,
          fontSize: 20,
        )),
    subtitle: Text(subtitle),
    leading: Icon(
      icon,
      color: Colors.blue[500],
    ),
  );
}

スタック

使用Stackベースの上にウィジェットを配置するにはウィジェット - 多くの場合は画像です。ウィジェットは完全にまたはベースウィジェットに部分的にオーバーラップします。

まとめ（スタック）

別のウィジェットと重なるウィジェットに使用します
子のリストの最初のウィジェットがベースウィジェットです。後続の子はそのベースウィジェットの上にオーバーレイされます
あStackのコンテンツはスクロールできません
レンダーボックスを超える子をクリップすることを選択できます

例（スタック）

Circular avatar image with a label

用途StackをオーバーレイするContainer(それを表示しますText半透明の上に黒の背景)CircleAvatar。のStackを使用してテキストをオフセットします。alignment財産とAlignments.

アプリのソース: カードとスタック

An image with a icon overlaid on top

用途Stack画像の上にアイコンをオーバーレイします。

ダーツコード: Bottom_navigation_demo.dartから flutterギャラリー

Widget _buildStack() {
  return Stack(
    alignment: const Alignment(0.6, 0.6),
    children: [
      const CircleAvatar(
        backgroundImage: AssetImage('images/pic.jpg'),
        radius: 100,
      ),
      Container(
        decoration: const BoxDecoration(
          color: Colors.black45,
        ),
        child: const Text(
          'Mia B',
          style: TextStyle(
            fontSize: 20,
            fontWeight: FontWeight.bold,
            color: Colors.white,
          ),
        ),
      ),
    ],
  );
}

カード

あCard、からマテリアルライブラリ、関連する情報のナゲットが含まれており、ほぼすべてのウィジェットから構成できますが、よく一緒に使用されます。ListTile。Card一人の子供がいて、ただし、その子は列、行、リスト、グリッドなどにすることができます。または複数の子をサポートするその他のウィジェット。デフォルトでは、Cardサイズを 0 × 0 ピクセルに縮小します。使用できますSizedBoxカードのサイズを制限します。

Flutter では、Cardわずかに丸みを帯びた角が特徴ですドロップシャドウで3D効果を与えます。を変更するCardのelevationプロパティを使用して制御できますドロップシャドウ効果。標高を 24 に設定すると、たとえば、視覚的に持ち上げます。Cardさらにそこから表面が変化し、影がより分散されます。サポートされている標高値のリストについては、を参照してください。標高の中に素材ガイドライン。サポートされていない値を指定すると、ドロップシャドウが完全に無効になります。

概要（カード）

を実装します。素材カード
関連する情報の塊を提示するために使用されます
子供を 1 人受け入れますが、その子供はRow、Column、または子のリストを保持する他のウィジェット
角丸とドロップシャドウで表示されます
あCardのコンテンツはスクロールできません
からマテリアルライブラリ

例（カード）

Card containing 3 ListTiles

あCard3 つの ListTiles を含み、ラップによってサイズ変更されますそれはSizedBox。あDivider最初のものを分離しますそして二番目ListTiles。

アプリのソース: カードとスタック

Card containing an image, text and buttons

あCard画像とテキストが含まれています。

ダーツコード: カード_デモ.ダーツから flutterギャラリー

Widget _buildCard() {
  return SizedBox(
    height: 210,
    child: Card(
      child: Column(
        children: [
          ListTile(
            title: const Text(
              '1625 Main Street',
              style: TextStyle(fontWeight: FontWeight.w500),
            ),
            subtitle: const Text('My City, CA 99984'),
            leading: Icon(
              Icons.restaurant_menu,
              color: Colors.blue[500],
            ),
          ),
          const Divider(),
          ListTile(
            title: const Text(
              '(408) 555-1212',
              style: TextStyle(fontWeight: FontWeight.w500),
            ),
            leading: Icon(
              Icons.contact_phone,
              color: Colors.blue[500],
            ),
          ),
          ListTile(
            title: const Text('costa@example.com'),
            leading: Icon(
              Icons.contact_mail,
              color: Colors.blue[500],
            ),
          ),
        ],
      ),
    ),
  );
}

リストタイル

使用ListTile、からの特殊な行ウィジェットマテリアルライブラリ、行を簡単に作成する方法最大 3 行のテキストとオプションの先頭を含むそして末尾のアイコン。ListTileで最も一般的に使用されますCardまたListViewですが、他の場所でも使用できます。

概要 (ListTile)

最大 3 行のテキストを含む特殊な行。オプションのアイコン
よりも設定可能性が低いRow、しかし使いやすい
からマテリアルライブラリ

例 (ListTile)

Card containing 3 ListTiles

あCard3個入りListTiles.

アプリのソース: カードとスタック

4 ListTiles, each containing a leading avatar

用途ListTile主要なウィジェットを備えています。
ダーツコード: list_demo.dartから flutterギャラリー

制約

Flutter のレイアウトシステムを完全に理解するには、以下が必要です Flutter の位置とサイズを学ぶレイアウト内のコンポーネント。詳細については、見る制約を理解する。

動画

以下のビデオはその一部ですフォーカスの flutterシリーズ、説明StatelessとStatefulウィジェット。

flutter インフォーカスプレイリスト

の各エピソード今週のウィジェットシリーズウィジェットに焦点を当てます。それらのいくつかにはレイアウトウィジェットが含まれています。

今週の Flutter ウィジェットプレイリスト

その他のリソース

レイアウトコードを作成する場合は、次のリソースが役立つ場合があります。

レイアウトチュートリアル

レイアウトを構築する方法を学びます。
ウィジェットカタログ

Flutter で使用できる多くのウィジェットについて説明します。
Flutter の HTML/CSS アナログ

Webプログラミングに詳しい方にとっては、このページでは、HTML/CSS 機能を Flutter 機能にマップします。
flutterギャラリー実行中のアプリ、リポジトリ

多くのマテリアルデザインウィジェットやその他を紹介するデモアプリ flutter機能。
APIリファレンスドキュメント

すべての Flutter ライブラリのリファレンスドキュメント。
Flutter でのボックス制約の処理

ウィジェットがレンダーボックスによってどのように制約されるかについて説明します。
アセットと画像の追加

画像やその他のアセットをアプリのパッケージに追加する方法について説明します。
Flutter を使用したゼロツーワン

初めての Flutter アプリを作成したある人の経験。

Flutter のレイアウト

ウィジェットをレイアウトする

1. レイアウトウィジェットを選択します

2. 表示可能なウィジェットを作成する

3. 表示ウィジェットをレイアウトウィジェットに追加します

4. レイアウトウィジェットをページに追加します

素材アプリ

非マテリアルアプリ

複数のウィジェットを縦横に配置する

ウィジェットの整列

ウィジェットのサイズ変更

ウィジェットのパッキング

行と列のネスト

一般的なレイアウトウィジェット

標準ウィジェット

マテリアルウィジェット

容器

概要（コンテナ）

例（コンテナ）

グリッドビュー

概要 (GridView)

例 (グリッドビュー)

リストビュー

概要 (リストビュー)

例 (リストビュー)

スタック

まとめ（スタック）

例（スタック）

カード

概要（カード）

例（カード）

リストタイル

概要 (ListTile)

例 (ListTile)

制約

動画

その他のリソース

ウィジェットをレイアウトする

1. レイアウトウィジェットを選択します

2. 表示可能なウィジェットを作成する

3. 表示ウィジェットをレイアウト ウィジェットに追加します

4. レイアウト ウィジェットをページに追加します

素材アプリ

非マテリアルアプリ

複数のウィジェットを縦横に配置する

ウィジェットの整列

ウィジェットのサイズ変更

ウィジェットのパッキング

行と列のネスト

一般的なレイアウト ウィジェット

標準ウィジェット

マテリアルウィジェット

容器

概要（コンテナ）

例（コンテナ）

グリッドビュー

概要 (GridView)

例 (グリッドビュー)

リストビュー

概要 (リストビュー)

例 (リストビュー)

スタック

まとめ（スタック）

例（スタック）

カード

概要（カード）

例（カード）

リストタイル

概要 (ListTile)

例 (ListTile)

制約

動画

その他のリソース

3. 表示ウィジェットをレイアウトウィジェットに追加します

4. レイアウトウィジェットをページに追加します

一般的なレイアウトウィジェット