Flutter如何實現響應式設計

在Flutter中實現響應式設計，可以通過以下幾種方式：

1. 使用MediaQuery

MediaQuery類提供了關于設備屏幕的信息，如屏幕尺寸、方向等。你可以使用這些信息來調整布局。

import 'package:flutter/material.dart';

class ResponsiveWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final screenSize = MediaQuery.of(context).size;
    final orientation = MediaQuery.of(context).orientation;

    return Container(
      child: Column(
        children: <Widget>[
          if (orientation == Orientation.portrait)
            Text('Portrait Mode'),
          else
            Text('Landscape Mode'),
          SizedBox(height: screenSize.height * 0.2),
          Text('Screen Width: ${screenSize.width}'),
          Text('Screen Height: ${screenSize.height}'),
        ],
      ),
    );
  }
}

2. 使用LayoutBuilder

LayoutBuilder允許你根據父組件的約束條件來構建子組件。

import 'package:flutter/material.dart';

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

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

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

3. 使用FractionallySizedBox

FractionallySizedBox可以根據父組件的尺寸來調整子組件的尺寸。

import 'package:flutter/material.dart';

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

4. 使用Flexible和Expanded

在Row和Column中使用Flexible和Expanded可以更好地控制子組件的布局。

import 'package:flutter/material.dart';

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

5. 使用Responsive庫

有一些第三方庫可以幫助你更方便地實現響應式設計，例如flutter_responsive。

dependencies:
  flutter_responsive: ^1.0.0

然后在代碼中使用：

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

class ResponsiveApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Responsive(
      breakpoints: [
        Breakpoint(
          name: 'mobile',
          query: MediaQuery.of(context).size.width < 600,
        ),
        Breakpoint(
          name: 'tablet',
          query: MediaQuery.of(context).size.width >= 600 && MediaQuery.of(context).size.width < 1024,
        ),
        Breakpoint(
          name: 'desktop',
          query: MediaQuery.of(context).size.width >= 1024,
        ),
      ],
      builder: (context, breakpoint) {
        if (breakpoint == 'mobile') {
          return MobileLayout();
        } else if (breakpoint == 'tablet') {
          return TabletLayout();
        } else {
          return DesktopLayout();
        }
      },
    );
  }
}

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

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

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

通過這些方法，你可以靈活地實現Flutter應用中的響應式設計。