How to detect orientation change in layout in Flutter?

在Flutter中检测布局方向（横向或纵向）的变化通常涉及到监听媒体查询(MediaQuery)的变化。MediaQuery可以让我们获得关于当前媒体（如屏幕）的信息，其中包括设备的方向（Orientation）。

首先，您需要确认您的Flutter应用程序中包含了MaterialApp，WidgetsApp或CupertinoApp。这些应用框架默认包含了一个MediaQuery。

以下是一个简单的例子来演示如何检测和响应方向变化：

dart
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Orientation Demo',
      home: OrientationList(),
    );
  }
}

class OrientationList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 获取当前的方向
    var orientation = MediaQuery.of(context).orientation;

    return Scaffold(
      appBar: AppBar(
        title: Text('Orientation Demo'),
      ),
      body: Center(
        child: Builder(
          builder: (context) {
            // 根据方向变化来调整UI
            if (orientation == Orientation.portrait) {
              return Text('Portrait mode');
            } else {
              return Text('Landscape mode');
            }
          },
        ),
      ),
    );
  }
}

在这个例子中，OrientationList 是一个无状态的组件，它通过 MediaQuery.of(context).orientation 获取当前的屏幕方向。然后它在Builder widget中根据当前的方向来更新显示的文本。当您旋转设备时，Flutter会重建UI，MediaQuery.of(context).orientation将返回新的方向，UI也会相应地更新。

这种方法是处理Flutter中方向变更的一种非常直接和高效的方式。您可以根据这个方向变化来调整布局、控件大小等，从而提供更好的用户体验。