2021/2/13 LayoutBuilder classの訳

LayoutBuilder class

親ウィジェットのサイズを参考にして、自分自身を決定するようなウィジェットツリーを構築したい時にLayoutBuilderウィジェットを使います。

フレームワークが、レイアウト時にbuilderプロパティに設定されたコールバックを呼び出し、親ウィジェットの制約を提供することを除いて、Builderウィジェットに似ています。

これは、親が子のサイズを制約し、子の固有のサイズに依存しない場合に役立ちます。LayoutBuilderの最終的なサイズは、その子のサイズと一致します。

builderプロパティに設定されたコールバックは次のような状況で呼び出されます。

  • 初めてウィジェットがレイアウトされる時
  • 親ウィジェットが今までとは違うレイアウトconstraints(制約)を渡してきた時
  • 親ウィジェットがこのウィジェットをアップデートする時(リビルド時と思われる。)
  • Builder関数がサブスクライブする依存関係が変更されたとき。

工事中🏗

親が同じ制約を繰り返し渡す場合、レイアウト中にbuilder関数は呼び出されません。


import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/// This is the main application widget.
class MyApp extends StatelessWidget {
  static const String 

2021/2/10 Update the UI based on orientationの訳

Update the UI based on orientation

状況によっては、ユーザーが画面を縦向き(portrait)モードから横向き(landscape)モードに回転させたときにアプリの表示を更新したい場合があります。

たとえば、アプリは縦向きモードで次々にアイテムを表示し、横向きモードでは同じアイテムを横に並べて表示したい場合があります。

Flutterでは、特定の方向に応じてさまざまなレイアウトを作成できます。 この例では、次の手順を使用して、縦向きモードで2列、横向きモードで3列を表示するリストを作成します。

  1. 2つの列を持つGridViewを生成します。
  2. OrientationBuilderを使用して、列の数を変更します。

1. Build a GridView with two columns

まず、使用するアイテムのリストを作成します。

通常のリスト(ListView)を使用するのではなく、アイテムをグリッドに表示するリスト(GridView)を作成します。今回は2列のグリッドを作成します。

GridView.count(
  // A list with 2 columns
  crossAxisCount: 2,
  // ...
);

GridViewの操作の詳細については、グリッドリストの作成レシピを参照してください。…