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の操作の詳細については、グリッドリストの作成レシピを参照してください。

2. Use an OrientationBuilder to change the number of columns

アプリの現在の向きを確認するには、OrientationBuilderウィジェットを使用します。 OrientationBuilderは、親ウィジェットで使用可能な幅と高さを比較することによって現在の方向を計算し、親のサイズが変更されると再構築します。

orientationを使用して、縦向きモードで2列、横向きモードで3列を表示するリストを作成します。

OrientationBuilder(
  builder: (context, orientation) {
    return GridView.count(
      // Create a grid with 2 columns in portrait mode,
      // or 3 columns in landscape mode.
      crossAxisCount: orientation == Orientation.portrait ? 2 : 3,
    );
  },
);

Note:親が使用できるスペースの量ではなく、画面の向きに関心がある場合は、OrientationBuilderウィジェットの代わりにMediaQuery.of（context）.orientationを使用してください。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appTitle = 'Orientation Demo';

    return MaterialApp(
      title: appTitle,
      home: OrientationList(
        title: appTitle,
      ),
    );
  }
}

/*
class OrientationList extends StatelessWidget {
  final String title;

  OrientationList({Key key, this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: GridView.count(
          crossAxisCount:2,
          children: List.generate(100, (index) {
            return Center(
              child: Container(
                color:Colors.yellow,
                width:300,
                child: Text(
                  'Item $index',
                  style: Theme.of(context).textTheme.headline4,
                ),
              ),
            );
          }
      ),
    ),
    );
  }
}
*/





class OrientationList extends StatelessWidget {
  final String title;

  OrientationList({Key key, this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: OrientationBuilder(
        builder: (context, orientation) {
          return GridView.count(
            // Create a grid with 2 columns in portrait mode, or 3 columns in
            // landscape mode.
            crossAxisCount: orientation == Orientation.portrait ? 1: 2,
            // Generate 100 widgets that display their index in the List.
            children: List.generate(100, (index) {
              return Center(
                child: Container(
                  color:Colors.red,
                  width:300,
                  child: Text(
                    'Item $index',
                    style: Theme.of(context).textTheme.headline1,
                  ),
                ),
              );
            }),
          );
        },
      ),
    );
  }
}

参考

https://flutter.dev/docs/cookbook/design/orientation