appandup_adaptive_widgets 是一个 Flutter 插件，旨在帮助开发者创建自适应布局，从而在不同设备（如手机、平板、桌面等）上提供更好的用户体验。该插件提供了一些有用的工具和组件，使得在不同屏幕尺寸和方向下调整布局变得更加容易。

安装插件

首先，你需要在 pubspec.yaml 文件中添加依赖项：

dependencies:
  flutter:
    sdk: flutter
  appandup_adaptive_widgets: ^latest_version

然后运行 flutter pub get 来安装插件。

使用 appandup_adaptive_widgets

1. 导入插件

在你的 Dart 文件中导入插件：

import 'package:appandup_adaptive_widgets/appandup_adaptive_widgets.dart';

2. 使用 AdaptiveBuilder

AdaptiveBuilder 是一个非常有用的组件，它可以根据屏幕的宽度或设备类型来显示不同的布局。

AdaptiveBuilder(
  builder: (context, screenType) {
    switch (screenType) {
      case ScreenType.small:
        return const SmallScreenWidget();
      case ScreenType.medium:
        return const MediumScreenWidget();
      case ScreenType.large:
        return const LargeScreenWidget();
      default:
        return const DefaultScreenWidget();
    }
  },
)

ScreenType 是一个枚举，表示设备的屏幕类型：

• ScreenType.small: 小屏幕设备（如手机）
• ScreenType.medium: 中等屏幕设备（如平板）
• ScreenType.large: 大屏幕设备（如桌面）

3. 使用 AdaptiveLayout

AdaptiveLayout 允许你根据屏幕宽度或设备类型来定义不同的布局。

AdaptiveLayout(
  small: const SmallScreenWidget(),
  medium: const MediumScreenWidget(),
  large: const LargeScreenWidget(),
)

4. 使用 AdaptiveContainer

AdaptiveContainer 是一个自适应容器，可以根据屏幕宽度或设备类型调整其大小和布局。

AdaptiveContainer(
  small: const BoxConstraints(maxWidth: 300),
  medium: const BoxConstraints(maxWidth: 600),
  large: const BoxConstraints(maxWidth: 1200),
  child: const MyWidget(),
)

5. 使用 AdaptiveText

AdaptiveText 是一个自适应文本组件，可以根据屏幕宽度或设备类型调整字体大小。

AdaptiveText(
  'Hello, World!',
  small: const TextStyle(fontSize: 14),
  medium: const TextStyle(fontSize: 18),
  large: const TextStyle(fontSize: 24),
)

示例代码

以下是一个完整的示例，展示了如何使用 appandup_adaptive_widgets 插件来创建自适应布局：

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Adaptive Layout Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Adaptive Layout Demo'),
      ),
      body: AdaptiveBuilder(
        builder: (context, screenType) {
          switch (screenType) {
            case ScreenType.small:
              return const SmallScreenWidget();
            case ScreenType.medium:
              return const MediumScreenWidget();
            case ScreenType.large:
              return const LargeScreenWidget();
            default:
              return const DefaultScreenWidget();
          }
        },
      ),
    );
  }
}

class SmallScreenWidget extends StatelessWidget {
  const SmallScreenWidget({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const Center(
      child: Text('This is a small screen layout'),
    );
  }
}

class MediumScreenWidget extends StatelessWidget {
  const MediumScreenWidget({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const Center(
      child: Text('This is a medium screen layout'),
    );
  }
}

class LargeScreenWidget extends StatelessWidget {
  const LargeScreenWidget({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const Center(
      child: Text('This is a large screen layout'),
    );
  }
}

class DefaultScreenWidget extends StatelessWidget {
  const DefaultScreenWidget({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const Center(
      child: Text('This is the default layout'),
    );
  }
}