Flutter如何適配不同屏幕尺寸

在Flutter中，適配不同屏幕尺寸可以通過以下幾種方法實現：

1. 使用MediaQuery類：MediaQuery類提供了許多有關設備的信息，如屏幕尺寸、分辨率等。你可以使用這些信息來調整布局和字體大小。

import 'package:flutter/material.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var screenSize = MediaQuery.of(context).size;
    var screenWidth = screenSize.width;
    var screenHeight = screenSize.height;

    return Container(
      width: screenWidth,
      height: screenHeight,
      child: Text('Hello, World!'),
    );
  }
}

2. 使用LayoutBuilder類：LayoutBuilder類允許你根據父組件的約束條件來構建布局。這樣，你可以根據屏幕尺寸調整布局。

import 'package:flutter/material.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        if (constraints.maxWidth < 600) {
          return MobileLayout();
        } else {
          return DesktopLayout();
        }
      },
    );
  }
}

class MobileLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('Mobile Layout'),
    );
  }
}

class DesktopLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('Desktop Layout'),
    );
  }
}

3. 使用FractionallySizedBox類：FractionallySizedBox類允許你根據父組件的尺寸來設置子組件的尺寸。例如，你可以讓一個子組件占據屏幕寬度的50%。

import 'package:flutter/material.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FractionallySizedBox(
      widthFactor: 0.5,
      child: Container(
        color: Colors.blue,
      ),
    );
  }
}

4. 使用Flexible和Expanded類：在Flex布局中，你可以使用Flexible和Expanded類來根據屏幕尺寸調整子組件的尺寸。

import 'package:flutter/material.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          flex: 1,
          child: Container(
            color: Colors.red,
          ),
        ),
        Expanded(
          flex: 2,
          child: Container(
            color: Colors.green,
          ),
        ),
      ],
    );
  }
}

5. 使用響應式設計庫：有許多第三方庫可以幫助你更容易地實現響應式設計，例如responsive_framework、flutter_screenutil等。這些庫提供了一些工具和組件，可以讓你更方便地適配不同屏幕尺寸。

總之，要適配不同屏幕尺寸，你需要根據實際需求選擇合適的方法。在實踐中，通常需要結合多種方法來實現最佳的適配效果。