mirai_responsive 是一个用于 Flutter 的响应式布局插件，旨在帮助开发者更轻松地创建适应不同屏幕尺寸和方向的应用程序。它提供了一种简单的方式来管理布局、字体大小、边距等，使应用程序在不同设备上都能保持一致的用户体验。

安装 mirai_responsive

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

dependencies:
  flutter:
    sdk: flutter
  mirai_responsive: ^1.0.0  # 请使用最新版本

然后，运行 flutter pub get 来安装依赖。

基本用法

1. 初始化 MiraiResponsive

在你的 main.dart 文件中，初始化 MiraiResponsive：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Mirai Responsive Example',
      home: MiraiResponsive(
        designSize: Size(375, 812), // 设计稿的尺寸（例如 iPhone 12）
        builder: (context) => HomePage(),
      ),
    );
  }
}

在这里，designSize 是你设计稿的尺寸，通常可以选择一个常见的设备尺寸（如 iPhone 12 的 375x812）。

2. 使用响应式工具

在 MiraiResponsive 的 builder 中，你可以使用 MiraiResponsive 提供的工具来创建响应式布局。

class HomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Mirai Responsive Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Responsive Text',
              style: TextStyle(fontSize: 20.r), // 使用 .r 来设置响应式字体大小
            ),
            SizedBox(height: 16.r), // 使用 .r 来设置响应式间距
            Container(
              width: 200.r, // 使用 .r 来设置响应式宽度
              height: 100.r, // 使用 .r 来设置响应式高度
              color: Colors.blue,
              child: Center(
                child: Text(
                  'Responsive Box',
                  style: TextStyle(fontSize: 16.r),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在这里，.r 是 MiraiResponsive 提供的一个扩展方法，用于将设计稿中的尺寸转换为当前设备的实际尺寸。

3. 响应式布局

MiraiResponsive 还提供了 MiraiResponsiveWidget，可以根据屏幕宽度自动调整布局：

class HomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Mirai Responsive Example'),
      ),
      body: MiraiResponsiveWidget(
        small: Container(
          color: Colors.red,
          child: Center(
            child: Text(
              'Small Screen',
              style: TextStyle(fontSize: 20.r),
            ),
          ),
        ),
        medium: Container(
          color: Colors.green,
          child: Center(
            child: Text(
              'Medium Screen',
              style: TextStyle(fontSize: 20.r),
            ),
          ),
        ),
        large: Container(
          color: Colors.blue,
          child: Center(
            child: Text(
              'Large Screen',
              style: TextStyle(fontSize: 20.r),
            ),
          ),
        ),
      ),
    );
  }
}